HTML Calendar Tutorial

September 13

Programmering av en kalender i HTML er ganske enkelt. Den vil bruke tabeller, lage en serie med rader og kolonner som er svært lik regneark. Du kan legge igjen en kalender som enkel tekst for folk å bruke som en referanse, eller du kan angi datoene som lenker for å gi folk en visuell måte å navigere date-sensitivt materiale. Når du forstår grunnleggende bruk av disse tabellene, kan du endre dem til å opprette en kalender du måtte trenge.

Bruksanvisning

1 Begynn bordet. Du vil gjøre dette med koden

<TABLE> er den grunnleggende kode for å begynne tabellen. Grensen kode oppretter en kant med en størrelse på fire, mens celle mellomrom og celle padding koder har å gjøre med hvor mye plass som er rundt teksten. Lek med tallene når kalenderen er ferdig for å se de forskjellige effektene.

2 Legg den første raden. For å gjøre dette, skriver du inn koden

<Tr>

<TD colspan = "7" align = center> november 2010 </ td>

</ Tr>

<TR> begynner tabellraden, </ tr> ender det. Du må gjøre dette for hver rad. Innenfor radene begynner <td> tabelldataene, og </ td> ender det.

Colspan = "7" forteller leseren at denne raden vil strekke seg over syv kolonner (en for hver dag).

3 Legg dagen rad med følgende kode:

<Tr>

</ Tr>

Dette har skapt en rad med syv kolonner, en for hver dag. Hver <td> </ td> representerer en kolonne.

4 Legg den første raden av datoer med følgende kode:

<Tr>

</ Tr>

November 2010 starter på en mandag, så den første kolonnen i denne raden (søndag) er blank.

5 Fortsett å legge til rader med datoer før kalenderen er fullført.

6 Fullfør tabellen med koden </ TABLE>

Hint

Her er den komplette koden for denne kalenderen:
<TABLE BORDER = 4 cellspacing = 3 cellpadding = 3>
<Tr>
<TD colspan = "7" align = center> november 2010 </ td>
</ Tr>
<Td align = center> Sun </ td>
<Td align = center> man </ td>
<Td align = center> Ti </ td>
<Td align = center> Wed </ td>
<Td align = center> to </ td>
<Td align = center> fr </ td>
<Td align = center> Lør </ td>
<Td align = center> </ td>
<Td align = center> 1 </ td>
<Td align = center> 2 </ td>
<Td align = center> 3 </ td>
<Td align = center> 4 </ td>
<Td align = center> 5 </ td>
<Td align = center> 6 </ td>
<Td align = center> 7 </ td>
<Td align = center> 8 </ td>
<Td align = center> 9 </ td>
<Td align = center> 10 </ td>
<Td align = center> 11 </ td>
<Td align = center> 12 </ td>
<Td align = center> 13 </ td>
<Td align = center> 14 </ td>
<Td align = center> 15 </ td>
<Td align = center> 16 </ td>
<Td align = center> 17 </ td>
<Td align = center> 18 </ td>
<Td align = center> 19 </ td>
<Td align = center> 20 </ td>
<Td align = center> 21 </ td>
<Td align = center> 22 </ td>
<Td align = center> 23 </ td>
<Td align = center> 24 </ td>
<Td align = center> 25 </ td>
<Td align = center> 26 </ td>
<Td align = center> 27 </ td>
<Td align = center> 28 </ td>
<Td align = center> 29 </ td>
<Td align = center> 30 </ td>
</ TABLE>