logo oujood
🔍

 Balise HTML <table> : structurer des données en tableau

OUJOOD.COM

La balise <table> en HTML

LES BALISES HTML

La balise <table> sert à afficher des données organisées : tarifs, comparatifs, horaires, résultats. Elle ne s'utilise pas seule — elle fonctionne toujours avec un ensemble de balises qui définissent sa structure interne. Avant de créer votre premier tableau, il est utile de comprendre comment ces balises s'imbriquent.

Balise <table> : rôle et fonctionnement

La balise <table> est une balise de bloc qui délimite un tableau de données. La balise de fermeture </table> est obligatoire.

À l'intérieur, le contenu s'organise en lignes (<tr>) et en cellules (<td> pour les données, <th> pour les en-têtes). D'autres balises découpent le tableau en zones sémantiques. Voici l'ordre logique d'imbrication :

  • <table> — conteneur principal
  • <caption> — titre du tableau (optionnel)
  • <thead> — groupe d'en-têtes
  • <tr> — ligne d'en-tête
  • <th> — cellule d'en-tête
  • <tbody> — corps du tableau
  • <tr> — ligne de données
  • <td> — cellule de données
  • <tfoot> — pied de tableau
  • <tr> + <td> — ligne de synthèse ou totaux

Séparer <thead>, <tbody> et <tfoot> n'est pas une obligation technique — mais cette structure sémantique aide les moteurs de recherche à comprendre le rôle de chaque partie, et améliore la lecture pour les technologies d'assistance.

Voici un exemple complet qui illustre cette structure :

  📋 Copier le code

<table cellspacing="3" cellpadding="2" border="1">
  <caption>Exemple de tableau complet</caption>
  <thead>
    <tr>
      <th>Produit</th>
      <th>Quantité</th>
      <th>Prix unitaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Clavier</td>
      <td>2</td>
      <td>45 €</td>
    </tr>
    <tr>
      <td>Souris</td>
      <td>3</td>
      <td>20 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td> <!-- colspan fusionne 2 cellules sur la même ligne -->
      <td>150 €</td>
    </tr>
  </tfoot>
</table>

Les attributs de la balise <table>

La colonne DTD indique dans quelle version HTML 4.01/XHTML 1.0 l'attribut est autorisé : S = Strict, T = Transitional, F = Frameset.

cellpadding gère l'espace entre le texte d'une cellule et ses bordures — l'équivalent du padding CSS. cellspacing contrôle l'espace entre les cellules elles-mêmes, ce que CSS appelle border-spacing. Ces deux attributs restent fonctionnels, mais en HTML5 le CSS est préférable pour un meilleur contrôle.

Les attributs optionnels

Attribut Valeur Description DTD
align left
center
right		 Obsolète. Utilisez CSS à la place (margin: auto pour centrer). Définissait l'alignement du tableau par rapport au texte environnant. TF
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Obsolète. Utilisez CSS à la place (background-color). Définissait la couleur de fond du tableau. TF
border pixels Épaisseur des bordures extérieures du tableau en pixels. La valeur 0 supprime les bordures. STF
cellpadding pixels Espace entre le contenu d'une cellule et sa bordure. Équivaut au padding CSS. STF
cellspacing pixels Espace entre deux cellules adjacentes. Équivaut à border-spacing en CSS. STF
frame void
above
below
hsides
lhs
rhs
vsides
box
border		 Contrôle quelles bordures extérieures du tableau sont visibles. Par exemple, hsides affiche seulement les bordures haute et basse. STF
rules none
groups
rows
cols
all		 Définit quelles bordures intérieures (entre les cellules) sont visibles. all affiche toutes les séparations. STF
summary texte Description textuelle du tableau destinée aux technologies d'assistance. Non visible à l'écran. STF
width pixels
%		 Largeur du tableau. Préférez le CSS (width) pour un contrôle précis sur tous les supports. STF

    Vous êtes ici : Balise TABLE     Retour à la liste des balises HTML




Retour à l'accueil du site

Par carabde | Mis à jour le 15 mai 2026