Postoji više tipova podataka koje je lakše predstaviti u tabelarnom prikazu nego samim tekstom. Sportske rezultate, finansijske izveštaje, rasporede časova i mnoge druge informacije na sajtovima najlakše je prikazati u tabeli.
Tabele treba koristiti za tabelarno strukturiranje podataka, a nikako zloupotrebiti za raspoređivanje elemenata, bilo da je reč o čitavoj strani ili njenom delu.
Pošto već dobro znamo da je svaki deo HTML stranice u suštini tekst strukturiran na određeni način, tako i tabele prate striktna pravila.
Tabele u HTML jezik sačinjene su od ćelija koje označavamo sa td (table data) i redova koje označavamo sa tr (table row), a sve je smešteno unutar table taga koji okružuje sve.
Ukoliko ste navikli na rad u MS Excel ili sličnom alatu, možda ćete se pitati gde su kolone i kako se one označavaju. Ipak, u HTML jeziku ne postoji termin kolona, već se sve ćelije (td) ređaju redom i odvajaju u redove (tr). Pogledajmo sliku kako bismo razjasnili.
Ovo je prikaz jedne tabele sa tri reda i četiri kolone, što ukupno daje 12 ćelija. Na slici je označeno i kojim redosledom se postavljaju ćelije. U HTML jeziku kod pisanja tabela činimo sledeće korake:
- Otvaramo table tag
- Otvaramo red tabele (tr)
- Pišemo sve ćelije (td) – u ovom slučaju četiri
- Zatvaramo trenutni red (tr)
- Otvaramo sledeći red (tr)
- Pišemo sve ćelije (td)
I tako dalje dok ne prođemo sve redove i dođemo do kraja tabele gde zatvaramo table tag.
Ovakva tabela bi u kôdu izgledala ovako:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
Ako bismo analizirali prethodni kôd, primećujemo korake koji su navedeni iznad. Otvorili smo prvo table tag i odmah za njim red tabele (tr tag). Unutar njega su same ćelije u svojim tagovima (td). Potom se zatvara prvi red i počinje sledeći. Nakon njega je postavljen i treći red, za kojim ide kraj tabele. Ukoliko se desi da je potrebno neku ćeliju ostaviti praznu (nema sadržaja), ipak moramo pisati td tag.
Ovakva tabela, odnosno kôd bi kreirao vrlo jednostavnu tabelu, bez ikakvih vizuelnih detalja, čak se sama tabela ne bi ni videla, već samo elementi u njoj. Zbog toga, možemo dodavati razne atribute nad table tagom kojim definišemo različite aspekte tabele. Pored toga, i tabele i njeni elementi mogu se stilizovati CSS jezikom što je svakako mnogo bolja varijanta.
Iako su prevaziđeni u korist CSS-a, atributi koje možemo postaviti nad tabelom su:
| Atribut | Vrednost | Opis |
| align | left center right |
Poravnanje tabele |
| bgcolor | rgb(x,x,x) #xxxxxx ime boje |
Boja pozadine |
| border | pikseli | Debljina border linije |
| cellpadding | pikseli | Prostor između sadržaja ćelija i ivica ćelija |
| cellspacing | pikseli | Prostor između ćelija |
| frame | viod above below hsides lhsrhs vsides box border |
Definiše koje spoljne ivice su vidljivi |
| rules | none groups rows cols all |
Definiše kojie unutrašnje ivice su vidljive |
| summary | tekst | Tekst koji opisuje, sumira sadržaj tabele |
| width | pikseli % |
Širina tabele |
Ćelije naslovi
Kao što pored p tagova za paragrafe postoje i h tagovi za naslove, analogno tome, pored „običnih“ ćelija postoje i ćelije za naslove. Njih označavamo umesto td, oznakom taga th (table heading).
Pogledajmo na primeru:
<table width=”600” border=”1”>
<tr>
<th>*</th>
<th>ponedeljak</th>
<th>utorak</th>
<th>sreda</th>
<th>četvrtak</th>
<th>petak</th>
</tr>
<tr>
<th>prepodne</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>popodne</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Th ćelije su postavljene u prvom redu i u prvoj koloni. Obratite pažnju na to da su nad table tagom dodati atributi za širinu (600px) i debljinu border linija (1px). U browseru bi to izgledalo ovako:
Atributi TD
Horizontalno spajanje
Ukoliko je potrebno da spojimo određene ćelije tabela horizontalno, postavićemo nad prvom koja treba biti spojena atribut colspan u kome definišemo nad koliko ćelija je potrebno da se prostire.
Zamislite da ćelije uvek ostaju svaka posebno, a da spojena ćelija ide preko nekoliko od njih. Zato je potrebno da izbrojimo koliko ćelija će pokriti i to unosimo kao atribut colspan. Pored toga, izbacujemo td (ili th) atribute koji su višak.
Pogledajmo na primeru, ovaj kôd:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
će dati ovakvu sličnu tabelu:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
Ali ukoliko želimo da spojimo ćelije 4 i 5, moramo dodati colspan atribut sa vrednošću 2 (jer spajamo dve ćelije) i pritom moramo ukloniti ceo td tag ćelije 5. Kôd bi izgledao ovako:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan=”2”>4</td>
<td>6</td>
</tr>
</table>
| 1 | 2 | 3 |
| 4 | 6 | |
Ovime smo definisali da ćelija 4 pokrije i ćeliju 5 i praktično se vodi kao dva td taga. Svaki red određene tabele (tr) mora imati istovetan broj td (ili th) tagova, osim kada se koristi colspan, ali opet, zbir mora biti tačan. Sadržaj td taga koji nestaje mora se ručno preneti u druge tagove.
Vertikalno spajanje
Ukoliko želimo da spojimo ćelije vertikalno, koristimo vrlo sličnu tehniku kao kod horizontalnog spajanja, s tim što je atribut sada rowspan umesto colspan.
Pogledajmo primer:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Prikazuje tabelu:
| 1 | 2 | 3 |
| 4 | 5 | 6 |
Ukoliko promenimo ovako kôd:
<table>
<tr>
<td rowspan=”2”>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
Dobićemo tabelu:
| 1 | 2 | 3 |
| 5 | 6 |
Najčešći atributi nad ćelijama
Najčešći atributi koji se pojavljuju nad ćelijama su align, odnosno valign. Pomoću njih možemo postaviti horizontalno (align), odnosno vertikalno poravnanje (valign). Možemo na primer postaviti:
…
<tr>
<td align=”left” valign=”top”></td>
…
Align može imati vrednosti left, right i center. Kao što i sami nazivi vrednosti kažu, poravnava sadržaj levo, desno ili po sredini ćelije.
Valign može imati vrednosti top, middle, bottom i baseline. Sami nazivi govore o tome šta će se desiti sa sadržajem. Top postavlja u gornjem delu ćelije, middle u sredini, dok bottom i baseline imaju donekle sličnu namenu. U čemu je razlika? Bottom postavlja sav sadržaj u dnu ćelije, dok baseline postavlja istu zamišljenu osnovnu liniju i na njoj leži sadržaj. Baseline može biti koristan ako imamo više ćelija sa različitim veličinama fonta. Pogledajmo na slici:
Bottom vrednost valign atributa
Baseline vrednost valign atributa