Tabele v HTML nam omogočajo, da v obliki vrstic in stolpcev razporedimo elemente, kot so na primer besedila, slike, seznami in celo druge tabele. Tabelo sestavimo iz posameznih vrstic, ki jih lahko združujemo v skupine, vsaka vrstica pa je sestavljena iz posameznih celic.
Tabelo opišemo z elementom table. Njegova vsebina se prične z morebitnim opisom (caption), ki se prikaže nad tabelo sredinsko poravnan čez širino celotne tabele. Za opisom lahko z elementi col (column) in colgroup (column group) določimo lastnosti stolpcev, na koncu pa navedemo še vsebino posameznih celic. Za opis navadnih celic uporabljamo element td (table data), za opis naslovnih, ki se običajno pojavljajo v prvi vrstici ali prvem stolpcu pa element th (table heading). Celice združujemo v vrstice, ki jih opišemo z elementi tr (table row), vrstice pa v skupine (glava, noge in telo), ki jih opišemo z elementi thead, tfoot in tbody (v tem vrstnem redu). Glavo tabele sestavljajo vrstice, ki se pri izpisu ponovijo na vrhu vsake strani, noge tabele pa vrstice, ki se ponovijo na dnu vsake strani. Tabela lahko ima več teles. Če so glava in noge prazni in je telo eno samo, nam značk za telo ni potrebno pisati (dovolj je samo opisati njegovo vsebino).
<table> <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>
Posamezni celici (td, th), vrstici (tr), stolpcu (col) ter skupini vrstic (thead, tfoot, tbody) ali stolpcev (colgroup) lahko določimo, kako naj bo poravnana vsebina znotraj njih. Za vodoravno poravnavo uporabimo lastnost align, z vrednostmi left (levo), right (desno), center (sredinsko) ali justify (obojestransko), za navpično poravnavo pa lastnost valign, z vrednostmi top (navzgor), bottom (navzdol), middle (sredinsko) ali baseline (na osnovno črto).
Širino celotne tabele nastavimo z lastnostjo width elementa table, širino stolpcev pa z lastnostjo width elementov col (za posamezen stolpec) ali colgroup (za vse stolpce v skupini). Širine lahko nastavimo v pikah ali procentih (dejanska širina bo v tem primeru odvisna od širine brskalnikovega okna).
Na širino tabele vplivajo tudi razmiki med celicami, ki jih nastavimo z lastnostjo cellspacing elementa table (njena privzeta vrednost je 1). Z lastnostjo cellpadding pa nastavimo, koliko prostora naj bo med vsebino celice in njenimi robovi.
Za določanje robov okoli tabele in posameznih celic imamo na razpolago tri lastnosti elementa table. Z lastnostjo border nastavimo debelino zunanjega roba tabele (robovi posameznih celic imajo vedno debelino 1), z lastnostjo frame določimo, katere dele zunanjega roba želimo imeti. Možne vrednosti so void (nobenega), above (zgornjega), below (spodnjega), hsides (zgornjega in spodnjega), vsides (levega in desnega), lhs (levega), rhs (desnega), box (vse štiri) in border (vse štiri). Z lastnostjo rules določimo, med katerimi celicami želimo imeti robove, njene vrednosti pa so none (nikjer), groups (med skupinami), rows (med vrsticami), cols (med stolpci) ali all (med vsemi celicami).
V primeru, da je celica prazna, brskalnik njenih robov ne bo narisal, če pa 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 brskalniki obravnavajo kot prazne). Najbolje je v celico zapisati trdi presledek.
Kot smo že omenili, tudi stolpce tabele združujemo v skupine. Temu je namenjen element colgroup. Če ga ne navedemo, se predpostavlja, da so vsi stolpci v eni sami skupini.
Stolpce v skupini lahko naštejemo z uporabo elementov col, ali pa samo določimo njihovo število z lastnostjo span elementa colgroup. Vse druge lastnosti tega elementa (width, align, valign) se nanašajo na posamezne stolpce znotraj skupine. Tudi stolpcu (elementu col) lahko predpišemo vse te lastnosti. Lastnost span v tem primeru določa, koliko stolpcev ima enake lastnosti (poleg njih so v skupini lahko še drugi stolpci).
V spodnjem primeru imamo štiri skupine stolpcev. V prvi skupini so trije stolpci širine 100, prvi je poravnan sredinsko. V drugi skupini so štirje sredinsko poravnani stolpci širine 60, v tretji in četrti skupini pa po en sredinsko poravnan stolpec širine 80.
<table cellspacing="0" frame="box" rules="groups"> <caption> <i>Rezultati kolokvijev</i> </caption> <colgroup width="100"> <col align="center" /> <col span="2" /> </colgroup> <colgroup span="4" width="60" align="center"></colgroup> <colgroup width="80" align="center"></colgroup> <colgroup width="80" align="center"></colgroup> <thead> <tr> <th colspan="3"> Študent </th> <th colspan="4"> Kolokviji </th> <th rowspan="2"> Točke </th> <th rowspan="2"> Ocena </th> </tr> <tr> <th> Številka </th><th align="left"> Priimek </th><th align="left"> Ime </th> <th> 1. </th><th> 2. </th><th> 3. </th><th> 4. </th> </tr> </thead> <tfoot> <tr> <td> </td><td> </td><td> Max. </td> <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td> <td> 400 </td><td> <b>10</b> </td> </tr> </tfoot> <tbody> <tr> <td> 15627384 </td><td> Dolinar </td><td> Jaka </td> <td> 56 </td><td> 73 </td><td> 49 </td><td> 82 </td> <td> 260 </td><td> <b>7</b> </td> </tr> <tr> <td> 71254262 </td><td> Dolinšek </td><td> Maja </td> <td> 83 </td><td> 95 </td><td> 92 </td><td> 87</td> <td> 357 </td><td> <b>9</b> </td> </tr> <tr> <td> 65376253 </td><td> Dolenc </td><td> Janez </td> <td> 15 </td><td> 32 </td><td> 22 </td><td> 47 </td> <td> 116 </td><td> <b>neg.</b> </td> </tr> <tr> <td> 18464674 </td><td> Hribar </td><td> Mojca </td> <td> 73 </td><td> 77 </td><td> 84 </td><td> 67 </td> <td> 301 </td><td> <b>8</b> </td> </tr> </tbody> </table>
Več sosednjih celic lahko združimo v večjo celico, pri tem pa se nova celica lahko razteza čez več vrstic ali stolpcev. Celici z lastnostjo colspan določimo, čez koliko stolpev naj sega (seveda moramo v tisti vrstici ustrezno zmanjšati število celic), z lastnostjo rowspan pa, čez koliko vrstic naj sega (v tem primeru moramo paziti, da v naslednjih vrsticah zmanjšamo število celic - pri naštevanju celic v vrstici preskočimo stolpec, ki ga zaseda celica iz prejšnje vrstice).
<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> </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, slika, seznam ali pa celo druga tabela. Zato tabele velikokrat nastopajo kot elementi za razporejanje drugih elementov (besedila, slik, tabel, seznamov ...) na spletni strani. S tem pa ni priporočljivo pretiravati, saj lahko koda HTML postane zelo nepregledna (pogosto najdemo primere gnezdenja tabel do nivoja pet ali celo več).
<table width="100%"> <col span="2" width="50%" /> <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="1" width="100%" cellspacing="0"> <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 align="center"> <img src="smesko.png" alt="Smeško" /> </td> <td> <ol> <li> analiza </li> <li> algebra </li> <li> računalništvo </li> <li> topologija </li> <li> verjetnost </li> </ol> </td> </tr> </table>
Uvod
