2.7 Les Tableaux en HTML : Créer et Utiliser

Les tableaux en HTML sont une fonctionnalité essentielle pour structurer et organiser les données de manière visuellement agréable. Apprendre à créer et à utiliser les tableaux en HTML peut considérablement améliorer la présentation de données dans vos pages web. Découvrons comment les utiliser efficacement grâce à des exemples concrets de code.

Introduction aux Tableaux en HTML

Un tableau en HTML est un moyen de structurer les informations en lignes et colonnes, ce qui permet d’afficher les données de manière claire et organisée. Chaque tableau est créé avec la balise <table>, et les lignes sont définies par <tr> (table row) tandis que les colonnes sont définies par <td> (table data) ou <th> (table header). Pour en savoir plus sur les fondamentaux, explorez notre guide sur les bases du langage HTML et la création de pages HTML.

Créer un Tableau HTML de Base

Pour commencer, voici comment créer un tableau HTML de base avec une simple structure :

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
    <th>Ville</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
    <td>Lyon</td>
  </tr>
</table>

Styler un Tableau HTML avec CSS

Pour améliorer l’apparence de votre tableau, vous pouvez utiliser du CSS. Voici un exemple qui ajoute du style aux éléments du tableau :

<style>
table {
  width: 50%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 18px;
  text-align: left;
}
th, td {
  padding: 12px;
  border-bottom: 1px solid #ccc;
}
th {
  background-color: #f4f4f4;
}
</style>

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
    <th>Ville</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
    <td>Lyon</td>
  </tr>
</table>

Ajouter des En-têtes et des Pieds de Tableau

Pour ajouter des en-têtes et des pieds de page au tableau, utilisez les balises <thead> et <tfoot> respectivement. Cela aide à structurer le tableau et à améliorer l’expérience utilisateur.

<table>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Âge</th>
      <th>Ville</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>Paris</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>Lyon</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Fin du tableau</td>
    </tr>
  </tfoot>
</table>

Fusionner des Cellules avec colspan et rowspan

La balise colspan permet de fusionner des cellules sur plusieurs colonnes, et la balise rowspan permet de le faire sur plusieurs lignes. Voici comment les utiliser :

<table>
  <tr>
    <th colspan="2">Identification</th>
    <th rowspan="2">Ville</th>
  </tr>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
    <td>Lyon</td>
  </tr>
</table>

Exemples Avancés de Tableaux HTML

Pour mieux illustrer l’utilisation des tableaux en HTML, voici quelques exemples avancés.

Tableau avec Cellules Fusionnées

Voici un exemple de tableau avec des cellules fusionnées à la fois horizontalement et verticalement :

<table>
  <tr>
    <th colspan="2">Nom</th>
    <th>Âge</th>
    <th rowspan="2">Ville</th>
  </tr>
  <tr>
    <td rowspan="2">Alice</td>
    <td>Dupont</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Martin</td>
    <td>45</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td colspan="3">Resume</td>
    <td>France</td>
  </tr>
</table>

Tableau avec des Lignes Alternées

L’utilisation de styles CSS peut également inclure une configuration de lignes alternées pour améliorer la lisibilité :

<style>
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
    <th>Ville</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>30</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>25</td>
    <td>Lyon</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>35</td>
    <td>Marseille</td>
  </tr>
</table>

Tableau et Ressources Externes

Les ressources externes peuvent aussi offrir de précieuses informations pour approfondir la compréhension des tableaux en HTML. Par exemple, le site MDN Web Docs fournit une documentation exhaustive sur les éléments de tableau en HTML et leur utilisation. Pour une formation plus structurée, des plateformes comme Udemy et Coursera offrent des cours sur le développement web incluant les bases HTML et CSS.

Conclusion

Les tableaux en HTML sont un outil essentiel pour structurer et afficher des données de manière ordonnée. En comprenant comment créer des tableaux de base et avancés, ajouter des styles et des cellules fusionnées, vous pouvez considérablement améliorer