Les en-têtes de tableaux en Responsive Design

Publié par Fabrice le 07 novembre 2016, temps de lecture estimé : 5 minutes Webmastering

Les en-têtes de tableaux en Responsive Design

Les tableaux ne sont pas morts et sont même toujours très utiles. Ainsi, pour améliorer la lisibilité et l'expérience utilisateur sur mobile, il est important de faire correspondre les en-têtes et les données. Petite expérience avec deux méthodes.

L'une des problématiques lorsque l'on utilise des tableaux en responsive design, c'est la correspondance entre les en-têtes et les données. L'illustration, 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. 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); 
	}	
}