Commençons par discuter des tableaux. Plus précisément, nous examinerons l'organisation du texte suivante :

Tables

Les tables en HTML sont utilisées pour afficher des données en lignes et colonnes, offrant un moyen structuré d'organiser l'information.

Création de Tables

La balise <table> est utilisée pour créer une table en HTML. Les tables sont composées de lignes (<tr>) et de cellules (<td>), qui définissent la structure et le contenu de la table. La structure de base d'une table sera la suivante.
Exemple:

Dans l'exemple ci-dessus :

• La balise <table> est utilisée pour créer un tableau ;
• Chaque balise <tr> représente une ligne dans le tableau ;
• À l'intérieur de chaque ligne, les balises <td> représentent les cellules, définissant le contenu de chaque cellule.

Bien que nous puissions arrêter de travailler avec les tableaux ici, nous pouvons améliorer leur sémantique pour faciliter la compréhension de leur contenu par les moteurs de recherche.

En-têtes de tableau

La balise <th> définit les en-têtes de tableau représentant les en-têtes de colonne ou de ligne. Elle doit être utilisée dans la section <thead> d'un tableau.
Exemple :

Dans l'exemple ci-dessus :

• La section <thead> contient des cellules d'en-tête de tableau définies à l'aide de la balise <th>;
• Chaque balise <th> représente une cellule d'en-tête.

Corps du Tableau

La section tbody doit venir après la section thead et envelopper toutes les données du tableau sauf les en-têtes. Tous les éléments à l'intérieur du tbody restent les mêmes.
Exemple:

Résumé

Les tableaux sont structurés avec une hiérarchie d'éléments :

1. Tableau

La balise <table> est l'élément parent qui définit l'ensemble du tableau. Elle contient toutes les lignes et colonnes du tableau.

2. En-tête de tableau

La balise <thead> est utilisée pour regrouper les lignes d'en-tête du tableau. Elle contient une ou plusieurs lignes (<tr>) de cellules d'en-tête (<th>), définissant les en-têtes de colonnes.

3. Corps du Tableau

La balise <tbody> est utilisée pour regrouper les lignes de contenu principal du tableau. Elle contient une ou plusieurs lignes (<tr>) de cellules de données (<td>), définissant le contenu principal du tableau.

4. Lignes du Tableau

La balise <tr> représente une ligne dans le tableau. Elle contient une ou plusieurs cellules de tableau (<td> ou <th>), définissant le contenu de chaque colonne dans la ligne.

5. Cellules du Tableau

La balise <td> représente une cellule de données standard dans le corps du tableau. La balise <th> représente une cellule d'en-tête dans la tête du tableau. Chaque cellule contient le contenu réel du tableau, tel que du texte, des images ou d'autres éléments HTML.

Tutoriel Vidéo