Les tableaux sont créés en utilisant l'élément table (table = tableau, en anglais). Chaque ligne du tableau est délimitée par les balises <tr></tr>
(tr = « table row » = ligne du tableau). Dans chaque ligne, chaque élément est situé entre les balises <td></td> (td = « table data » = donnée dans le
tableau).
Il est possible d'ajouter des titres de lignes ou de colonnes en utilisant les balises <th></th> (th = « table heading » = titre dans le tableau).
En outre, on peut ajouter un titre global au tableau en insérant les balises <caption></caption> directement après la balise d'ouverture <table>.
Un exemple va clarifier ces notions. Voici côté à côté le code pour un tableau et le résultat que ce code va générer :
<table>
<caption>Numéros de téléphone</caption>
<tr> <th>Prénom</th> <th>Nom</th> <th>Téléphone</th> </tr>
<tr> <td>John</td> <td>Doe</td> <td>123-4567</td> </tr>
<tr> <td>Machin</td> <td>Chose</td> <td>890-1234</td> </tr>
<tr> <td>What</td> <td>Hisname</td> <td>567-8901</td> </tr>
</table>
| Prénom | Nom | Téléphone |
|---|---|---|
| John | Doe | 123-4567 |
| Machin | Chose | 890-1234 |
| What | Hisname | 567-8901 |
La disposition et le formatage par défaut ne sont pas très attrayants, mais c'est le CSS (vu plus tard) qui va nous permettre de remédier à ceci.
Il est possible de fusionner plusieurs cellules voisines d'une même ligne pour obtenir une cellule de largeur supérieure à une colonne. Ceci se fait en utilisant l'attribut colspan des éléments
td ou th :
<table>
<caption>Numéros de tétéphone</caption>
<tr> <th colspan="2">Nom complet</th> <th>Téléphone</th> </tr>
<tr> <td>John</td> <td>Doe</td> <td>123-4567</td> </tr>
<tr> <td>Machin</td> <td>Chose</td> <td>890-1234</td> </tr>
<tr> <td>What</td> <td>Hisname</td> <td>567-8901</td> </tr>
</table>
| Nom complet | Téléphone | |
|---|---|---|
| John | Doe | 123-4567 |
| Machin | Chose | 890-1234 |
| What | Hisname | 567-8901 |
De façon similaire, il est possible de fusionner plusieurs cellules voisines d'une même colonne pour obtenir une cellule qui a une hauteur supérieure à une ligne. Ceci se fait en utilisant l'attribut
rowspan de td ou th.
Pour les grands tableaux, il peut être utile de décomposer le tableau en un en-tête, un pied et un ou des corps de tableau. Cela se fait avec les balises <thead></thead>
(thead = « table header » = en-tête de tableau), <tfoot></tfoot> (tfooot = « table footer » = pied de tableau) et <tbody>
</tbody> (tbody = « table body » = corps de tableau) :
<table>
<caption>Numéros de téléphone</caption>
<thead>
<tr> <th>Prénom</th> <th>Nom</th> <th>Téléphone</th> </tr>
</thead>
<tbody>
<tr> <td>John</td> <td>Doe</td> <td>123-4567</td> </tr>
<tr> <td>Machin</td> <td>Chose</td> <td>890-1234</td> </tr>
<tr> <td>What</td> <td>Hisname</td> <td>567-8901</td> </tr>
</tbody>
</table>
Bien que l'information supplémentaire puisse aider le navigateur pour l'affichage de grands tableaux, ces balises ne changent pas la disposition ou le formatage par défaut pour des tableaux de petite taille. Néanmoins, elles peuvent avoir une utilité car elles enrichissent le contenu de la page sur le plan sémantique. De plus, elles permettent d'avoir un formatage différent pour les en-têtes et pieds de tableau avec le CSS.
Recopiez le premier tableau dans simulateur HTML. Ajoutez des lignes et des colonnes. Pratiquez-vous à fusionner des cellules.