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>