designer un tableau HTML

Designer un tableau HTML avec CSS

Mise en forme de base d'un tableau

Bordures et fusion des bordures

Par défaut, les cellules d'un tableau sont séparées. On utilise souvent border-collapse pour fusionner les bordures.

table {
- width: 100%;
- border-collapse: collapse;
}
th,td {
- border: 1px solid #ccc;
- padding: 8px;
}

border-collapse: collapse; évite les doubles bordures
padding améliore la lisibilité du contenu

Styliser les en-têtes (`th`)

Les en-têtes doivent être visuellement distincts.

th{
- background-color: #f2f2f2;
- text-align: left;
- font-weight: bold;
}

Bonnes pratiques :

conserver un bon contraste
éviter les couleurs trop agressives

Alignement du contenu

Le CSS permet d'aligner le texte horizontalement et verticalement.

td {
- text-align: center;
- vertical-align: middle;
}

Pour les données numériques, un alignement à droite est souvent préférable.

td.nombre {
- text-align: right;
}

Zébrage des lignes (tableaux lisibles)

Le zébrage améliore la lecture sur les tableaux contenant beaucoup de lignes. Il consiste à appliquer un même design une ligne sur deux.

tr:nth-child(even) {
- background-color: #666;
}

#1	Cellule 1	Cellule 2
#2	Cellule 3	Cellule 4
#3	Cellule 5	Cellule 6
#4	Cellule 7
#5	Cellule 8
#6	Cellule 9

Effets au survol (hover)

Mettre en évidence une ligne au survol améliore l'expérience utilisateur.

tr:hover {
- background-color: #eaeaea;
}

Cellule 1

Cellule 2

Cellule 3

À utiliser avec modération pour ne pas distraire l'utilisateur.

Styliser la balise `<caption>`

La balise <caption> peut être stylisée comme n'importe quel élément texte.

caption {
- caption-side: top;
- font-weight: bold;
- margin-bottom: 10px;
}

caption-side permet de placer le titre au-dessus ou en dessous du tableau

Tableaux responsives (adaptés au mobile)

Les tableaux sont naturellement difficiles à afficher sur petits écrans. Une solution simple consiste à autoriser le défilement horizontal.

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

Cette technique est simple et respecte l'accessibilité.

Bonnes pratiques de design

? Toujours privilégier la lisibilité
? Tester le contraste des couleurs
? Ne pas surcharger le tableau d'effets visuels
? Tester sur écran large et mobile

? Ne jamais utiliser le CSS pour modifier le sens des données ? Éviter les tailles de police trop petites

Conclusion

Le CSS permet de transformer un tableau brut en un tableau clair, lisible et agréable à consulter. Un bon design repose sur la simplicité, la cohérence et le respect de la structure HTML.

designer un tableau HTML