Pentru a crea tabele în paginile web se folosește tagul <table> ... </table>, acesta delimitează tabelul, iar pentru a determina componentele lui se utilizează în cadrul lui alte patru sub-elemente.
- tagul <tr> ... </tr> - linia (rândul) tabelului
- tagul <td> ... </td> - coloanele tabelului (datele)
- tagul <th> ... </th> - titlul tabelului
- tagul <caption> ... </caption> - sub-titlu tabelului
Linia tabelului conține, de obicei, tagul pentru titlurile tabelului și tagul pentru coloanele tabelului.
De asemenea, în cadrul tagurilor se pot adăuga și alte taguri HTML, cum ar fi cele pentru formatul textului, paragrafe, link-uri sau imagini. Indicat pentru formatarea textului și a paragrafelor să se utilizeze coduri css.
EXEMPLU de cod pentru crearea unui tabel
<!doctype html5>
<html>
<head><title>Tabele</title></head>
<body>
<table border="3">
<tr> <th>titlu 1</th> <th>titlu 2</th> </tr>
<tr> <td>linia 2- coloana 1</td> <td>linia 2- coloana 2</td></tr>
<tr> <td>linia 3- coloana 1</td> <td>linia 3- coloana 2</td></tr>
<tr> <td>linia 4- coloana 1</td> <td>linia 4- coloana 2</td></tr>
</table>
</body>
</html>
Clik aici pt vizualizare exemplu
EXEMPLU de cod pentru crearea unui tabel
<!doctype html5>
<html>
<head><title>Tabele</title></head>
<body>
<table border="3" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr> <th>titlu 1</th> <th>titlu 2</th></tr>
<tr> <td colspan="2">linia 2- coloana 1</td></tr>
<tr><td rowspan="2">linia 3- coloana 1</td> <td>linia 3- coloana 2</td></tr>
<tr> <td bgcolor="#adadff">linia 4- coloana 2 - colorat</td></tr>
</table>
</body>
</html>
Clik aici pt vizualizare exemplu