Chargement...

Tableaux en CSS

HTML construit la grille de lignes et de cellules. CSS décide si les bordures sont nettes, quelle largeur a le tableau, où le texte s’assoit dans la cellule, et si les lignes se parcourent facilement.

Une boîte à outils CSS pour tableaux

📊 Styles de tableau en un coup d’œil

Propriété Rôle au quotidien
border-collapse Fusionner les bordures de cellules (collapse) ou les garder séparées (separate)
border-spacing Écart entre cellules quand les bordures sont séparées
width Largeur du tableau (souvent 100% dans un article ou une carte)
padding sur th/td Air à l’intérieur des cellules
text-align / vertical-align Alignement horizontal et vertical dans la cellule

Stylez surtout table, th, td et parfois tr — pas chaque cellule une par une — pour que toute la grille reste cohérente.

Des bordures qui ne doublent pas

Sans aide, les bordures voisines peuvent paraître épaisses ou doubles. border-collapse: collapse les fusionne en une ligne nette — le choix quotidien pour les tableaux de données.

Bordures de tableau fusionnées

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

Bordures séparées et espacement

Pour un écart visible entre cellules, utilisez border-collapse: separate et réglez border-spacing. L’espacement est ignoré en mode collapse.

Cellules séparées avec écarts

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

Largeur, en-têtes et alignement

Un tableau pleine largeur se lit souvent mieux dans les articles. Mettez en valeur les en-têtes, alignez le texte, et utilisez vertical-align quand les hauteurs de cellules diffèrent.

Alignement en-tête et cellule

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

Lignes zébrées et survol calme

Des fonds alternés aident à suivre les tableaux larges. Un :hover léger sur tr met en avant la ligne active sans bruit néon.

Zébrure + survol de ligne

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

Une habitude calme pour les tableaux de données

Fusionnez les bordures, donnez un vrai padding aux cellules, gardez un contraste d’en-tête modeste, et n’ajoutez zébrure ou survol que si le tableau large en a besoin.

Tableau d’article lisible

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

À vous de jouer

  1. Mettez border-collapse: collapse et une bordure légère sur th/td.
  2. Ajoutez un padding confortable dans les cellules.
  3. Alignez les en-têtes à gauche ; essayez vertical-align: top sur des cellules multilignes.
  4. Zébrez les lignes paires avec tr:nth-child(even).
  5. Ajoutez un fond doux en tr:hover — puis comparez avec un second tableau et border-spacing.

Erreurs fréquentes

  • Laisser les bordures séparées par défaut pour des lignes doubles et sales
  • Régler border-spacing avec border-collapse: collapse (ignoré)
  • Padding minuscule qui rend les données denses illisibles
  • Survol néon ou zébrure lourde qui lutte avec le contenu
  • Mélanger cette leçon avec les marqueurs list-style (session précédente)

Résumé

  • border-collapse: collapse est le défaut calme des tableaux de données
  • Utilisez separate + border-spacing pour des écarts entre cellules
  • Largeur, padding et alignement façonnent la lecture
  • Zébrure et survol léger aident le parcours
  • Structure en HTML ; apparence en CSS

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 32 de 35
Css Tutoriel