Tableaux HTML

Un tableau est en fait beaucoup de petites cellules, et ces petites cellules sont organisées de manière ordonnée. Ils ont beaucoup de lignes et de colonnes. Ce layout composé de lignes et de colonnes est appelé tableau, et le tableau est défini par la balise table.

Exemple de tableau HTML :

Exemple en ligne

Tableau HTML
Ce exemple montre comment créer un tableau dans un document HTML.

<table　border="1" largeur="300">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>

Tableaux HTML

Un tableau est défini par la balise <table>. Chaque tableau a plusieurs lignes (définites par la balise <tr>), et chaque ligne est divisée en plusieurs cellules (définites par la balise <td>). Le terme td signifie données du tableau (table data), c'est-à-dire le contenu des cellules de données. Les cellules de données peuvent contenir du texte, des images, des listes, des paragraphes, des formulaires, des lignes horizontales, d'autres tableaux, etc.

Exemple de tableau

<table　border="1">
　　　　<tr>
　　　　　　　　<td>ligne　1, colonne　1</td>
　　　　　　　　<td>ligne　1, colonne　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>ligne　2, colonne　1</td>
　　　　　　　　<td>ligne　2, colonne　2</td>
　　　　</tr>
</table>

S'affiche dans le navigateur comme suit :

Bordure de tableau HTML et propriété de bordure

Si vous ne définissez pas la propriété de bordure, le tableau ne montrera pas de bordure. Cela peut être utile parfois, mais dans la plupart des cas, nous souhaitons afficher une bordure.

Utilisez la propriété de bordure pour afficher un tableau avec une bordure :

<table　border="1">
　　　　<tr>
　　　　　　　　<td>ligne　1, colonne　1</td>
　　　　　　　　<td>ligne　1, colonne　2</td>
　　　　</tr>
</table>

En-tête de tableau HTML

Les en-têtes de tableau sont définis à l'aide de la balise <th>.

La plupart des navigateurs affichent les en-têtes en texte gras centré :

<table　border="1">
　　　　<tr>
　　　　　　　　<th>En-tête un</<th>
　　　　　　　　<th>En-tête deux</<th>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>ligne　1, colonne　1</td>
　　　　　　　　<td>ligne　1, colonne　2</td>
　　　　</tr>
　　　　<tr>
　　　　　　　　<td>ligne　2, colonne　1</td>
　　　　　　　　<td>ligne　2, colonne　2</td>
　　　　</tr>
</table>

S'affiche dans le navigateur comme suit :

Plus d'exemples

Tableau sans bordure
Ce exemple montre un tableau sans bordure.

En-tête du tableau (Heading)
Ce exemple montre comment afficher l'en-tête du tableau.

Tableau avec un titre
Ce exemple montre un tableau avec un titre (caption).

Cellules de tableau traversant des lignes ou des colonnes
Ce exemple montre comment définir des cellules de tableau qui traversent des lignes ou des colonnes.

Balises dans le tableau
Ce exemple montre comment afficher des éléments dans différents éléments.

Marge de cellule (Cell padding)
Ce exemple montre comment utiliser Cell padding pour créer un espace entre le contenu des cellules et leur bord.

Espace entre les cellules (Cell spacing)
Ce exemple montre comment utiliser Cell spacing pour augmenter l'écart entre les cellules.

Balises de tableau HTML