Atelier - Construire un tableau simple et accessible

<h5>
Prix des vis, clous, boulons et bagues
</h5>
<table border="1" cellspacing="0" cellpadding="5">
	<tr>
		<td><strong>Article</strong></td>
		<td><strong>Vis filetées</strong></td>
		<td><strong>Clous plats</strong></td>
		<td><strong>Boulons</strong></td>
		<td><strong>Bagues</strong></td>
	</tr>
	<tr>
		<td><strong>Prix d'un kilogramme</strong></td>
		<td>2,5 €</td>
		<td>3,5 €</td>
		<td>4,5 €</td>
		<td>2,5 €</td>
	</tr>
	<tr>
		<td><strong>Prix d'une livre</strong></td>
		<td>2 €</td>
		<td>3 €</td>
		<td>4 €</td>
		<td>2 €</td>
	</tr>
</table>

Prix des vis, clous, boulons et bagues

Étape n° 1 - Ajout d'un résumé

<h5>
Prix des vis, clous, boulons et bagues
</h5>
<table summary="Tableau des prix par kilogramme ou par livre 
des vis, clous, boulons et bagues" 
border="1" cellspacing="0" cellpadding="5">
	<tr>
		<td><strong>Article</strong></td>
		<td><strong>Vis filetées</strong></td>
		<td><strong>Clous plats</strong></td>
		<td><strong>Boulons</strong></td>
		<td><strong>Bagues</strong></td>
	</tr>
	<tr>
		<td><strong>Prix d'un kilogramme</strong></td>
		<td>2,5 €</td>
		<td>3,5 €</td>
		<td>4,5 €</td>
		<td>2,5 €</td>
	</tr>
	<tr>
		<td><strong>Prix d'une livre</strong></td>
		<td>2 €</td>
		<td>3 €</td>
		<td>4 €</td>
		<td>2 €</td>
	</tr>
</table>

Prix des vis, clous, boulons et bagues

Étape n° 2 - Ajout d'une légende

<table summary="Tableau des prix par kilogramme ou par livre 
des vis, clous, boulons et bagues"
border="1" cellspacing="0" cellpadding="5">
<caption>Prix des vis, clous, boulons et bagues</caption>
	<tr>
		<td><strong>Article</strong></td>
		<td><strong>Vis filetées</strong></td>
		<td><strong>Clous plats</strong></td>
		<td><strong>Boulons</strong></td>
		<td><strong>Bagues</strong></td>
	</tr>
	<tr>
		<td><strong>Prix d'un kilogramme</strong></td>
		<td>2,5 €</td>
		<td>3,5 €</td>
		<td>4,5 €</td>
		<td>2,5 €</td>
	</tr>
	<tr>
		<td><strong>Prix d'une livre</strong></td>
		<td>2 €</td>
		<td>3 €</td>
		<td>4 €</td>
		<td>2 €</td>
	</tr>
</table>

Prix des vis, clous, boulons et bagues
Article	Vis filetées	Clous plats	Boulons	Bagues
Prix d'un kilogramme	2,5 €	3,5 €	4,5 €	2,5 €
Prix d'une livre	2 €	3 €	4 €	2 €

Étape n° 3 - Balisage de l'entête de tableau (thead) de de son corps (tbody)

<table summary="Tableau des prix par kilogramme ou par livre 
des vis, clous, boulons et bagues"
border="1" cellspacing="0" cellpadding="5">
<caption>Prix des vis, clous, boulons et bagues</caption>
	<thead>
		<tr>
			<td><strong>Article</strong></td>
			<td><strong>Vis filetées</strong></td>
			<td><strong>Clous plats</strong></td>
			<td><strong>Boulons</strong></td>
			<td><strong>Bagues</strong></td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><strong>Prix d'un kilogramme</strong></td>
			<td>2,5 €</td>
			<td>3,5 €</td>
			<td>4,5 €</td>
			<td>2,5 €</td>
		</tr>
		<tr>
			<td><strong>Prix d'une livre</strong></td>
			<td>2 €</td>
			<td>3 €</td>
			<td>4 €</td>
			<td>2 €</td>
		</tr>
	</tbody>
</table>

Prix des vis, clous, boulons et bagues
Article	Vis filetées	Clous plats	Boulons	Bagues
Prix d'un kilogramme	2,5 €	3,5 €	4,5 €	2,5 €
Prix d'une livre	2 €	3 €	4 €	2 €

Étape n° 4 - Spécification des cellules d'entête (th)

