Tableaux HTML

Vous pouvez créer un tableau en utilisant HTML.

Exemple

Tableau
Cet exemple montre comment créer un tableau dans un document HTML.
Bordure de tableau
Cet exemple montre différents types de bordures de tableau.

(Vous pouvez trouver plus d'exemples en bas de cette page)

Tableau

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

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

Il s'affiche dans le navigateur comme suit :

ligne 1, cellule 1 ligne 1, cellule 2
ligne 2, cellule 1 ligne 2, cellule 2

Tableau 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 voulons afficher la bordure.

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

<table border="1">
<tr>
<td>Ligne 1, cellule 1</td>
<td>Ligne 1, cellule 2</td>
</tr>
</table>

Les en-têtes du tableau

Les en-têtes de tableau sont définis par le tag <th>.

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

<table border="1">
<tr>
<th>Titre</th>
<th>Un autre titre</th>
</tr>
<tr>
<td>ligne 1, cellule 1</td>
<td>ligne 1, cellule 2</td>
</tr>
<tr>
<td>ligne 2, cellule 1</td>
<td>ligne 2, cellule 2</td>
</tr>
</table>

Il s'affiche dans le navigateur comme suit :

Titre Un autre titre
ligne 1, cellule 1 ligne 1, cellule 2
ligne 2, cellule 1 ligne 2, cellule 2

Cellule vide du tableau

Dans certains navigateurs, les cellules de tableau sans contenu sont mal affichées. Si une cellule est vide (sans contenu), le navigateur peut ne pas afficher la bordure de cette cellule.

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

Le navigateur peut l'afficher ainsi :

Cellule vide du tableau

Note :Cette cellule vide n'a pas de bordure visible. Pour éviter cela, ajoutez un espace de remplacement dans la cellule vide pour afficher la bordure.

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

Il s'affiche dans le navigateur comme suit :

ligne 1, cellule 1 ligne 1, cellule 2
　 ligne 2, cellule 2

Plus d'exemples

Tableau sans bordure
Cet exemple montre un tableau sans bordure.
En-tête du tableau (Heading)
Cet exemple montre comment afficher l'en-tête du tableau.
Cellules vides
Cet exemple montre comment traiter les cellules vides avec " ".
Tableau avec titre
Cet exemple montre un tableau avec un titre (caption).
Cellules de tableau couvrant plusieurs lignes ou colonnes
Cet exemple montre comment définir des cellules de tableau qui couvrent plusieurs lignes ou colonnes.
Balises dans le tableau
Cet exemple montre comment afficher des éléments dans différents éléments.
Marge de cellule (Cell padding)
Cet exemple montre comment utiliser le marge de cellule pour créer un espace entre le contenu de la cellule et la bordure.
Espace entre les cellules (Cell spacing)
Cet exemple montre comment utiliser l'espacement des cellules pour augmenter l'espace entre les cellules.
Ajouter une couleur de fond ou une image de fond à un tableau
Cet exemple montre comment ajouter un fond à un tableau.
Ajouter une couleur de fond ou une image de fond à une cellule de tableau
Cet exemple montre comment ajouter un fond à une ou plusieurs cellules de tableau.
Aligner le contenu dans une cellule de tableau
Cet exemple montre comment utiliser l'attribut "align" pour aligner le contenu des cellules afin de créer un tableau esthétique.
Attribut cadre (frame)
Cet exemple montre comment utiliser l'attribut "frame" pour contrôler les bordures autour du tableau.

Balise de tableau

Tableau Description
<table> Définir le tableau
<caption> Définir le titre du tableau.
<th> Définir l'en-tête du tableau.
<tr> Définir la ligne du tableau.
<td> Définir la cellule du tableau.
<thead> Définir l'en-tête du tableau.
<tbody> Définir le corps du tableau.
<tfoot> Définir le pied de tableau.
<col> Définir les attributs utilisés pour les colonnes du tableau.
<colgroup> Définir un groupe de colonnes de tableau.