Tablice se koriste za prikazivanje podataka u stupcima.
Tablice se više ne koriste za izradu strukture web stranice jer je tu zadaću preuzeo css.
HTML tablica je upisana između početne i završne oznake <table> elementa. Tablica može imati željeni broj redaka a svaki redak upisujemo između početne i završne oznake <tr> elementa.
Svaki redak ima jednaki broj ćelija koje omeđujemo oznakom elementa <td>...</td>.
Označavanje početka i kraja tablice: <table> ... </table>
Početak i kraj dijela gdje se nalazi zaglavlje stupaca: <thead> ... </thead>
Početak i kraj zaglavlja stupaca: <th> ... </th>
Početak i kraj tijela stranice unutar kojeg se nalazi podatci: <tbody> ... </tbody>
Početak i kraj retka tablice: <tr> ... </tr>
Početak i kraj ćelije s podatcima: <td> ... </td>
Primjer tablice u HTML-u:
<table>
<thead>
<tr>
<th>Naziv 1 </th>
<th>Naziv 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Ćelija 1 u 1. retku </td>
<td>Ćelija 2 u 1. retku </td>
</tr>
<tr>
<td>Ćelija 3 u 2. retku </td>
<td>Ćelija 4 u 2. retku </td>
</tr>
</tbody>
</table>Izgled gornjeg primjera na web stranici:
Korištenjem praznog elementa <col /> moguće je postaviti svojstva za pojedini stupac tablice.
Ove elemente umećemo iza elementa <table> a prije elementa <thead>
Najkorisnija uloga <col /> elementa je postavljanje širine stupaca.
Gornji primjer možemo preinačiti korištenjem <col /> elementa:
<table style="width:80%; border:1px solid black;">
<col style="width:40%;" />
<col style="width:30%;" />
<col style="width:30%;" />
<thead>
<tr>
<th>Stupac 1 </th>
<th>Stupac 2 </th>
<th>Stupac 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td>Ćelija 1 u 1. retku </td>
<td>Ćelija 2 u 1. retku </td>
<td>Ćelija 3 u 1. retku </td>
</tr>
<tr>
<td>Ćelija 1 u 2. retku </td>
<td>Ćelija 2 u 2. retku </td>
<td>Ćelija 3 u 2. retku </td>
</tr>
</tbody>
</table>Izgled ovog primjera na web stranici:
U gornjem primjeru ukupna širina tablice će biti 80% širine roditeljskog elementa i obrubljena je s zadanim obrubom (1px solid black).
Prvi stupac ima 40%, drugi stupac 30% a treći stupac 30% od ukupne širine tablice.
Želimo li prikazati rubove tablice koristimo svojstvo border i dodjeljujemo mu vrijednost debljine crte ruba tablice. Ako svojstvo border nije definirano rubovi tablice ne će biti prikazani.
Zadano tablica zauzima prostor koji je dostatan kako bi bio prikazan sadržaj svih stupaca tablice.
U slučaju da je širina sadržaja manja od roditeljskog elementa i želimo je povećati moramo koristiti svojstvo width.
Roditeljski element je element u kojem je definirana tablica, najčešće je to <body> element koji zauzima cijeli prozor web preglednika).
Svojstvo width može biti izraženo kao apsolutna vrijednost u pikselima ili kao relativna vrijednost u postotcima u odnosu na roditeljski element.
Kada želimo protegnuti stupac kroz više redaka koristimo svojstvo rowspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj redaka kroz koja se proteže stupac.
Primjer stupca koji se proteže kroz 3 retka:
<table border="1">
<tr>
<td rowspan="3" width="160">Prvi stupac</td>
<td width="160">Prvi redak</td>
</tr>
<tr>
<td>Drugi redak</td>
</tr>
<tr>
<td>Treći redak</td>
</tr>
</table>Izgled ovog primjera na web stranici:
Kada želimo protegnuti redak kroz više stupaca koristimo svojstvo colspan <td> elementa. Dodjeljujemo mu vrijednost u kojoj određujemo broj stupaca kroz koja se proteže redak.
Primjer retka koji se proteže kroz 3 stupca:
<table border="1">
<tr>
<td colspan="3" width="320">Prvi redak</td>
</tr>
<tr>
<td>Prvi stupac</td>
<td>Drugi stupac</td>
<td>Treći stupac</td>
</tr>
</table>Izgled ovog primjera na web stranici:
Ćelije bez sadržaja mogu biti netočno prikazane u nekim web preglednicima. Kako bi to izbjegli potrebno je umetnuti jedan prazan znak (engl. non-break spacing): unutar prazne ćelije.