Bordures de tableau HTML : collapse, espacement, zébrage, arrondis | We.Inc
Stylez les bordures de tableau HTML en CSS : border-collapse, border-spacing, lignes par cellule, lignes zébrées et coins arrondis. Bac à sable en direct avec CSS à copier.
Pour rendre les lignes d'un tableau visibles, placez une bordure sur les cellules th et td, puis ajoutez border-collapse: collapse au tableau pour que les cellules voisines partagent une seule ligne au lieu d'en tracer deux. Pour des espaces entre les cellules, utilisez border-collapse: separate avec border-spacing. Les coins arrondis exigent le modèle séparé, car les bordures fusionnées ignorent border-radius.
Les propriétés de bordure de tableau en un coup d'œil
Objectif
CSS
Où le placer
Lignes de grille uniques et partagées
border-collapse: collapse
Lignes autour de chaque cellule
border: 1px solid #ccc
th, td
Espaces entre les cellules
border-spacing: 4px
table (modèle séparé uniquement)
Lignes zébrées
tbody tr:nth-child(even) { background: #f5f5f5 }
Coins extérieurs arrondis
border-radius + border-collapse: separate
table et cellules d'angle
Lignes entre les rangées uniquement
border-bottom: 1px solid #ddd
th, td
Les tableaux ont leurs propres règles de bordure, distinctes de celles des boîtes ordinaires, si bien que le CSS qui fonctionne sur une div rend souvent mal sur un tableau. Utilisez le bac à sable pour passer du modèle fusionné au modèle séparé, modifier l'épaisseur des lignes, l'espacement et le rayon des coins, puis copiez le CSS exact qu'il génère.
Choisissez le modèle collapse ou separate dans le bac à sable et regardez les doubles lignes fusionner ou se séparer.
Choisissez les lignes à tracer : une grille complète, les rangées uniquement, ou juste un cadre extérieur.
Activez les lignes zébrées ou les coins arrondis ; l'arrondi bascule le tableau vers le modèle séparé à votre place.
Copiez le CSS généré, ou partez de l'un des exemples modifiables plus bas.
Placez les bordures sur les cellules, pas seulement sur l'élément table. Une bordure sur le tableau seul trace un cadre extérieur et rien à l'intérieur.
Utilisez border-spacing: 0 avec le modèle séparé quand vous voulez des coins arrondis sans espaces visibles.
Zébrez uniquement les rangées du tbody, pour que la ligne d'en-tête garde son propre fond.
Gardez des couleurs de ligne claires et laissez le padding faire l'essentiel de la séparation ; des grilles chargées rendent les chiffres plus difficiles à parcourir.
Placez les tableaux larges dans un conteneur avec overflow-x: auto pour que les téléphones fassent défiler le tableau plutôt que toute la page.
Questions fréquentes
Pourquoi mon tableau affiche-t-il des doubles bordures ?
La valeur initiale de border-collapse est separate, donc chaque cellule trace sa propre bordure et deux voisines se retrouvent côte à côte. Définissez border-collapse: collapse sur le tableau et les bordures adjacentes fusionnent en une seule ligne.
Pourquoi border-radius ne fonctionne-t-il pas sur mon tableau ?
Les coins arrondis sont ignorés dans le modèle de bordures fusionnées. Passez le tableau en border-collapse: separate, définissez border-spacing: 0, puis arrondissez les cellules des coins extérieurs ou placez le tableau dans une div avec border-radius et overflow: hidden.
L'attribut HTML border est-il encore autorisé sur les tableaux ?
Le standard HTML classe l'attribut border sur table comme obsolète et recommande d'utiliser le CSS à la place. Les navigateurs le dessinent encore pour les anciennes pages, mais le nouveau code doit définir les bordures dans une feuille de style pour qu'une seule règle contrôle tous les tableaux.
Que prend border-spacing ?
Une seule longueur définit l'espace horizontal et vertical. Deux longueurs définissent d'abord l'espace horizontal entre les colonnes, puis l'espace vertical entre les rangées, par exemple border-spacing: 8px 4px. La propriété n'a aucun effet quand le tableau est fusionné.
Comment ajouter une bordure à une seule colonne ?
Ciblez les cellules de cette colonne avec un sélecteur comme td:nth-child(2), th:nth-child(2) et donnez-leur une bordure gauche ou droite. Styler directement les cellules fonctionne de la même façon dans les deux modèles de bordure.
Deux modèles de bordure
Dans le modèle séparé, chaque cellule est sa propre boîte avec sa propre bordure, et border-spacing définit l'espace entre ces boîtes. C'est le modèle par défaut, ce qui explique pourquoi un tableau brut avec des bordures de cellule semble doublé.
Dans le modèle fusionné, le navigateur transforme chaque bord partagé en une seule ligne. C'est ce que veulent la plupart des tableaux de données, au prix de la perte de border-spacing et des coins arrondis.
Des tableaux de données lisibles
Des filets horizontaux entre les rangées guident mieux l'œil le long d'une ligne de chiffres qu'une grille dense. Alignez à droite les colonnes numériques, gardez une ligne d'en-tête claire avec des éléments th, et ajoutez une caption pour que le tableau ait un nom pour les utilisateurs de lecteurs d'écran.
Les lignes zébrées aident sur les longs tableaux à nombreuses colonnes. Vérifiez que la couleur du zébrage laisse un contraste suffisant pour le texte posé dessus.
Référence des propriétés de bordure de tableau
Propriétés qui modifient le tracé des lignes d'un tableau
Propriété
Valeurs
Initiale
Remarques
collapse, separate
À définir sur le tableau. Collapse fusionne les bords partagés.
une ou deux longueurs
Espace horizontal puis vertical. Ignoré en mode fusionné.
épaisseur style couleur
Généralement défini sur th et td.
Ignoré dans le modèle fusionné.
Exemples de bordures de tableau modifiables
Grille fusionnée avec ligne d'en-tête
Le tableau de données classique : une ligne entre chaque cellule et un en-tête teinté.
Rangées uniquement, avec zébrage
Aucune ligne verticale. Une bordure inférieure sur chaque cellule plus une teinte sur les rangées paires rendent les longues rangées faciles à suivre.
Coins de tableau arrondis
Le modèle séparé avec un espacement nul, des bordures à droite et en bas de chaque cellule, et les coins extérieurs arrondis.
L'attribut border obsolète à côté de la version CSS
Les deux tableaux se ressemblent. Le second garde le style dans le CSS, comme le demande le standard HTML.
Bac à sable des bordures de tableau
Modèle de bordure
Lignes à tracer
Grille complète
Rangées uniquement
Cadre extérieur uniquement
Épaisseur de ligne : {n}px
Espacement des cellules : {n}px
Rayon des coins : {n}px
Lignes zébrées
Couleur des lignes
L'espacement et l'arrondi ne fonctionnent qu'avec le modèle séparé.