Création d'un tableau
Un tableau en HTML est créé à l'aide de la balise <table>. À l'intérieur de cette balise, vous pouvez définir des lignes avec la balise <tr> (Table Row), des cellules de données avec la balise <td> (Table Data) et des cellules d'en-tête avec la balise <th> (Table Header).
Dans l'exemple ci-dessous, l'attribut border="1" est utilisé pour ajouter une bordure au tableau. Cet attribut va devrait être évité dans les pratiques modernes de développement web, où il est préférable d'utiliser CSS pour styliser les tableaux. Il est utilisé ici afin de mieux comprendre la structure du tableau.
<table border="1">
<tr>
<th>Prénom</th>
<th>Nom</th>
</tr>
<tr>
<td>Jean</td>
<td>Dupond</td>
</tr>
<tr>
<td>Georges</td>
<td>Dufour</td>
</tr>
</table> Ce code génère un tableau avec deux colonnes (Prénom et Nom) et trois lignes (une ligne d'en-tête et deux lignes de données). Chaque cellule d'en-tête est créée avec la balise <th>, tandis que les cellules de données sont créées avec la balise <td>.
Il est possible d'ajouter des lignes et/ou des colonnes d'entête à l'aide des balises <th> et de les différencier des autres cellules du tableau. Il sera nécessaire d'ajouter un attribut scope à ces balises pour indiquer si elles font partie d'une ligne ou d'une colonne d'entête.
Comportement de base de la balise <tr>
Par défaut, les lignes créées avec la balise <tr> n'ont pas de style particulier. Cependant, vous pouvez utiliser CSS pour ajouter des styles tels que des couleurs de fond, des bordures ou des espacements entre les lignes pour améliorer l'apparence de votre tableau.
Comportement de base de la balise <th>
Par défaut, les cellules d'en-tête créées avec la balise <th> sont affichées en gras et centrées horizontalement. Cependant, ce comportement peut être modifié à l'aide de CSS pour personnaliser l'apparence des en-têtes de votre tableau.
Comportement de base de la balise <td>
Par défaut, les cellules de données créées avec la balise <td> sont affichées en texte normal et alignées à gauche. Cependant, ce comportement peut être modifié à l'aide de CSS pour personnaliser l'apparence des cellules de votre tableau.
Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : index.html
Fusion de lignes
Généralité
La particularité d'un tableau est que la ligne qui possède le plus de colonnes va imposer le nombre de colonnes que le tableau doit comporter. Cela signifie que chaque nouvelle ligne doit comporter le même nombre de cellules que la ligne qui possède le plus de colonnes.
L'attribut <rowspan>
Cependant, il est possible de fusionner des cellules pour créer des colonnes qui occupent plusieurs lignes. Pour cela, vous pouvez utiliser l'attribut rowspan dans les balises <td> ou <th>.
Par exemple, si vous souhaitez fusionner deux cellules pour créer une colonne qui occupe deux lignes, vous pouvez utiliser l'attribut rowspan="2" dans la balise de la première cellule que vous souhaitez fusionner. Cela permettra à cette cellule de s'étendre sur les deux lignes, créant ainsi une colonne fusionnée.
<table border="1">
<tr>
<th>Prénom</th>
<th>Nom</th>
</tr>
<tr>
<td>Jean</td>
<td>Dupond</td>
<td>98</td>
</tr>
<tr>
<td>Georges</td>
<td rowspan="2">Dufour</td>
</tr>
<tr>
<td>Franck</td>
</tr>
</table>Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : index.html
Fusion de colonnes
L'attribut <colspan>
Il est également possible de fusionner des cellules pour créer des lignes qui occupent plusieurs colonnes. Pour cela, vous pouvez utiliser l'attribut colspan dans les balises <td> ou <th>.
Par exemple, si vous souhaitez fusionner deux cellules pour créer une ligne qui occupe deux colonnes, vous pouvez utiliser l'attribut colspan="2" dans la balise de la première cellule que vous souhaitez fusionner. Cela permettra à cette cellule de s'étendre sur les deux colonnes, créant ainsi une ligne fusionnée.
<table border="1">
<tr>
<th>Prénom</th>
<th>Nom</th>
</tr>
<tr>
<td colspan="2">GARCON</td>
</tr>
<tr>
<td>Jean</td>
<td>Dupond</td>
</tr>
<tr>
<td colspan="2">FILLES</td>
</tr>
<tr>
<td>Emilie</td>
<td>Durand</td>
</tr>
</table>Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : index.html
En-tête et légende
Il est possible d'ajouter une légende à un tableau en utilisant la paire de balises <caption>. La légende est généralement affichée au-dessus du tableau et permet de décrire son contenu.
Pour placer la légende en dessous du tableau, il est nécessaire de le faire via la CSS.
<table border="1">
<caption>Les utilisateurs</caption>
<tr>
<th>Prénom</th>
<th>Nom</th>
</tr>
<tr>
<td>Jean</td>
<td>Dupond</td>
</tr>
</table>Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : index.html
Définir des zones
Il est possible de définir des zones spécifiques dans un tableau en utilisant les balises <thead>, <tbody> et <tfoot>. Ces balises permettent de regrouper les lignes d'un tableau en différentes sections, ce qui peut être utile pour appliquer des styles spécifiques à chaque section ou pour faciliter la lecture du tableau.
La balise <thead>
La paire de balises <thead> permet de regrouper les lignes d'en-tête d'un tableau. Elle est généralement utilisée pour contenir les titres des colonnes, ce qui facilite la lecture et la compréhension du tableau. Cela permet également d'appliquer des styles spécifiques aux en-têtes, tels que des couleurs de fond ou des polices différentes, pour les différencier du reste du tableau.
<table border="1">
<thead>
<tr>
<th>Prénom</th>
<th>Nom</th>
</tr>
</thead>
</table>La balise <tbody>
La paire de balises <tbody> permet de regrouper les lignes de données d'un tableau. Elle est utilisée pour contenir les informations principales du tableau, telles que les valeurs ou les données que vous souhaitez afficher.
En regroupant les lignes de données dans une section distincte, vous pouvez appliquer des styles spécifiques à cette section, tels que des couleurs de fond ou des bordures, pour améliorer la lisibilité du tableau.
<table border="1">
<tbody>
<tr>
<td>Jean</td>
<td>Dupond</td>
</tr>
<tr>
<td>Georges</td>
<td>Dufour</td>
</tr>
</tbody>
</table>La balise <tfoot>
La paire de balises <tfoot> permet de regrouper les lignes de pied de page d'un tableau. Elle est généralement utilisée pour contenir des informations supplémentaires ou des résumés à la fin du tableau. Elle peut également être utilisée pour rappeler l'entête du tableau.
En regroupant les lignes de pied de page dans une section distincte, vous pouvez appliquer des styles spécifiques à cette section, tels que des couleurs de fond ou des polices différentes, pour les différencier du reste du tableau.
Attention :
La balise <tfoot> doit être placée avant la balise <tbody> dans le code HTML, même si elle est affichée après le corps du tableau dans le rendu final.
<table border="1">
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : index.html