Bootstrap fournit la classe table qui permet une mise en forme élégante et simple des tableaux. Voyons comment écrire ses tableaux en bootstrap 4.

Un exemple

Le code suivant (adapté de l’exemple de la documentation de Bootstrap1) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table class="table">
	<thead>
		<tr>
			<th>Index</th>
			<th>Pays</th>
			<th>Capital</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">1</th>
		<td>France</td>
		<td>Paris</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Allemagne</td>
		<td>Berlin</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Chine</td>
		<td>Pékin</td>
	</tr>
	</tbody>
</table>

Donnera :

Index Pays Capital
1 France Paris
2 Allemagne Berlin
3 Chine Pékin

Le tableau est découpé en deux parties, délimitées par les balises <thead> et <tbody>. À l’intérieur de la balise <thead>, on placera les lignes qui constituent l’en-tête du tableau, et le contenu du tableau sera à l’intérieur des balises <tbody>.

La balise <th> sert à délimiter une cellule spéciale du tableau, dont le contenu sera mis en gras. Elle doit être utilisée pour les noms de ligne et de colonne.

On utilise l’attribut scope (dans <th scope="row">) pour définir une cellule spéciale <th> comme étant le titre d’une colonne, d’une ligne, ou d’un groupe de colonnes ou de lignes2. Ainsi, dans l’exemple précédent, la valeur row permet de définir les balises <th scope="row"> comme titres de colonne. Les autres valeurs possibles en HTML sont column, colgroup et rowgroup, qui ne semblent pas être utilisés par Bootstrap.

Utilité des balises

<thead>
Délimite l’en-tête du tableau
<tbody>
Délimite le corps du tableau, sa partie principale
<tr>
Délimite une ligne du tableau
<th>
Délimite une cellule spéciale du tableau, qui conviendra pour écrire un nom de colonne ou de ligne
<td>
Délimite une cellule du tableau

Références