Cours CSS / tableaux : bordures, dimensions et table-layout

La disposition des tableaux CSS répartit l'espace des colonnes selon les règles de dimensionnement du tableau et le contenu. table-layout: auto prend en compte le contenu des cellules, tandis qu'une disposition fixe peut rendre le dimensionnement des colonnes plus prévisible lorsque le tableau a une largeur explicite.

Séparer la largeur du tableau et le remplissage des cellules

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

th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }

width: 100% indique au tableau de se dimensionner en fonction de la largeur de son parent. L'espace à l'intérieur de la cellule est défini par padding, et la bordure est définie par border. border-collapse: collapse est une méthode d'affichage des bordures des cellules adjacentes en les fusionnant. Définir la largeur du tableau et définir des sauts de ligne dans le contenu sont des opérations distinctes.

Un tableau avec width: 100% ne tient pas toujours dans son parent. Un contenu qui ne peut pas passer à la ligne ou une largeur minimale importante peut faire que le tableau réel ou le contenu de la cellule soit plus large. Dans les tableaux de données typiques, il est sûr de laisser les hauteurs des cellules grandir pour correspondre à la longueur des phrases. Si vous donnez une hauteur fixe, vous devez vérifier le troncage lors de l'agrandissement du texte ou de l'ajout de contenu.

Allouez les colonnes en fonction de leur contenu

<colgroup>
  <col style="width: 30%;">
  <col style="width: 70%;">
</colgroup>

L'exercice divise le nom court de l'article et la longue description en deux colonnes. Le ratio 30:70 réserve davantage d’espace à la description. Si les données réelles consistent en des dates, des prix, de longues descriptions, etc., répartissez-les selon le rôle de chaque colonne. Si le placement automatique par défaut est suffisamment lisible, il n'est pas nécessaire de forcer le ratio.

Lorsqu'on spécifie un pourcentage de l'ensemble de la colonne, comme montré ici, définissez la somme à 100 %. Ne considérez pas la déclaration de largeur du colgroup comme un résultat final qui s'applique dans toutes les circonstances. L'agencement automatique fonctionne de concert avec la taille minimale du contenu et les calculs du tableau. Veuillez vous référer à la description du colgroup dans MDN.

Comparez l'agencement automatique et fixe

La mise en page fixe du tableau nécessite une largeur de tableau spécifiée ; width: auto ne produit pas le calcul fixe prévu. Ici, les deux tableaux utilisent width: 100% et le même groupe de colonnes, ne différant que par table-layout. Si une cellule coupe le texte, vérifiez séparément ses règles de retour à la ligne et de points de suspension. Voir MDN : mise en page du tableau, overflow, retour à la ligne et points de suspension en CSS.

Les données ci-dessous contiennent de longs codes de réservation que nous voulons afficher sans sauts de ligne. L'exemple complet applique white-space: nowrap, overflow: hidden et text-overflow: ellipsis à cette cellule de manière identique dans les deux tableaux. Avec la disposition automatique, les valeurs longues peuvent élargir le tableau. Avec la disposition fixe, elles peuvent être tronquées à l’intérieur de la colonne prévue. Le texte original est fourni dans son intégralité dans un paragraphe séparé, afin que vous puissiez vérifier le code tronqué également.

Faites défiler la zone du tableau sur les écrans étroits

.table-scroll { overflow-x: auto; }

table { width: 100%; min-width: 32rem; }

Si votre taille de police racine est de 16px, alors 32rem correspondent à 512px. Si la largeur disponible à l'écran est inférieure à cela, le tableau conservera sa largeur minimale et seule la zone parente défilera horizontalement. Cela doit être distingué du défilement horizontal de toute la page. Les 32rem dans l'exercice servent uniquement à des fins de comparaison pour ces deux colonnes et ne sont pas destinés à être une largeur minimale pour tous les tableaux. Vérifiez si l'écran petit est coupé et peut être manipulé selon les éléments Vérifier le CSS adaptatif : largeur, zoom et clavier.

