naslovna
programiranje
HTML
CSS
PHP
MySQL
jQuery
Osnove
Struktura
Reference

Za izradu tablice koristi se element <table>. Sadržaj u tablici ispisuje se red po red. Svaki red definiran je elementom <tr>. TR označavaredak tablice (eng. table row). Svaka ćelija u retku definira se elementom <td>. TD označava sadržaj ćelije (eng. table data). Neki preglednici automatski prikazuju i linije oko tablice, dok drugi ne.

Primjer

<table>
    <tr>
        <td>Uvod u HTML</td>
        <td>12</td>
    </tr>
    <tr>
        <td>Uvod u PHP i MySQL</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Uvod u SQL</td>
        <td>20</td>
    </tr>
</table>

 

 

 

Elementi <th>, <thead>, <tbody> i <tfoot> koriste se kako bi se olakšao prikaz sadržaja korisnicima koji upotrebljavaju čitače za pregledavanje web-stranica, kako bi se poboljšalo indeksiranje stranica od strane tražilica, a također olakšavaju kontrolu nad izgledom tablice kada se koristi CSS.
Korištenjem elementa <th> tablicama je moguće dodati i naslovni redak. TH označava naslov retka ili stupca (eng. table heading).

Preglednici obično prikazuju ovaj element podebljano i centrirano u ćeliji pa je već i na prvi pogled vidljiva njegova svrha.


Primjer:

<table>
    <tr>
        <th>Naziv tečaja</th>
        <th>Trajanje</th>
    </tr>
    <tr>
        <td>Uvod u HTML</td>
        <td>12</td>
    </tr>
    <tr>
        <td>Uvod u PHP i MySQL</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Uvod u SQL</td>
        <td>20</td>
    </tr>
</table>

 

 

 

Element <thead> označava zaglavlje tablice (eng. table head), element <tbody> sadržaj tablice (engl. table body), a element <tfoot> rugačiji način od ostalih elemenata tablice, ali se koriste prilikom definiranja dizajna tablice.

Primjer:

<table>
    <thead>
        <tr>
            <th>Naziv tečaja</th>
            <th>Trajanje</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Uvod u HTML</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Uvod u PHP i MySQL</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Uvod u SQL</td>
            <td>20</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Ukupno trajanje svih tečajeva:</td>
            <td>57</td>
        </tr>
    </tfoot>
</table>

Ponekad je potrebno spojiti ćelije u recima ili u stupcima kako bi se proširio prostor za sadržaj, ili kako bi se uredila hijerarhijska struktura tablice.

 

To se može postići korištenjem atributa colspan za spajanje više ćelija u retku ili rowspan za spajanje više ćelija u stupcu. Ovi se atributi mogu dodati elementima <th> i <td>.


Colspan i rowspan su atributi kojima se dodjeljuje broj ćelija koje se želi spojiti u jednu.

Važno je voditi računa o tome da će neke ćelije na  ovaj način "nestati" iz koda. Npr., ako redak ima tri ćelije, u kodu se nalaze tri elementa <td>. Ako se dvije ćelije spoje u jednu, u retku će ostati dvije ćelije (jedna duža i jedna kraća), pa će shodno tome u kodu biti i dva <td> elementa, a ne više tri.

 

Primjer:

<table>
    <thead>
        <th></th>
        <th colspan="2">Ime tablice kroz dva
        stupca</th>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Stupac 1</td>
            <td>Redak 1</td>
            <td rowspan="2">Stupac 2</td>
        </tr>
        <tr>
            <td>Redak 2</td>
        </tr>
        <tr>
            <td colspan="3">Redak po cijeloj dužini tablice</td>
        </tr>
        <tr>
            <td>Ćelija u stupcu 1</td>
            <td>Ćelija u stupcu 2</td>
            <td>Ćelija u stupcu 2</td>
        </tr>
    </tbody>
</table>

 

 

 

Tablice mogu imati i nazive (eng. caption), baš kao i slike.

Za dodavanje naslova koristi se element <caption> koji će se smjestiti iznad tablice, a u kodu se dodaje iznad prvog <tr> elementa.

Do sada se u primjerima kao naslov tablice koristio <h1> ili <h2>, standardni element koji se koristi za naslove svojega sadržaja u HTMLu, a sada će biti prikazan primjer s elementom <caption>.

 

<table>
    <caption>Trajanje tečajeva</caption>
    <tr>
        <th>Naziv tečaja</th>
        <th>Trajanje tečaja</th>
    </tr>
    <tr>
        <td>Uvod u HTML</td>
        <td>12</td>
    </tr>
    <tr>
        <td>Uvod u PHP i MySQL</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Uvod u SQL</td>
        <td>20</td>
    </tr>
</table>