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.
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
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.
Izgled HTML tablice je opisan 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:
| Naziv 1 | Naziv 2 |
|---|---|
| Ćelija 1 u 1. retku | Ćelija 2 u 1. retku |
| Ćelija 3 u 2. retku | Ćelija 4 u 2. retku |
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;">
<colgroup>
<col style="width:40%;" />
<col style="width:30%;" />
<col style="width:30%;" />
</colgroup>
<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:
| Stupac 1 | Stupac 2 | Stupac 3 |
|---|---|---|
| Ćelija 1 u 1. retku | Ćelija 2 u 1. retku | Ćelija 3 u 1. retku |
| Ćelija 4 u 2. retku | Ćelija 5 u 2. retku | Ćelija 6 u 2. retku |
U gornjem primjeru ukupna širina tablice će biti 80% širine roditeljskog elementa i obrubljena je s zadanim obrubom (1px solid black).
Prvi stupac zauzima 40%, drugi stupac 30%, a treći stupac 30% od ukupne širine tablice.
Želimo li prikazati rubove tablice koristimo css svojstvo border i dodjeljujemo mu vrijednost debljine, vrste i boje 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, za jednostavnije primjere je to najčešće <body> element.
Css 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 unutar html elementa <td>. 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 style="border:1px solid black;">
<tr>
<td rowspan="3" style="width: 250px; border:1px solid black;">Prvi stupac</td>
<td style="width: 250px;">Prvi redak</td>
</tr>
<tr>
<td>Drugi redak</td>
</tr>
<tr>
<td>Treći redak</td>
</tr>
</table>Izgled ovog primjera na web stranici:
| Prvi stupac | Prvi redak |
| Drugi redak | |
| Treći redak |
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 style="width: 80%; border:1px solid black;">
<tr>
<td colspan="3" style="border:1px solid black;">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:
| Prvi redak | ||
| Prvi stupac | Drugi stupac | Treći stupac |
Ć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.