<table summary="Tableau des prix par kilogramme ou par livre 
des vis, clous, boulons et bagues" 
border="1" cellspacing="0" cellpadding="5">
<caption>Prix des vis, clous, boulons et bagues</caption>
	<thead>
		<tr>
			<th>Article</th>
			<th>Vis filetées</th>
			<th>Clous plats</th>
			<th>Boulons</th>
			<th>Bagues</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Prix d'un kilogramme</th>
			<td>2,5 €</td>
			<td>3,5 €</td>
			<td>4,5 €</td>
			<td>2,5 €</td>
		</tr>
		<tr>
			<th>Prix d'une livre</th>
			<td>2 €</td>
			<td>3 €</td>
			<td>4 €</td>
			<td>2 €</td>
		</tr>
	</tbody>
</table>

Prix des vis, clous, boulons et bagues
Article	Vis filetées	Clous plats	Boulons	Bagues
Prix d'un kilogramme	2,5 €	3,5 €	4,5 €	2,5 €
Prix d'une livre	2 €	3 €	4 €	2 €

Étape n° 5 - Ajout des attributs "id" et "headers"

<table summary="Tableau des prix par kilogramme ou par livre 
des vis, clous, boulons et bagues"
border="1" cellspacing="0" cellpadding="5">
<caption>Prix des vis, clous, boulons et bagues</caption>
	<thead>
		<tr>
			<th>Article</th>
			<th id="vis">Vis filetées</th>
			<th id="clous">Clous plats</th>
			<th id="boulons">Boulons</th>
			<th id="bagues">Bagues</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="kilo">Prix d'un kilogramme</th>
			<td headers="clous kilo">2,5 €</td>
			<td headers="clous kilo">3,5 €</td>
			<td headers="boulons kilo">4,5 €</td>
			<td headers="bagues kilo">2,5 €</td>
		</tr>
		<tr>
			<th id="livre">Prix d'une livre</th>
			<td headers="vis livre">2 €</td>
			<td headers="clous livre">3 €</td>
			<td headers="boulons livre">4 €</td>
			<td headers="bagues livre">2 €</td>
		</tr>
	</tbody>
</table>

Prix des vis, clous, boulons et bagues
Article	Vis filetées	Clous plats	Boulons	Bagues
Prix d'un kilogramme	2,5 €	3,5 €	4,5 €	2,5 €
Prix d'une livre	2 €	3 €	4 €	2 €

Étape n°6 - Ajout des résumés d'entêtes (abbr)

<table summary="Tableau des prix par kilogramme ou par livre 
des vis, clous, boulons et bagues"
border="1" cellspacing="0" cellpadding="5">
<caption>Prix des vis, clous, boulons et bagues</caption>
	<thead>
		<tr>
			<th>Article</th>
			<th id="vis" abbr="vis">Vis filetées</th>
			<th id="clous" abbr="clous">Clous plats</th>
			<th id="boulons" abbr="boulons">Boulons</th>
			<th id="bagues" abbr="bagues">Bagues</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="kilo">Prix d'un kilogramme</th>
			<td headers="clous kilo">2,5 €</td>
			<td headers="clous kilo">3,5 €</td>
			<td headers="boulons kilo">4,5 €</td>
			<td headers="bagues kilo">2,5 €</td>
		</tr>
		<tr>
			<th id="livre">Prix d'une livre</th>
			<td headers="vis livre">2 €</td>
			<td headers="clous livre">3 €</td>
			<td headers="boulons livre">4 €</td>
			<td headers="bagues livre">2 €</td>
		</tr>
	</tbody>
</table>

Partie 4 - L'accessibilité

Construire un tableau simple et accessible

Le balisage non accessible

Prix des vis, clous, boulons et bagues

Étape n° 1 - Ajout d'un résumé

Prix des vis, clous, boulons et bagues

Étape n° 2 - Ajout d'une légende

Étape n° 3 - Balisage de l'entête de tableau (`thead`) de de son corps (`tbody`)

Étape n° 4 - Spécification des cellules d'entête (`th`)

Étape n° 5 - Ajout des attributs "`id`" et "`headers`"

Étape n°6 - Ajout des résumés d'entêtes (`abbr`)

Partie 4 - L'accessibilité

Construire un tableau simple et accessible

Le balisage non accessible

Prix des vis, clous, boulons et bagues

Étape n° 1 - Ajout d'un résumé

Prix des vis, clous, boulons et bagues

Étape n° 2 - Ajout d'une légende

Étape n° 3 - Balisage de l'entête de tableau (thead) de de son corps (tbody)

Étape n° 4 - Spécification des cellules d'entête (th)

Étape n° 5 - Ajout des attributs "id" et "headers"

Étape n°6 - Ajout des résumés d'entêtes (abbr)

Étape n° 3 - Balisage de l'entête de tableau (`thead`) de de son corps (`tbody`)

Étape n° 4 - Spécification des cellules d'entête (`th`)

Étape n° 5 - Ajout des attributs "`id`" et "`headers`"

Étape n°6 - Ajout des résumés d'entêtes (`abbr`)