Inhoud
- Maak een tabel in HTML
- Stap 1
- Stap 2
- Stap 3
- Stap 4
- Stap 5
- Pas de kalender aan
- Stap 1
- Stap 2
- thead agenda {
- Stap 3
- e kalender,
- td agenda {
- Stap 4
- td span kalender {
Hoewel tabellen uit de gratie zijn geraakt als het gaat om het bouwen van webpagina-indelingen, werken ze nog steeds goed voor het coderen van HTML-agenda's. Kalenders geven op een bepaalde manier gegevens in tabelvorm weer, zodra ze zijn georganiseerd in een raster van datums met kolommen die bijvoorbeeld de dagen van de week worden genoemd. Extra CSS-code zorgt ervoor dat een saai raster met namen en nummers meer op een kalender lijkt. Aangezien evenementen op een kalender ruimte nodig hebben, zowel voor het aantal datums als voor evenementen, zal het ook nodig zijn om CSS te gebruiken om de datums zo op te maken dat beide delen van de informatie leesbaar blijven.
Maak een tabel in HTML
Stap 1
Maak een tabel om de kalender te structureren. Deze tabel vereist een koptekst met zeven cellen, één voor elke dag van de week. Het is ook nodig om zes rijen normale tabelcellen te maken. Kopieer en plak het fragment in een webpagina met behulp van Kladblok of een code-editor.
| zondag | maandag | dinsdag | woensdag | donderdag | vrijdag | zaterdag |
|---|
Deze code maakt de tabel en de titel aan. De tabel gebruikt een identificatienaam genaamd "kalender" voor het geval de website tabellen op andere pagina's gebruikt.
Stap 2
Voeg een paar body-tags toe onder de tag "":
Stap 3
Kopieer de volgende code en plak deze tussen de "
" zes keer:Deze code maakt elke rij met zeven cellen, zodat door er zes toe te voegen, de kalender alle gegevensruimten heeft die je nodig hebt voor alle maanden van het jaar.
Stap 4
Voeg datums toe aan de kalender volgens de maand die u wilt weergeven. Raadpleeg een echte kalender en pas op dat u een datum niet overslaat of herhaalt. Zet elke datum tussen de "" -tags, zodat u de cijfers later kunt aanpassen:
Stap 5
Let op de gebeurtenissen in de cellen die relevante datums bevatten. Gebeurtenissen moeten buiten de "" tags staan, maar binnen de "
’:
Halloween feest!
Laatste dag voor inschrijving.
Pas de kalender aan
Stap 1
Zoek de "
Omtrek is optioneel, maar dit is de meest geschikte manier om randen toe te voegen aan tabellen op huidige webpagina's.
Stap 2
Pas de titel van de tafel aan met een kleur voor de letters en een andere voor de achtergrond:
thead agenda {
kleur: #ffffff; achtergrondkleur: donkerblauw; font-weight: vet; }
Het is mogelijk om hexadecimale code of de naam van de kleuren te gebruiken. Deze titel zal witte tekst op een marineblauwe achtergrond weergeven.
Stap 3
Vulling, randen, breedte en positie ten opzichte van de tabelcellen:
e kalender,
td agenda {
opvulling: 20px; rand: 1px effen zwart; breedte: 100px; positie: relatief; }
Relatieve plaatsing stelt de programmeur in staat datums later in de vorm van getallen in de hoeken van de tabelcellen te plaatsen. Stel geen hoogte in, aangezien dit beperkt hoeveel tekst u aan een datum kunt toevoegen.
Stap 4
Maak de nummers met behulp van de opvulling, achtergrondkleur en absolute positionering:
td span kalender {
font-weight: vet; positie: absoluut; onder: 0; rechts: 0; display: blok; opvulling: 5px; achtergrondkleur: #eeeeee; }
U moet "display: block" opnemen om ervoor te zorgen dat de tags "" als vakken op de webpagina werken, anders kunt u ze niet vullen. Deze voorbeeldcode creëert een vaag grijs vak in de linkerbenedenhoek van elke dataruimte, waarin het datumnummer wordt weergegeven.