Habiller un tableau avec CSS en HTML

Les tableaux sont souvent utilisés pour présenter des données de manière organisée et structurée. Avec CSS, il est possible de donner un aspect plus esthétique aux tables tout en les rendant plus accessibles. Dans cet article, nous allons explorer différentes méthodes pour habiller un tableau avec CSS en HTML.

Les balises HTML pour les tableaux

Avant de commencer à appliquer des styles à un tableau, il est important de comprendre les différentes balises HTML nécessaires pour créer un tableau. Voici les éléments de base requis:

• La balise table: elle contient l'ensemble du tableau.
• La balise thead: elle représente l'en-tête du tableau.
• La balise tbody: elle contient le corps du tableau.
• La balise tr: elle représente une ligne du tableau.
• La balise th: elle représente une cellule d'en-tête.
• La balise td: elle représente une cellule de données.

Voici un exemple de code HTML pour un tableau simple:

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Âge</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>32</td>
    </tr>
  </tbody>
</table>

Appliquer des styles CSS aux tableaux

Maintenant que nous avons compris la structure HTML d'un tableau, nous pouvons appliquer des styles CSS pour personnaliser son apparence.

Les bordures

Pour ajouter des bordures à un tableau, vous pouvez utiliser la propriété CSS border. Par exemple, pour ajouter une bordure de 1 pixel solide à toutes les cellules d'un tableau, vous pouvez utiliser le code suivant:

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

Vous pouvez également utiliser la propriété border-collapse pour fusionner les bordures adjacentes en une seule ligne. Par exemple, pour créer une bordure de 1 pixel solide autour de tout le tableau avec des bordures internes fusionnées:

table {
  border: 1px solid black;
  border-collapse: collapse;
}

Les couleurs de fond

Pour changer la couleur de fond de certaines cellules, vous pouvez utiliser la propriété CSS background-color. Par exemple, pour changer la couleur de fond de la première cellule de l'en-tête en rouge:

th:first-child {
  background-color: red;
}

De même, pour changer la couleur de fond de toutes les cellules de données dans la première colonne en gris:

td:first-child {
  background-color: gray;
}

Les polices et les couleurs de texte

Pour changer les polices et les couleurs de texte dans les cellules du tableau, vous pouvez utiliser les propriétés CSS font-family, font-size, color et text-align. Par exemple, pour changer la police et la couleur du texte de toutes les cellules de données en bleu et en Comic Sans avec un alignement centré:

td {
  font-family: 'Comic Sans MS', cursive, sans-serif;
  font-size: 14px;
  color: blue;
  text-align: center;
}

Autres styles CSS

Il existe de nombreuses autres propriétés CSS que vous pouvez utiliser pour personnaliser votre tableau. Vous pouvez également utiliser des sélecteurs plus avancés pour cibler des cellules spécifiques en fonction de leur contenu ou de leur position. Consultez les ressources ci-dessous pour plus d'informations sur les techniques avancées de style de tableau en CSS.

Ressources

• "Habillage de tableaux avec des CSS" (OpenWeb - EU.org): openweb.eu.org/articles/tab...
• "Mise en forme des tableaux" (Apprendre le développement web | MDN): developer.mozilla.org/fr/do...
• "Les tableaux et les CSS" (FAQ CSS - Zone CSS): www.zonecss.fr/faq/les-tabl...
• "Créer un tableau stylé en HTML / CSS" (YouTube): www.youtube.com/watch?v=xGB...
• "Tableaux à bordures fines en CSS" (CSS Débutant): css.mammouthland.net/tablea...
• "Tableaux à bordures fines avec les CSS" (CSS débutant): plambert.developpez.com/tut...
• "Mettre en forme un tableau avec les propriétés CSS" (La buvette des étudiants): www.buvetteetudiants.com/co...
• "Les tableaux en HTML et en CSS" (Devenir Webmaster): www.devenir-webmaster.com/V...
• "Problème - habillage tableau PHP grâce au CSS" (OpenClassrooms): openclassrooms.com/forum/su...