Dernière mise à jour le 18 septembre 2022
Un tableau en HTML sert à organiser des éléments dans un tableau à deux dimensions.
Il peut contenir n'importe quoi :
| Lorem ipsum | dolor sit amet | 666 |
| Je suis une cellule | |
Bonjour! |
Il pourrait même contenir un autre tableau!
Un tableau est constitué d’une ou plusieurs rangées qui, à leur tour, sont constituées d’une ou plusieurs cellules.
AVERTISSEMENT : Les tableau ne doivent pas être utilisés pour la mise en page, mais seulement pour présenter de l'information sous forme tabulaire. Pour la mise en page il y a les feuilles de styles (CSS).
Un tableau, représenté par l'élément table, contient des rangées, soit des éléments tr (pour table row).
Ces rangées contiennent à leur tour des cellules, soit des éléments td (pour table data).
<table>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</table>
Si on veut utiliser une rangée du tableau comme entête, on pêut remplacer ses éléments td par des éléments th (pour table header).
<table>
<tr>
<th>...</th><th>...</th><th>...</th>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</table>
L'élément th est par défaut centré et affiché en caractères gras par les navigateurs, sans qu'il soit nécessaire de lui affecter un style.
| Bla | Bla | Bla |
|---|---|---|
| Lorem ipsum | dolor sit amet | 666 |
| Je suis une cellule | |
Bonjour! |
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau élémentaire</title>
</head>
<body>
<p>
Par défaut un tableau n'a pas de bordure et
pas de remplissage (padding).
</p>
<p>
La première rangée contient des "th" et les
autres des éléments "td".
</p>
<table>
<tr>
<th>Article</th>
<th>Prix</th>
</tr>
<tr>
<td>Ventilateur</td>
<td>70$</td>
</tr>
<tr>
<td>Climatiseur</td>
<td>350$</td>
</tr>
</table>
</body>
</html>
Par défaut les tableaux n'ont pas de bordures.
| entete | entete | entete |
|---|---|---|
| cellule | cellule | cellule |
| cellule | cellule | cellule |
On peut leur en ajouter à l'aide des propriétés border-width, border-style et border-color.
On doit modifier la valeur des propriétés pour les éléments th et td.
Exemple :
th, td {
border-width: 2px;
border-style: solid;
border-color: blue;
}
Sortie :
| entete | entete | entete |
|---|---|---|
| cellule | cellule | cellule |
| cellule | cellule | cellule |
Il est généralement plus simple d'utiliser la propriété border qui est la combinaison des propriétés: border-width, border-style et border-color.
On aurait donc pu écrire le code de cette manière :
th, td {
border: 2px solid blue;
}
C'est déjà un début, mais les bordures des différentes cellules sont par défaut distancées l'une de l'autre, ce qui n'est généralement pas l'effet recherché.
La propriété border-collapse permet de régler le problème en fusionnant les bordures.
Cette propriété est rajoutée à l'élément table.
Exemple :
table {
border-collapse: collapse;
}
th, td {
border: 2px solid blue;
}
Sortie :
| entete | entete | entete |
|---|---|---|
| cellule | cellule | cellule |
| cellule | cellule | cellule |
On peut également simplifier les choses en donnant les mêmes propriétés à tous les éléments qui forment le tableau :
table, th, td {
border: 2px solid blue;
border-collapse: collapse;
}
La largeur s'exprime dans différentes unités, on peut écrire thin, medium, thick, une valeur en pixels (spécifier l'unité) ou dans toutes les unités possibles en CSS (em, rem, %, etc.), mais ces dernières options sont rarement utilisées
Les types les plus utilisés sont les suivants :
Par défaut les tableaux n'ont pas d'espacement intérieur (remplissage ou padding en anglais).
Pour aérer le contenu des cellules, il suffit d'utiliser la propriété padding, qui correspond à l'espacement intérieur entre la bordure et le contenu qui est généralement du texte, mais qui pourrait aussi être une image, un bouton, etc.
Exemple :
table, th, td {
border: 2px solid blue;
border-collapse: collapse;
padding: 10px;
}
Sortie :
| entete | entete | entete |
|---|---|---|
| cellule | cellule | cellule |
| cellule | cellule | cellule |
Le padding peut être spécifié dans n'importe quelle unité, mais nous nous limiterons pour l'instant au pixel ("px").
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau élémentaire</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 2px solid blue;
padding: 10px;
}
</style>
</head>
<body>
<p>
N'hésitez pas à modifier les styles pour en
constater l'effet sur le tableau
</p>
<table>
<tr>
<th>Article</th>
<th>Prix</th>
</tr>
<tr>
<td>Ventilateur</td>
<td>70$</td>
</tr>
<tr>
<td>Climatiseur</td>
<td>350$</td>
</tr>
</table>
</body>
</html>
On peut faire en sorte que toutes les cellules d'un tableau n'aient pas la même taille.
Exemple :
| Sur 2 colonnes | ||
| Sur 2 rangées |
||
On y parvient à l'aide des propriétés colspan et rowspan des éléments th et td.
La propriété colspan permet d'avoir des cellules qui s’étendent sur plus d’une colonne.
Exemple :
<table>
<tr>
<td colspan="2">colspan=2</td>
<td></td>
<!-- pas de 3e td -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Sortie :
| colspan=2 | ||
La propriété rowspan permet d'avoir des cellules qui s’étendent sur plus d’une rangée.
Exemple :
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2">rowspan=2</td>
</tr>
<tr>
<td></td>
<td></td>
<!-- pas de 3e td -->
</tr>
</table>
Sortie :
| rowspan=2 | ||
Exemple combiné :
<table>
<tr>
<td colspan="2" style="background:turquoise"></td>
<td></td>
<!-- pas de 3e td -->
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2" style="background:orange"></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- pas de 3e td -->
</tr>
</table>
Sortie :
Tableau de 2 rangées et 3 colonnes
<table>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</table>
Avec avec ligne d'entête
<table>
<tr>
<th>...</th><th>...</th><th>...</th>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</table>
Avec avec colonne d'entête
<table>
<tr>
<th>...</th><td>...</td><td>...</td>
</tr>
<tr>
<th>...</th><td>...</td><td>...</td>
</tr>
</table>
Fusionner 2 cellules à l'horizontale
<table>
<tr>
<td colspan="2"></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
Fusionner 2 cellules à la verticale
<table>
<tr>
<td rowspan="2"></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
CSS minimal pour tableau
table {
border-collapse: collapse;
}
th, td {
border: solid black 1px;
}