Bordures de tableau HTML

Un tableau nu se lit ; les bordures rendent la grille évidente d’un coup d’œil. La leçon précédente a figé la structure avec table, tr, th et td. Cette session ajoute l’apparence : en HTML moderne, vous tracez les bordures avec du CSS, pas seulement avec l’ancien attribut présentationnel border sur <table>. La structure reste en HTML ; traits, espacement et couleur appartiennent aux règles de style. Voyez les bordures comme des lunettes pour la grille — elles aident les yeux à suivre les cellules sans changer le sens des données.

Pourquoi le CSS plutôt que l’ancien attribut

Les navigateurs acceptaient autrefois <table border="1"> comme astuce pédagogique rapide. Cet attribut est obsolète pour les pages modernes sérieuses et ne donne presque aucun contrôle sur la couleur, l’épaisseur ou les côtés visibles. Le CSS permet de régler largeur, style et couleur séparément, de partager une règle entre beaucoup de cellules et de combiner les bordures avec padding et border-collapse. Apprendre les bordures via CSS correspond aussi à la façon dont vous styliserez titres, listes et mise en page plus tard, donc les pages d’exercice restent alignées avec de vrais projets.

Réponse directe

Stylisez table, th et td avec la propriété CSS border. Utilisez border-collapse: collapse sur le tableau pour fusionner les bordures adjacentes en une seule ligne de grille propre au lieu d’un bord double épais. Placez les règles dans un attribut style pour de minuscules démos, ou — mieux pour la réutilisation — dans un bloc <style> ou une feuille de style avec une classe. Gardez le balisage tr/th/td sémantique ; seule l’apparence passe au CSS. Si un tutoriel commence encore uniquement par border="1", traitez-le comme une note de musée et traduisez l’idée en CSS.

Bordures CSS versus balisage obsolète

Bordures sur les cellules (pratique inline)

Les styles inline conviennent pendant que vous expérimentez sur un petit tableau. Collapse d’abord, puis donnez à chaque cellule d’en-tête et de données une fine bordure solid et un peu de padding.

Lire l’exemple inline

• border-collapse: collapse sur table fusionne les bordures voisines en une grille
• Chaque th/td pose border: 1px solid #333 pour un trait sombre simple
• padding: 6px empêche le texte de toucher la bordure
• Les styles inline se répètent sur chaque cellule — utiles pour apprendre, bruyants pour les grands tableaux
• La structure HTML est inchangée par rapport à la leçon Tables ; seule la présentation a été ajoutée

Aspect partagé avec un bloc style

Quand plusieurs cellules doivent correspondre, une règle de classe bat la copie de la même chaîne inline partout. Un petit bloc <style> dans l’en-tête du document est un pont clair vers les feuilles externes.

Lire l’exemple de style partagé

• table.grid limite les règles pour que chaque tableau de la page ne doive pas se ressembler
• Une règle stylise à la fois th et td dans .grid
• Changer padding ou couleur à un endroit met à jour toute la grille
• Vous écrivez toujours des lignes tr/th/td normales — le CSS ne remplace jamais ces éléments
• Les cours CSS suivants approfondissent les sélecteurs ; ici le but est une recette de bordure propre et répétable

Collapse, espacement et lisibilité

Sans border-collapse: collapse, beaucoup de navigateurs montrent des bordures séparées qui ressemblent à des doubles traits ou à une grille en relief. Collapse est le choix débutant habituel pour les tableaux de données car il se lit comme une surface cohérente de type tableur. Le padding dans les cellules compte autant que le trait lui-même : un padding zéro colle le texte à la bordure et fatigue le balayage. Commencez par 6px–8px et ajustez à l’œil sur votre page d’exercice. La couleur est optionnelle — un gris neutre ou un charbon sombre suffit pour apprendre ; les couleurs criardes distraient des chiffres que vous comparez.

La structure reste ; l’apparence bouge

Ne supprimez pas les en-têtes th parce que le CSS existe. Ne mettez pas les relations tabulaires seulement dans des boîtes colorées sans vrai balisage de tableau. Les bordures sont décoration et clarté sur le squelette de la session Tables. Si les données ne sont pas tabulaires, revenez aux listes — des traits plus jolis ne corrigent pas le mauvais choix d’élément. De même, ne revivez pas les tableaux de mise en page imbriqués juste parce que les bordures ont soudain l’air bien ; les régions de page appartiennent toujours à la structure et à la mise en page CSS plus tard.

Pratiquer dans votre éditeur

1. Réutilisez (ou recréez) un petit tableau d’exercice de la session Tables avec de vraies cellules th/td.
2. Ajoutez des bordures en CSS — essayez d’abord les styles inline sur chaque cellule pour voir chaque propriété.
3. Activez et désactivez border-collapse pour comparer doubles traits et grille à une seule ligne.
4. Ajoutez du padding pour que le texte tienne confortablement dans chaque cellule ; essayez 4px puis 8px.
5. Refactorisez vers une class plus un court bloc <style> comme le second exemple.
6. Confirmez que les en-têtes sont encore th et les cellules de données encore td après le style.
7. Optionnel : stylisez seulement .grid th avec une bordure ou un fond un peu plus fort pour souligner les libellés — sans changer le sens HTML.

Erreurs faciles

• S’appuyer uniquement sur des attributs présentationnels obsolètes comme border="1" pour des sites sérieux
• Laisser des bordures sans collapse et se demander pourquoi les traits paraissent épais ou doubles
• Padding zéro de sorte que le texte touche la bordure
• Styliser en CSS mais retirer les libellés sémantiques th
• Appliquer un td { border: ... } global qui restyle par accident des tableaux non liés
• Traiter le CSS de bordure comme une raison de reconstruire la mise en page avec des tableaux imbriqués

Résumé

• Préférez CSS border sur th et td (et collapse sur table)
• border-collapse: collapse nettoie la grille en traits simples
• Le padding améliore la lisibilité dans les cellules
• La structure reste en HTML ; l’apparence en CSS
• Évitez de dépendre de l’attribut border obsolète pour le nouveau travail
• Refactorisez les bordures inline répétées en une classe quand le tableau grandit