Tableaux HTML
Les tableaux HTML permettent aux développeurs Web d'organiser les données en lignes et en colonnes.
Exemple
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Définir un tableau HTML
Un tableau en HTML se compose de cellules de tableau à l'intérieur de lignes et de colonnes
Exemple
Un simple tableau HTML :
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Cellules du tableau
Chaque cellule du tableau est définie par un
<td>et une </td>balise.
td
représente les données de table.
Tout ce qui se trouve entre <td>et </td>est le contenu de la cellule du tableau.
Exemple
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Remarque : les éléments de données du tableau sont les conteneurs de données du tableau.
Ils peuvent contenir toutes sortes d'éléments HTML ; texte, images, listes, autres tableaux, etc.
Lignes du tableau
Chaque ligne du tableau commence par un
<tr>et se termine par une </tr>balise.
tr
signifie ligne de tableau.
Exemple
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Vous pouvez avoir autant de lignes que vous le souhaitez dans un tableau, assurez-vous simplement que le nombre de cellules est le même dans chaque ligne.
Remarque : Il peut arriver qu'une ligne ait plus ou moins de cellules qu'une autre. Vous apprendrez cela dans un chapitre ultérieur.
En-têtes de tableau
Parfois, vous voulez que vos cellules soient des en-têtes, dans ces cas, utilisez la
<th>balise au lieu de la
<td>balise :
Exemple
Laissez la première ligne être des en-têtes de tableau :
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Par défaut, le texte des <th>éléments est en gras et centré, mais vous pouvez modifier cela avec CSS.
Exercices HTML
Balises de tableau HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .