Tableaux

Les tableaux en HTML permettent de structurer des données tabulaires, et non de disposer du contenu (comme c'était le cas à une époque non flex).

Balises

Le tableau est défini par la balise table
Il contient des lignes (ou rangées) tr
qui contiennent des cellules td
Facultativement un en-tête, défini par th sur la première ligne, en lieu et place des td.

Structure

<table border="1">
  <tr>
    <th>&nbsp;</th>
    <th>Knocky</th>
    <th>Flor</th>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <td>Race</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
</table>

L'attribut border est déprécié et n'est présent ici que pour voir les bordures du tableau sans CSS associé

Zones

Il est possible de structurer un tableau en ajoutant un header (thead), un body (tbody) et un footer (tfoot) :

<table>
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Version texte</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Un</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Deux</td>
        </tr>            
    </tbody>
    <tfoot>
        <tr>
            <td>3</td>
            <td>Trois</td>
        </tr>    
    </tfoot>
</table>

Fusion de cellules

En largeur

L'attribut colspan permet de fusionner des cellules en largeur :

<table border="1" width="100%">
  <tr>
    <td>Une cellule</td>
    <td>Une cellule</td>
    <td>Une cellule</td>
  </tr>
  <tr>
    <td colspan="2">Une cellule sur deux colonnes</td>
    <td>Une cellule</td>
  </tr>
</table>

En hauteur

L'attribut rowspan permet de fusionner des cellules en hauteur :

<table border="1">
    <tr>
        <td>Une cellule</td>
        <td rowspan="2">Une cellule sur deux lignes</td>
        <td>Une cellule</td>
    </tr>
    <tr>
        <td>Une cellule</td>
        <td>Une cellule</td>
    </tr>
</table>