Les en-têtes de tableaux en Responsive Design

Fabrice Webmastering 5 mn

L’une des problématique lorsque l’on utilise des tableaux en responsive design, c’est la correspondance entre les en-têtes et les données. L’illustration ci-dessous, qui reprend une grille tarifaire assez simple, montre bien l’impossibilité pour l’internaute sur mobile de savoir à quoi correspondent les prix, puisque l’on y retrouve uniquement l’en-tête de ligne, l’en-tête de colonne étant masquée.
Illustration d'un tableau en Responsive Design

Pour répondre à cette problématique et améliorer l’expérience utilisateur, deux méthodes sont possibles : manuellement ou avec l’attribut data-.

Voici le code de base pour le tableau :


<table>
<caption>Tarifs de nos bonbons (sachet de 250 <abbr title="grammes">g</abbr>)</caption>	
	<thead>
		<tr>
			<th scope="col">Parfums</th>
			<th scope="col">Prix unitaire</th>
			<th scope="col">Prix au kilo</th>		
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">Bergamotte</th>
			<td>4.00 €</td>
			<td>16.00 €</td>
		</tr>
		<tr>
			<th scope="row">Mirabelle</th>
			<td>3.60 €</td>
			<td>14.40 €</td>
		</tr>
		<tr>
			<th scope="row">Violette</th>
			<td>3.20 €</td>
			<td>12.80 €</td>
		</tr>			
	</tbody>
</table>

Méthode manuelle :

Sur les « petits écrans », on rajoute l’en-tête avant le contenu de la cellule directement dans les CSS, c’est pratique pour de très petits tableaux, mais peu malléable dans le temps, puisqu’il faut rajouter une entrée dans la feuille de style pour chaque colonne du tableau !


@media (max-width: 768px) {
	table tbody th:after { 
		content: " :"; 
	}				
	table td:nth-child(2):before { 
		content: "Prix unitaire : "; 
	}
	table td:nth-child(3):before { 
		content: "Prix au kilo : "; 
	}
}

Attribut data- :

Avec l’attribut data-, il est plus facile de générer de grands tableaux avec beaucoup de données. Il suffit de rajouter data-title et son contenu sur chaque balise <td> et une seule entrée dans la feuille de style.


<table>
	[...]
		<tr>
			<th scope="row">Bergamotte</th>
			<td data-title="Prix unitaire : ">4.00 €</td>
			<td data-title="Prix au kilo : ">16.00 €</td>
		</tr>
	[...]			
</table>

Dans les CSS, le contenu de l’attribut data- est « récupéré » pour être affiché dans la cellule.


@media (max-width: 768px) {
	table tbody th:after { 
		content: " :"; 
	}				
	table td:before { 
		content: attr(data-title); 
	}	
}