Balises relatives aux tableaux

Dans cet article, nous expliquons les balises relatives aux tableaux.

Cette explication montre comment décrire les tableaux et les légendes de tableaux en HTML avec des exemples.

YouTube Video

Balises relatives aux tableaux

Balise <table>

 1<table>
 2    <tr>
 3        <th>Header 1</th>
 4        <th>Header 2</th>
 5    </tr>
 6    <tr>
 7        <td>Data 1</td>
 8        <td>Data 2</td>
 9    </tr>
10</table>

• La balise <table> est utilisée pour créer une table qui organise et affiche les données en lignes et colonnes.

  La balise <table> organise visuellement les données et crée des tables avec plusieurs lignes et colonnes. Les lignes sont définies avec la balise <tr>, les cellules d'en-tête avec la balise <th>, et les cellules de données avec la balise <td>.

• Vous pouvez personnaliser le style et la mise en page du tableau en utilisant du CSS.

Balise <tr>

1<tr>
2    <td>Row 1, Cell 1</td>
3    <td>Row 1, Cell 2</td>
4</tr>

• La balise <tr> est utilisée pour définir des lignes dans une table.

  La balise <tr> est utilisée pour créer chaque ligne d'une table, contenant des cellules (<td> ou <th>).

• Chaque ligne peut contenir plusieurs cellules, formant ainsi la structure globale du tableau.

Balises <th> et <td>

1<th>Header 1</th>
2<td>Data 1</td>

• La balise <th> définit une cellule d'en-tête de table. Typiquement utilisée dans les lignes d'en-tête, le contenu des cellules est en gras et centré.
• La balise <td> définit une cellule de données de table standard, qui affiche des données de table régulières.

Attributs colspan et rowspan

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td colspan="2">Spanning Cell</td>
11        </tr>
12        <tr>
13            <td rowspan="2">Spanning Cell</td>
14            <td>Data 1</td>
15        </tr>
16        <tr>
17            <td>Data 2</td>
18        </tr>
19    </tbody>
20</table>

colspan et rowspan sont des attributs utilisés lorsque les cellules d'un tableau s'étendent sur plusieurs colonnes ou lignes.

• L'attribut colspan permet à une cellule de s'étendre sur plusieurs colonnes.
• L'attribut rowspan permet à une cellule de s'étendre sur plusieurs lignes.

Balises <thead>, <tbody>, <tfoot>

 1<table>
 2    <thead>
 3        <tr>
 4            <th>Header 1</th>
 5            <th>Header 2</th>
 6        </tr>
 7    </thead>
 8    <tbody>
 9        <tr>
10            <td>Data 1</td>
11            <td>Data 2</td>
12        </tr>
13        <tr>
14            <td>Data 3</td>
15            <td>Data 4</td>
16        </tr>
17    </tbody>
18    <tfoot>
19        <tr>
20            <td>Footer 1</td>
21            <td>Footer 2</td>
22        </tr>
23    </tfoot>
24</table>

• La balise <thead> est utilisée pour définir la section d'en-tête d'un tableau. Elle contient généralement les en-têtes de colonnes.

  La balise <thead> est placée en haut du tableau, définissant les titres ou en-têtes de colonnes. Cela aide à distinguer clairement les sections de données.

• La balise <tbody> définit la section corps du tableau. Elle contient les lignes de données.

  La balise <tbody> contient le corps principal des données du tableau. Elle est positionnée entre les lignes encadrées par les balises <thead> et <tfoot>.

• La balise <tfoot> définit la partie pied de page du tableau, qui inclut les totaux ou les notes.

  La balise <tfoot> est située à la fin du tableau et est utilisée pour afficher les totaux ou d'autres annotations. Elle est particulièrement utile pour résumer ou afficher les totaux pour des ensembles de données volumineux.

Balises <caption> et <colgroup>

 1<table>
 2    <caption>Sample Table Caption</caption>
 3    <colgroup>
 4        <col style="background-color: #f2f2f2">
 5        <col style="background-color: #e6e6e6">
 6    </colgroup>
 7    <thead>
 8        <tr>
 9            <th>Header 1</th>
10            <th>Header 2</th>
11        </tr>
12    </thead>
13    <tbody>
14        <tr>
15            <td>Data 1</td>
16            <td>Data 2</td>
17        </tr>
18        <tr>
19            <td>Data 3</td>
20            <td>Data 4</td>
21        </tr>
22    </tbody>
23</table>

• La balise <caption> ajoute une légende (en-tête) pour clarifier le contenu du tableau. Elle est généralement placée en haut du tableau et sert à résumer le contenu global du tableau.

• La balise <colgroup> regroupe des colonnes au sein d'un tableau et est utilisée pour appliquer des styles ou des mises en page. Vous pouvez spécifier les couleurs de fond ou les largeurs pour des colonnes spécifiques en incluant la balise <col>.

Exemple de table

 1<table>
 2    <caption>Table Title</caption>
 3    <colgroup>
 4        <col span="2" style="background-color: lightblue;">
 5    </colgroup>
 6    <thead>
 7        <tr>
 8            <th>Header 1</th>
 9            <th>Header 2</th>
10            <th>Header 3</th>
11            <th>Header 4</th>
12        </tr>
13    </thead>
14    <tbody>
15        <tr>
16            <td>Data 11</td>
17            <td>Data 12</td>
18            <td>Data 13</td>
19            <td>Data 14</td>
20        </tr>
21        <tr>
22            <td>Data 21</td>
23            <td>Data 22</td>
24            <td>Data 23</td>
25            <td>Data 24</td>
26        </tr>
27    </tbody>
28    <tfoot>
29        <tr>
30            <td colspan="3">Table Footer Title</td>
31            <td>Table Footer Summary</td>
32        </tr>
33    </tfoot>
34</table>

• La balise <table> est utilisée pour créer un tableau qui affiche des données sous forme de lignes et de colonnes.

• La balise <thead> regroupe les lignes d'en-tête du tableau. Elle contient généralement des balises <th>, qui servent d'en-têtes.

• La balise <tbody> regroupe le contenu principal du tableau. Elle contient généralement des lignes de données composées de balises <td>.

• La balise <tfoot> regroupe les lignes de pied de tableau. Elle est adaptée pour afficher des totaux ou des notes.

• La balise <colgroup> regroupe les colonnes d'un tableau et permet de leur appliquer des styles dans leur ensemble.

• La balise <caption> ajoute une légende ou un titre au tableau, facilitant ainsi la compréhension de son contenu pour les utilisateurs.

• L'attribut colspan permet à une cellule de s'étendre sur plusieurs colonnes.

• L'attribut rowspan permet à une cellule de s'étendre sur plusieurs lignes.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video