Le tableau en HTML sert à organiser des éléments dans un tableau à deux dimensions
Un tableau est constitué d’une ou plusieurs rangées qui, à leur tour, sont constituées d’éléments
Les tableau ne doivent pas être utilisés pour la mise en page, mais seulement pour présenter de l'information sous forme tabulaire
Un tableau, l'élément table, contient des rangées, les éléments tr (pour table row), qui contiennent elle-mêmes des cellules (élément th ou td)
L'élément th (pour table header) est normalement utilisé dans la première rangée du tableau et son contenu est par défaut centré et affiché en caractères gras
L'élément td (pour table data) est normalement utilisé dans les autres rangées du tableau et représente les cellules
<!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
On ajoute les bordure à l'aide de la prpriété CSS border
Il faut sélectionner le tableau lui-même (table) ainsi que les éléments th et td
Exemple :
table, th, td {
border: 2px solid blue;
}
La propriété border est en fait la combinaison de 3 propriétés séparés : border-width, border-style et border-color
On aurait donc pu écrire le code de cette manière :
table, th, td {
border-width: 2px;
border-style: solid;
border-color: blue;
}
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
C'est déjà un début, mais les bordures (celle du tableau et celles des différentes cellules) sont par défaut séparées
La propriété border-collapse permet de fusionner les bordures
On peut simplement la rajouter à nos propriétés sur table, td et th ou ajouter une déclaration séparée sur le sélecteur table.
Exemple :
table, th, td {
border: 2px solid blue;
border-collapse: collapse;
}
ou encore :
table, th, td {
border: 2px solid blue;
}
table {
border-collapse: collapse;
}
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 s'agit d'utiliser la propriété padding
Le "padding" (remplissage) est l'espacement intérieur entre la bordure et le contenu (ici, du texte, mais ça peut être un autre élément)
Le padding peut être spécifié dans n'importe quelle unité (ex pixels), mais il peut être pratique d'utiliser l'unité em (relative à la taille de police de l'élément) ou rem (relative à la taille de police de l'élément racine)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau élémentaire</title>
<style>
table, th, td {
border: 2px solid blue;
}
table {
border-collapse: collapse;
}
th, td {
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
On y parvient avec les attributs colspan et rowspan des éléments th et td
colspan permet d'avoir de cellules qui s’étendent sur plus d’une colonne
rowspan permet d'avoir de cellules qui s’étendent sur plus d’une rangée
Exemple :
<table>
<tr>
<td colspan="2" style="background:blue"></td>
<td></td>
<!-- pas de 3e td -->
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2" style="background:red"></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- pas de 3e td -->
</tr>
</table>
Sortie :
Dernière mise à jour le 2 octobre 2018