Tableaux en HTML

🧮 Le cours : présenter des données

Le tableau est l'outil pour présenter des données à deux dimensions : résultats, horaires, comparatifs. Il ne doit jamais servir à mettre en page un site (placer le menu à gauche, le texte à droite) : c'est le rôle du CSS (voir Flexbox). Un tableau HTML est l'affichage d'un tableau à deux dimensions, comme ceux de Tableaux 2D : des lignes, et dans chaque ligne, des cellules.

Anatomie d'un tableau

table
├── caption                 titre du tableau
├── thead
│   └── tr ── th, th, th    ligne des en-têtes de colonnes
├── tbody
│   ├── tr ── th, td, td    une ligne de données
│   └── tr ── th, td, td
└── tfoot
    └── tr ── …             ligne de totaux (facultative)

• On construit le tableau ligne par ligne : chaque <tr> contient des cellules, il n'y a pas de balise « colonne ».
• <th> est une cellule d'en-tête (en gras et centrée par défaut), <td> une cellule de données.
• <thead>, <tbody> et <tfoot> regroupent les lignes par rôle : utiles pour le CSS et l'impression.

Des tableaux accessibles

Un lecteur d'écran lit la cellule avec son en-tête (« NSI, Lina, 16 »). Pour cela, il doit savoir que <th> désigne une colonne ou une ligne : l'attribut scope vaut col (en-tête de colonne) ou row (en-tête de ligne). <caption> donne un titre au tableau, lu avant son contenu.

Fusionner des cellules

Quand une cellule en recouvre d'autres, on supprime les cellules recouvertes. Dans l'exemple du planning, « NSI » (rowspan="2") occupe déjà la colonne du lundi à 9h : la ligne de 9h ne contient donc que deux cellules (l'en-tête « 9h » et « Anglais ») au lieu de trois. Compte toujours les colonnes : chaque ligne doit totaliser le même nombre, fusions comprises.

Mettre en forme avec CSS

Les bordures, l'espacement et les couleurs se règlent en CSS (l'attribut border de HTML est obsolète). border-collapse: collapse fusionne les bordures voisines ; padding donne de l'air aux cellules ; tr:nth-child(even) colore une ligne sur deux.

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #94a3b8;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

tbody tr:nth-child(even) {
  background: #f1f5f9;
}

Aligne les nombres à droite (text-align: right) pour que les unités, dizaines et centaines tombent dans les mêmes colonnes.

Tableaux trop larges sur téléphone

Un tableau de nombreuses colonnes déborde d'un petit écran. Entoure-le d'un conteneur qui défile horizontalement plutôt que de laisser toute la page déborder.

<div class="table-wrap">
  <table>
    …
  </table>
</div>

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

⚠️ Erreurs fréquentes

Utiliser un tableau pour la mise en page

Les tableaux de mise en page (menu à gauche, contenu à droite) étaient courants dans les années 2000. Ils sont aujourd'hui à proscrire : ils sont lourds, ne s'adaptent pas aux téléphones et trompent les lecteurs d'écran. Utilise Flexbox ou Grid.

Lignes qui n'ont pas le même nombre de cellules

<table>
  <tr><th>Nom</th><th>NSI</th><th>Maths</th></tr>
  <tr><td>Lina</td><td>16</td></tr>   <!-- il manque une cellule -->
</table>

<table>
  <tr><th>Nom</th><th>NSI</th><th>Maths</th></tr>
  <tr><td>Lina</td><td>16</td><td>14</td></tr>
</table>

Oublier les cellules d'en-tête

Un tableau fait uniquement de <td> est une grille de nombres sans signification pour un lecteur d'écran. Les en-têtes en <th scope="…"> sont ce qui donne du sens à chaque donnée.

Une cellule en dehors d'une ligne

<td> doit toujours être dans un <tr>, lui-même dans un <table> (ou un <thead> / <tbody>). Écrire des <td> directement sous <table> donne un résultat imprévisible.

Se tromper dans les fusions

Après un rowspan, la ligne suivante a une cellule de moins ; après un colspan, la ligne a autant de cellules en moins que de colonnes recouvertes. Dessine la grille sur papier avant d'écrire le code.

Mettre en forme avec des attributs obsolètes

border="1", cellpadding, bgcolor, align sont dépréciés. Toute la présentation passe par une feuille de style.

📋 Aide-mémoire

• <table> > <tr> (ligne) > <th> (en-tête) ou <td> (donnée) ; <caption> en premier enfant.
• <thead>, <tbody>, <tfoot> regroupent les lignes par rôle.
• <th scope="col"> pour un en-tête de colonne, <th scope="row"> pour un en-tête de ligne.
• colspan="n" fusionne des colonnes, rowspan="n" des lignes : retire les cellules recouvertes.
• CSS : border-collapse: collapse, padding, tr:nth-child(even), text-align: right pour les nombres.
• Un tableau sert aux données, jamais à la mise en page ; un conteneur overflow-x: auto protège les petits écrans.