Stylisation de tableaux CSS

Introduction

Dans ce laboratoire, vous apprendrez les propriétés CSS fondamentales utilisées pour styliser les tableaux HTML. Par défaut, les tableaux HTML sont simples et peuvent être difficiles à lire. Avec CSS, vous pouvez transformer un tableau basique en une présentation de données bien structurée, visuellement attrayante et facile à comprendre.

Nous commencerons avec un tableau HTML basique et lui appliquerons progressivement des styles. Vous apprendrez à gérer les bordures, à ajouter de l'espacement, à styliser l'en-tête et à aligner le texte dans les cellules.

Le fichier index.html nécessaire a déjà été créé pour vous. Votre tâche consistera à écrire du code CSS dans le fichier styles.css pour styliser le tableau. Vous pouvez prévisualiser vos modifications en temps réel dans l'onglet "Web 8080" de votre espace de travail.

Définir border-collapse collapse sur le tableau

Dans cette étape, nous allons commencer à styliser notre tableau. Par défaut, les cellules des tableaux HTML ont leurs propres bordures individuelles, ce qui peut donner un aspect de "double bordure" qui semble épais et démodé. La propriété border-collapse contrôle si les bordures du tableau sont séparées ou fusionnées en une seule bordure.

Nous allons définir border-collapse sur collapse pour créer des bordures nettes et à ligne unique.

Tout d'abord, ouvrez le fichier styles.css depuis l'explorateur de fichiers sur la gauche. Ajoutez la règle CSS suivante au fichier.

table {
  border-collapse: collapse;
}

Après avoir ajouté le code, enregistrez le fichier. Bien que vous ne voyiez pas encore de bordures, cette propriété est essentielle pour l'étape suivante. Vous pouvez passer à l'onglet "Web 8080" pour voir l'aperçu en direct, bien que le changement visuel soit minime à ce stade.

Appliquer border 1px solid black à th et td

Maintenant que nous avons configuré le tableau pour utiliser un modèle de bordure fusionnée, ajoutons les bordures réelles aux cellules d'en-tête (th) et aux cellules de données (td). Nous pouvons cibler les deux éléments à la fois en utilisant un sélecteur séparé par des virgules.

Dans cette étape, vous ajouterez une bordure 1px solide et noire à chaque cellule du tableau.

Ajoutez la règle CSS suivante à votre fichier styles.css, sous la règle table existante.

th,
td {
  border: 1px solid black;
}

Enregistrez le fichier et basculez vers l'onglet "Web 8080". Vous devriez maintenant voir une bordure nette et à ligne unique autour de chaque cellule du tableau.

Utiliser padding 8px sur les cellules du tableau

Le tableau a maintenant des bordures, mais le contenu à l'intérieur des cellules touche les bords, ce qui donne une impression d'encombrement. Nous pouvons utiliser la propriété padding pour ajouter de l'espace entre le contenu et la bordure de la cellule, améliorant ainsi la lisibilité.

Dans cette étape, vous ajouterez 8px de padding à toutes les cellules du tableau.

Modifiez la règle th, td existante dans styles.css pour inclure la propriété padding.

th,
td {
  border: 1px solid black;
  padding: 8px;
}

Après avoir enregistré le fichier, vérifiez à nouveau l'onglet "Web 8080". Vous remarquerez que les cellules sont maintenant plus grandes et que le texte est espacé confortablement autour de lui.

Ajouter background-color à la ligne d'en-tête du tableau

Pour que l'en-tête du tableau se démarque des lignes de données, il est courant de lui donner une couleur de fond différente. Cela sépare visuellement les titres de colonnes du contenu.

Dans cette étape, vous ajouterez une couleur de fond gris clair aux cellules d'en-tête (th).

Ajoutez une nouvelle règle CSS ciblant uniquement les éléments th dans styles.css.

th {
  background-color: #f2f2f2;
}

Enregistrez le fichier et visualisez le résultat dans l'onglet "Web 8080". La ligne d'en-tête de votre tableau devrait maintenant avoir une couleur de fond distincte, la rendant facile à identifier.

Implémenter text-align left pour les cellules de données

L'alignement du texte est crucial pour la lisibilité d'un tableau. Par défaut, les cellules d'en-tête (th) sont centrées, tandis que les cellules de données (td) sont alignées à gauche. Bien que l'alignement à gauche soit le comportement par défaut pour les éléments td, le définir explicitement est une bonne pratique pour garantir un rendu cohérent sur tous les navigateurs.

Dans cette étape, vous définirez explicitement l'alignement du texte des cellules de données à gauche.

Ajoutez une nouvelle règle CSS pour le sélecteur td dans votre fichier styles.css.

td {
  text-align: left;
}

Enregistrez le fichier. Comme il s'agit du comportement par défaut, vous ne verrez peut-être pas de changement visuel dans l'onglet "Web 8080", mais votre feuille de style est maintenant plus robuste et explicite quant au design souhaité. Cela complète le style de base de notre tableau.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez transformé avec succès un tableau HTML simple en un tableau stylisé et professionnel en utilisant des propriétés CSS fondamentales.

Dans ce laboratoire, vous avez appris à :

• Utiliser border-collapse: collapse; pour créer des bordures uniques et nettes pour un tableau.
• Appliquer une border aux cellules d'en-tête (th) et de données (td).
• Ajouter un espacement interne aux cellules en utilisant la propriété padding.
• Différencier l'en-tête du tableau en définissant une background-color.
• Contrôler l'alignement horizontal du texte dans les cellules à l'aide de text-align.

Ces compétences sont essentielles pour présenter efficacement les données tabulaires sur le web.