Cours 1.10. Les tableaux en HTML

Syntaxe

Les tableaux restent un moyen incontournable de structurer des données en lignes / colonnes. Un tableau se décrit en HTML à l'aide des balises suivantes :

<table> : début d'un tableau
</table> : fin d'un tableau
<tr> : début d'une ligne (Table Row)
</tr> : fin d'une ligne
<td> : début d'une cellule (Table Division)
</td> : fin d'une cellule

On rencontre classiquement des tableaux structurés (en-tête et corps) à l'aide des balises suivantes :

<thead>: début de l'en-tête (Table Head)
</thead>: fin de l'en-tête
<tbody>: début du corps du tableau (Table Body)
</tbody>: fin du corps du tableau
<th>: début d'une cellule d'en-tête (ou d'un groupe de cellules)
</th>: fin d'une cellule d'en-tête

Voici un exemple de tableau :

<table border="1">

  <!-- en-tête -->
  <thead>
    <tr>
      <th>NOM</th>
      <th>NOTE</th>
    </tr>
  </thead>

  <!-- Corps du tableau -->
  <tbody>
    <tr>
      <th>Pierre</th>
      <td>16</td>
    </tr>
    <tr>
      <th>Paul</th>
      <td>14</td>
    </tr>
    <tr>
      <th>Jacques</th>
      <td>18</td>
    </tr>
  </tbody>

</table>

L'exemple précédent affiche le tableau ci-dessous :

Tester l'exemple en ligne

Mise en forme des tableaux

Il est parfois nécessaire d'avoir une ligne à cheval sur plusieurs colonnes, ou l'inverse. Les balises <td> acceptent deux attributs rowspan="" et colspan="" qui spécifient respectivement le nombre de lignes et de colonnes sur lesquels s'étalera la celulle. Voici un exemple :

<table border="1">

  <tr>
    <td colspan=2>Ingredients</td>
  </tr>

  <tr>
    <td rowspan=3>Gateau</td>
    <td>Pate</td>
  </tr>

  <tr>
    <td>Creme</td>
  </tr>

  <tr>
    <td>Fraise</td>
  </tr>

</table>

L'exemple précédent affiche le tableau ci-dessous :

Tester l'exemple en ligne

Exercice

Créez un tableau permettant d'afficher la liste des ingrédients de l'île flottante. Le tableau doit s'afficher selon la disposition suivante :

Faire l'exercice en ligne

Solution

Cours 1.9 Sommaire Cours 1.11

Voir aussi

Dernière mise à jour : 24/05/2021