Tabele

Tabele v HTML nam omogočajo razporeditev drugih elementov (besedila, slik, seznamov, tabel ...) v obliki vrstic in stolpcev.

Tabelo v HTML naredimo z značko <table>. Ta ima nekaj pomembnih lastnosti:

width širina tabele (v pikah ali procentih)
border debelina (v pikah)
cellspacing prazen prostor med celicami tabele (v pikah)
cellpadding prazen prostor ob robovih v notranjosti celic (v pikah)

Med značkama <table> in </table> opišemo vsebino tabele. Opisati moramo vsako vrstico posebej, pri čemer opis vrstice pričnemo z značko <tr> (table row), končamo pa z značko </tr>.

V vsaki vrstici moramo opisati posamezne celice (polja) tabele. Ta opis pričnemo z značko <td> (table data), končamo pa z značko </td>. Obstajajo tudi posebne vrste celic, ki jih običajno uporabimo kot naslovne celice v prvi vrstici ali prvem stolpcu. Te celice opišemo z značko <th> (table heading), končamo pa z značko </th>.

primer1.htm

<table border=2> <tr> <td> </td> <th> dohodki </th> <th> izdatki </th> </tr> <tr> <th> 1998 </th> <td> 1.200.000 </td> <td> 950.000 </td> </tr> <tr> <th> 1999 </th> <td> 1.500.000 </td> <td> 1.700.000 </td> </tr> <tr> <th> 2000 </th> <td> 1.400.000 </td> <td> 1.000.000 </td> </tr> </table>

Med pomembnejše lastnosti značk <td> in <th> spadajo:

rowspan čez koliko vrstic naj sega celica
colspan čez koliko stolpcev naj sega celica
align vodoravna poravnava [ left | center | right | justify ]
valign navpična poravnava [ top | middle | bottom | baseline ]

Če želimo vsem celicam v vrstici predpisati enake vrednosti lastnosti align ali valign jih lahko predpišemo kar pri znački <tr>.

primer2.htm

<table width="50%" border=20 cellspacing=10 cellpadding=5> <tr align=left> <td> </td> <th> dohodki </th> <th> izdatki </th> </tr> <tr align=center> <th> 1998 </th> <td> 1.200.000 </td> <td> 950.000 </td> </tr> <tr align=right> <th> 1999 </th> <td> 1.500.000 </td> <td> 1.700.000 </td> </tr> <tr> <th> 2000 </th> <td align=left> 1.400.000 </td> <td align=right> 1.000.000 </td> </tr> </table>

Tabeli lahko dodamo tudi kratek opis (caption). Tega določimo z značko <caption>. Če ga definiramo, moramo to storiti takoj za značko <table>.

Če je celica prazna, pregledovalnik njenih robov ne bo narisal. Če bi robove kljub temu radi imeli, moramo v celico zapisati nekaj, kar ne bo imelo vidnega učinka (presledek ni dober, ker celice s samimi presledki pregledovalniki obravnavajo kot prazne). Najbolje je v celico zapisati "trdi" presledek. Tega zapišemo kot &nbsp; (non breaking space).

primer3.htm

<table border=1 cellpadding=5> <caption> Koliko vode potrebujejo rože? </caption> <tr> <td rowspan=2 align=center> Roža </td> <th colspan=3> Tedenska poraba vode </th> </tr> <tr align=center valign=baseline> <td> <i>v sončnem<br>vremenu</i> </td> <td> <i>v oblačnem<br>vremenu</i> </td> <td> <i>pozimi</i> </td> </tr> <tr> <th align=left> Fikus </th> <td> 1 liter </td> <td> 0.5 litra </td> <td> 0.2 - 0.5 litra </td> </tr> <tr> <th align=left> Kaktus </th> <td> 0.2 litra </td> <td> &nbsp; </td> <td> do 0.05 litra </td> </tr> <tr> <th align=left> Praprot </th> <td> 2.5 litra </td> <td> 1.5 litra </td> <td> 1.5 litra </td> </tr> </table>

Vsebina celice je lahko karkoli: poljubno besedilo, slike, druge tabele, seznami...

Če v znački <table> lastnosti border ne navedemo, bo tabela narisana brez robov. Tabele brez robov uporabljamo za razporejanje drugih elementov (besedila, slik, tabel, seznamov ...) na strani.

primer4.htm

<table width="100%"> <tr> <td> S tem primerom je prikazano, kako lahko s pomočjo tabel razporejamo druge elemente na strani. V tej celici je precej besedila. Desno je preprosta tabela z robovi, spodaj je v celici narisana slika, spodaj desno pa primer naštevanja. Če ne zahtevamo drugače, so vsebine celic poravnane levo znotraj celice, navpično pa so poravnane na sredino. </td> <td> <table border=2> <tr> <td> </td> <th> dohodki </th> <th> izdatki </th> </tr> <tr> <th> 1998 </th> <td> 1.200.000 </td> <td> 950.000 </td> </tr> <tr> <th> 1999 </th> <td> 1.500.000 </td> <td> 1.700.000 </td> </tr> <tr> <th> 2000 </th> <td> 1.400.000 </td> <td> 1.000.000 </td> </tr> </table> </td> </tr> <tr> <td> <img src="../zaversnik.fmf.uni-lj.si/zaversnik.gif" width=117 height=161 alt="Matjaž Zaveršnik"> </td> <td> <ol> <li> analiza </li> <li> algebra </li> <li> računalništvo </li> <li> topologija </li> <li> verjetnost </li> </ol> </td> </tr> </table>