Indhold
- Opret en tabel i HTML
- Trin 1
- Trin 2
- Trin 3
- Trin 4
- Trin 5
- Tilpas kalenderen
- Trin 1
- Trin 2
- hovedkalender {
- Trin 3
- kalender,
- td kalender {
- Trin 4
- td span kalender {
Selvom tabeller er faldet ud af favør, når det kommer til opbygning af websidelayouter, fungerer de stadig godt til kodning af HTML-kalendere. Kalendere viser tabeldata på en måde, når de er organiseret i et gitter med datoer med kolonner navngivet for eksempel med ugedagene. Ekstra CSS-kode vil gøre det kedeligt gitter med navne og numre mere som en kalender. Da begivenhederne i en kalender har brug for plads, både for antallet af datoer og for begivenhederne, vil det også være nødvendigt at bruge CSS til at formatere datoerne på en måde, der holder begge informationer læsbare.
Opret en tabel i HTML
Trin 1
Opret en tabel for at strukturere kalenderen. Denne tabel kræver et overskrift med syv celler, en for hver ugedag. Det er også nødvendigt at oprette seks rækker med almindelige tabelceller. Kopier og indsæt uddraget på en webside ved hjælp af Notepad eller en kodeditor.
| Søndag | Mandag | tirsdag | onsdag | torsdag | Fredag | lørdag |
|---|
Denne kode opretter tabellen og titlen. Tabellen bruger et identifikationsnavn kaldet "kalender", hvis webstedet bruger tabeller på andre sider.
Trin 2
Tilføj et par kropskoder under tagget "":
Trin 3
Kopier følgende kode og indsæt den mellem "
"seks gange:Denne kode opretter hver række med syv celler, så ved at tilføje seks af dem vil kalenderen have alle de datarum, du har brug for i alle måneder af året.
Trin 4
Føj datoer til kalenderen i henhold til den måned, du vil vise. Se en rigtig kalender, og pas på ikke at springe over eller gentage en dato. Omslut hver dato med "" tags, så du kan tilpasse numrene senere:
Trin 5
Bemærk begivenhederne i cellerne, der indeholder relevante datoer. Begivenheder skal være uden for "" tags, men inde i "
’:
Halloween fest!
Sidste dag for registrering.
Tilpas kalenderen
Trin 1
Find "
Kontur er valgfri, men dette er den mest passende måde at tilføje grænser til tabeller på aktuelle websider.
Trin 2
Tilpas titlen på tabellen med en farve til bogstaverne og en anden til baggrunden:
hovedkalender {
farve: #ffffff; baggrundsfarve: mørkeblå; font-vægt: fed; }
Det er muligt at bruge hexadecimal kode eller navnet på farverne. Denne titel viser hvid tekst på en marineblå baggrund.
Trin 3
Fyld, kanter, bredde og placering i forhold til tabelcellerne:
kalender,
td kalender {
polstring: 20px; kant: 1 px solid sort; bredde: 100 px; position: relativ; }
Relativ placering giver programmøren mulighed for senere at placere datoer i form af tal i hjørnerne af bordcellerne. Indstil ikke en højde, da dette vil begrænse, hvor meget tekst du kan tilføje til en hvilken som helst dato.
Trin 4
Opret numrene ved hjælp af udfyldning, baggrundsfarve og absolut placering:
td span kalender {
font-vægt: fed; position: absolut; bund: 0; højre: 0; display: blok; polstring: 5 px; baggrundsfarve: #eeeeee; }
Du skal medtage "display: block" for at få tags "" til at fungere som felter på websiden, ellers kan du ikke udfylde dem. Denne prøvekode opretter et svagt gråt felt i nederste venstre hjørne af hvert datoområde, der viser datoenummeret.