Si votre tableau est petit et encore lisible, vous pouvez réduire ou supprimer la largeur minimale. À l'inverse, compresser plusieurs colonnes et de longues valeurs peut les rendre difficiles à lire. Déterminez à partir des données réelles si les colonnes sémantiques peuvent être raccourcies, résolues par des sauts de ligne ou nécessitent un déplacement horizontal. Sur mobile, des instructions comme « Vous pouvez vous déplacer horizontalement » peuvent être utiles.

Le conteneur défilable a tabindex="0", role="region", un nom accessible descriptif et un contour de focus visible. Accédez-y avec Tab et utilisez les touches fléchées pour atteindre la dernière colonne. Un tableau qui n'a pas besoin de défilement n'a pas automatiquement besoin d'un arrêt de tabulation supplémentaire. Voir MDN : overflow.

Exécutez la comparaison complète du tableau

Enregistrez et ouvrez le code ci-dessous au format UTF-8 dans tables.html. Il utilise les mêmes trois lignes et le même ratio de colonnes 30:70, vous pouvez donc comparer les différences entre les mises en page. Le code de réservation est des données fictives pour la pratique de la mise en page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Table sizes and long content</title>
  <style>
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .table-scroll { max-width: 640px; overflow-x: auto; margin-block: 16px; }
    .table-scroll:focus-visible { outline: 3px solid #e58c1f; outline-offset: 3px; }
    table { width: 100%; min-width: 32rem; border-collapse: collapse; }
    th, td { padding: 12px; border: 1px solid #aaa; text-align: start; }
    .auto { table-layout: auto; }
    .fixed { table-layout: fixed; }
    .token { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .original { max-width: 640px; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Automatic and fixed table layout</h1>
  <h2>table-layout: auto</h2>
  <div class="table-scroll" role="region" aria-label="Auto Batch Comparison Table" tabindex="0"><table class="auto"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <h2>table-layout: fixed</h2>
  <div class="table-scroll" role="region" aria-label="Fixed batch comparison table" tabindex="0"><table class="fixed"><colgroup><col style="width: 30%;"><col style="width: 70%;"></colgroup><thead><tr><th scope="col">item</th><th scope="col">explanation</th></tr></thead><tbody><tr><th scope="row">What to bring</th><td>Bring a water bottle and comfortable shoes.</td></tr><tr><th scope="row">reservation code</th><td class="token">GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</td></tr><tr><th scope="row">Visitor Information</th><td>Even if long information sentences span multiple lines, the cell height is increased to match the content.</td></tr></tbody></table></div>
  <p class="original">Full reservation code: GARDEN-VISIT-RESERVATION-2026-ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>

1. Réduisez la fenêtre et vérifiez la largeur des deux tableaux. Les tableaux fixes mesurent au moins 512px avec une racine de 16px, et les tableaux automatiques peuvent être plus larges pour refléter un code plus long. Les deux tableaux doivent se déplacer horizontalement dans la zone qu'ils occupent, et non à travers toute la page.
2. Déplacez-vous vers la zone du tableau fixe avec Tab et vérifiez la dernière colonne avec la touche flèche droite. Sur les petits écrans, vérifiez également si vous pouvez vous déplacer horizontalement avec le doigt. Après cette vérification, revenez à l’extrémité gauche.
3. Remplacez table-layout: fixed par table-layout: auto dans .fixed. Après avoir vérifié comment la largeur des colonnes et du tableau change pour les mêmes données, rétablissez fixed.
4. Remplacez white-space: nowrap par white-space: normal dans .token et ajoutez overflow-wrap: anywhere. Vérifiez si le code long passe à la ligne pour augmenter la hauteur de la cellule, puis revenir à la déclaration originale.
5. Changer le ratio des colonnes à 40:60. Comparer l'espacement dans la colonne des entrées courtes avec les sauts de ligne dans la colonne de description. Restaurer à 30:70 et vérifier sur un écran large et avec le texte agrandi.

Si les proportions ne correspondent pas à ce qui est attendu, vérifiez la disposition du tableau ainsi que la largeur spécifiée du tableau, la largeur minimale et les conditions de renvoi à la ligne pour les longues chaînes. Si le déplacement horizontal ne fonctionne pas, assurez-vous de spécifier overflow-x sur le conteneur qui enveloppe le tableau et non sur le tableau lui-même. Si vous choisissez d'abréger les mots, vous devez pouvoir lire le texte original important ailleurs.