Innhold
- Lag en tabell i HTML
- Trinn 1
- Steg 2
- Trinn 3
- Trinn 4
- Trinn 5
- Tilpass kalenderen
- Trinn 1
- Steg 2
- hovedkalenderen {
- Trinn 3
- kalenderen,
- td kalender {
- Trinn 4
- td span kalender {
Selv om tabeller har falt i favør når det gjelder å lage nettsidelinjer, fungerer de fortsatt bra for koding av HTML-kalendere. Kalendere viser tabelldata på en måte når de er organisert i et rutenett av datoer med kolonner som er for eksempel navngitt med ukedagene. Ekstra CSS-kode vil lage et kjedelig rutenett med navn og tall som en kalender. Siden hendelsene i en kalender trenger plass, både for antall datoer og for begivenhetene, vil det også være nødvendig å bruke CSS til å formatere datoene på en måte som holder begge informasjonene lesbare.
Lag en tabell i HTML
Trinn 1
Lag en tabell for å strukturere kalenderen. Denne tabellen krever en overskrift med syv celler, en for hver ukedag. Det er også nødvendig å lage seks rader med vanlige tabellceller. Kopier og lim inn utdraget på en webside ved hjelp av Notisblokk eller en kodeditor.
| søndag | mandag | tirsdag | onsdag | Torsdag | fredag | lørdag |
|---|
Denne koden vil opprette tabellen og tittelen. Tabellen bruker et identifikasjonsnavn kalt "kalender" i tilfelle nettstedet bruker tabeller på andre sider.
Steg 2
Legg til et par kroppskoder under "" -koden:
Trinn 3
Kopier følgende kode og lim den inn mellom "
" seks ganger:Denne koden vil opprette hver rad med syv celler, slik at ved å legge til seks av dem, vil kalenderen ha alle datarommene du trenger for alle månedene av året.
Trinn 4
Legg til datoer i kalenderen i henhold til måneden du vil vise. Se i en ekte kalender og vær forsiktig så du ikke hopper over eller gjenta en dato. Legg hver dato med "" -kodene, slik at du kan tilpasse tallene senere:
Trinn 5
Legg merke til hendelsene i cellene som inneholder relevante datoer. Hendelser må være utenfor "" -kodene, men inne i "
’:
Halloween-fest!
Siste dag for registrering.
Tilpass kalenderen
Trinn 1
Finn "
Omriss er valgfritt, men dette er den mest hensiktsmessige måten å legge til grenser i tabeller på nåværende websider.
Steg 2
Tilpass tittelen på tabellen med en farge for bokstavene og en annen for bakgrunnen:
hovedkalenderen {
farge: #ffffff; bakgrunnsfarge: mørkeblå; skriftvekt: fet; }
Det er mulig å bruke heksadesimal kode eller navnet på fargene. Denne tittelen vil vise hvit tekst på en marineblå bakgrunn.
Trinn 3
Fyll, rammer, bredde og posisjon i forhold til tabellcellene:
kalenderen,
td kalender {
polstring: 20px; kant: 1 px solid sort; bredde: 100px; posisjon: relativ; }
Relativ plassering lar programmereren plassere datoer i form av tall i hjørnene av bordcellene senere. Ikke angi en høyde, da dette vil begrense hvor mye tekst du kan legge til en hvilken som helst dato.
Trinn 4
Lag tallene ved hjelp av fyll, bakgrunnsfarge og absolutt posisjonering:
td span kalender {
skriftvekt: fet; posisjon: absolutt; bunn: 0; høyre: 0; display: blokk; polstring: 5px; bakgrunnsfarge: #eeeeee; }
Du må inkludere "display: block" for å få taggene til å fungere som ruter på websiden, ellers vil du ikke kunne fylle dem. Denne eksempelkoden oppretter en svak grå rute i nedre venstre hjørne av hvert datoområde, og viser datoenummeret.