HTML. Faire un tableau, les bonnes balises

Problématique

Faire un tableau en HTML ! Elémentaire me direz-vous : pas faux. Ringard dirons d’autres : pas faux, il faut mieux utiliser la balise <div> que la balise <table>. Très juste, je ne sais pas pourquoi mais c’est ce que tout le monde dit et on ne va pas se battre pour ça.

Mais c’est tout de même intéressant sous WordPress par exemple et c’est dans ce contexte que je vous en parle. Donc petite piqûre de rappel sur les balises pour tableau.

Solution

  1. on encadre le tableau par <table> et </table>
  2. chaque ligne du tableau (entête comprise) est encadrée par <tr> et </tr>
  3. si vous voulez une entête distincte du corps du tableau, chaque entête de colonne de la première ligne (premier <tr>… </tr>) devra être encadré par <th></th>. Ceci vous permet dans votre CSS de formater une entête selon vos goûts
  4. si vous avez défini une entête, les lignes suivantes (l’ensemble des <tr> … </tr> suivants) devra être encadrée par <tbody> et </tbody>
  5. et dans les lignes normales, les colonnes doivent être encadrées par <td> </td>

Exemple de syntaxe avec entête :

<table>

<tr>

<th>nom colonne1</th>

<th>nom colonne2</th>

</tr>

<tbody>

<tr>

<td>lig1 col1</td>

<td>lig1 col2</td>

</tr>

<tr>

<td>lig2 col1</td>

<td>lig2 col2</td>

</tr>

</tbody>

</table>

Exemple de syntaxe sans entête

<table>

<tr>

<td>nom colonne1</td>

<td>nom colonne2</td>

</tr>

<tr>

<td>lig1 col1</td>

<td>lig1 col2</td>

</tr>

<tr>

<td>lig2 col1</td>

<td>lig2 col2</td>

</tr>

</table>

ET LE TOUR EST JOUÉ ! ALORS ON DIT MERCI QUI ?