Hvordan lage en tabell Calendar Med XHTML

Extensible Hypertext Markup Language (XHTML) er et XML markup language svært like i form og funksjon til HTML. Som med HTML, og skaper en tabell innebærer å skrive kode for noen grunnleggende komponenter: Selve tabellen, rader og tittelrader i tabellen, og individuelle tabellceller. Bruke noen enkle Cascading Style Sheet (CSS) regler til dette rammeverket tillater webside forfattere til å lage en tabell design som etterligner utseendet av tradisjonelle kalendere.

Bruksanvisning

1 Åpne din webside. Hvis du bruker et tekstredigeringsprogram som Notisblokk eller Wordpad, åpne din webside og finne sted i koden der tabellen skal gå. Hvis du bruker en visuell redigering program som Adobe Dreamweaver eller Microsoft Expression Web, åpne din webside og klikk på det spesifikke området der du vil tabellen plassert. Deretter endre sidevisningen til kodevisning for å se HTML som styrer den delen av siden.

2 Opprett en tom linje for XHTML-kode i kalenderen.

3 Legg en kalender overskrift. Dette eksemplet oppretter en kalender for måneden februar 2010. Kopier og lim inn følgende kode på den blanke linjen du opprettet i forrige trinn:

<h2> februar 2010 </ h2>

4 Opprett inneholder tabellen. Sett inn en blank linje under overskriften tag. Kopier og lim inn følgende XHTML-kode:

<Table>
</ Table>

5 Legg en header rad i tabellen. Kalendere generelt vise ukedagene langs sine øverste radene. Ligne dette formatet ved å sette inn en blank linje under åpningen "<table>" tag, og deretter kopiere og lime inn følgende kode på den blanke linjen:

<Tr> <th> Søn </ th> <th> man </ th> <th> Ti </ th> <th> WED </ th> <th> to </ th> <th> fr </ th > <th> SAT </ th> </ tr>

6 Legg en rad for hver uke i måneden. Februar 2010 har dager spredt over fem uker, så må det opprettes fem tabellrader med syv celler hver. Sett inn en blank linje under overskriften raden du har lagt i forrige trinn, og deretter kopiere og lime inn følgende kode på linjen:

<Tr> <td> </ td> <td> 1 </ td> <td> 2 </ td> <td> 3 </ td> <td> 4 </ td> <td> 5 </ td> <td> 6 </ td> </ tr>
<Tr> <td> 7 </ td> <td> 8 </ td> <td> 9 </ td> <td> 10 </ td> <td> 11 </ td> <td> 12 </ td > <td> 13 </ td> </ tr>
<Tr> <td> 14 </ td> <td> 15 </ td> <td> 16 </ td> <td> 17 </ td> <td> 18 </ td> <td> 19 </ td > <td> 20 </ td> </ tr>
<Tr> <td> 21 </ td> <td> 22 </ td> <td> 23 </ td> <td> 24 </ td> <td> 25 </ td> <td> 26 </ td > <td> 27 </ td> </ tr>
<Tr> <td> 28 </ td> <td> </ td> <td> </ td> <td> </ td> <td> </ td> <td> </ td> <td> < / td> </ tr>

Den ikke-breaking mellomrom "()" vises i celler som ikke har noen tallverdi.

7 Legg CSS-regler stil. Hvis du viser tabellen i nettleseren din, vil du se den har en veldig ren design. Noen enkle CSS-regler kan øke tabellbredden, fet og skygge overskriftsraden, og gi rammer for hver dag i uken. Samlet utgjør disse stiler hjelpe tabellen ligne en kalender. Finn "</ head>" tag nær toppen av koden din og sette inn en tom linje rett ovenfor. Kopier og lim inn følgende kode på den blanke linjen:

<Style type = "text / css">
table {width: 75%}
th {background-color: #eee; border: 1px solid #ccc; padding: 5px; text-align: left}
td {border: 1px solid #ccc; padding: 5px; Bredde: 14,29%}
</ Style>

8 Lagre siden din og åpne den i nettleseren din. Din side inneholder nå en XHTML tabellen formatert til å se ut som en kalendermåned.