Designer des tableaux clairs et efficaces

Tout Knowledge Worker se retrouve régulièrement face à des tableurs et des tableaux. Pourtant on rencontre très, trop fréquemment des tableaux qui rendent l’information encore plus complexe à appréhender que dans sa forme initiale.

Tableau ou graphique, quelle forme pour quel usage ?

Avant de choisir une forme praticulière, il est nécessaire de raisonner en terme d’usage.

Pour tous les sujets de visualisation de l’information, Edward Tufte est l’auteur de référence. Ses travaux de recherche avancés dans sa thèse “The Visual Display of Quantitative Information” ont posés un standard.

The conventional sentence is a poor way to show more than two numbers because it prevents comparisons within the data. [He illustrates with an example sentence] : “Nearly 53 percent of the type A group did something or other compared to 46 percent of B and slightly more than 57 percent of C.” Arrange the type to facilitate comparisons, as in this text-table :
Group A 53%
Group B 46%
Group C 57%
There are nearly always better sequences than alphabetical, for example, ordering by content or by data values :
Group B 46%
Group A 53%
Group C 57%
Tables are preferable to graphics for many small data sets. A table is nearly always better than a dumb pie chart

TUFTE, Edward. The Visual Display of Quantitative Information, SECOND EDITION. 2001

Les tableaux sont plus adaptés pour présenter des valeurs, les comparer ou présenter des unités de mesure multiples. A contrario, les graphiques, sont plus adaptés pour démontrer les tendances, anomalies et relations.

Charlie Munger, le bras droit de Warren Buffet chez Berkshire Hathaway, a passé de nombreuses années à s’intéresser à l’ancrage des concepts mathématiques dans les systèmes biologiques et psychologiques. Il explique que les graphiques assemblent les nombres dans une forme qui ressemble au mouvement. Cette représentation du mouvement nous accroche en faisant appel à nos sens primaires.

At any rate, mankind invented a system to cope with the fact that we are so intrinsically lousy at manipulating numbers. It’s called the graph. Oddly enough, it came out of the Middle Ages. It’s the only intellectual invention of the monks during the Middle Ages. I know of that’s worth a damn. The graph puts numbers in a form that looks like motion. So it’s using some of this primitive neural stuff in your system in a way that helps you understand it.

MUNGER, Charlie. Poor Charlie’s Almanack : The Essential Wit and Wisdom of Charles T. Munger. Talk 3 : A Lesson on Elementary, Worldly Wisdom as It Relates to Investment Management and Business, Revisited. Stripe Press, 2023

Dans sa thèse, Edward Tufte évoque lui aussi l’histoire et l’intérêt des graphiques :

William Playfair (1759-1823), a Scottish political economist, made the first known time-series using economic data. […] Playfair contrasted his new graphical method with the tabular presentation of data: “Information […] is generally imperfectly retained; and a man who has carefully investigated a printed table, finds, when done, that he has only a very faint and partial idea of what he has read; and that like a figure imprinted on sand, is soon totally erased and defaced. Upon that these Charts were made; and, while they give a simple and distinct idea, they are as near perfect accuracy as is any way useful. On inspecting any one of these Charts attentively, a sufficiently distinct impression will be made, to remain unimpaired for a considerable time, and the idea which does remain will be simple and complete.” For Playfair, graphics were preferable to tables because graphics showed the shape of the data in a comparative perspective.

TUFTE, Edward. The Visual Display of Quantitative Information. 1983

Les graphiques montrent la forêt là où les tableaux montrent les arbres.

Règles générales de mise en forme d’un tableau

Le tableau ci-dessus est difficile à appréhender de par sa mise en forme. Il véhicule une impression de complexité visuelle alors qu’il présente des informations plutôt simples.

Quels défauts peut-on identifier ?

• l’intégralité des bordures sont présentes
• une alternance de couleurs sur chaque ligne
• les étiquettes de colonne sont centrées et alignées vers le bas avec un espacement jusqu’en haut de la case conséquent
• tous les textes et nombres sont centrés
• du contenu est répété en série

De manière générale, les règles suivantes s’appliquent pour les tableaux :

• plus il y a de bordures et plus le tableau est complexe à appréhender
• plus il y a de couleurs différentes et plus le tableau est complexe à appréhender
• le texte doit toujours être ferré selon le sens d’écriture de la langue
• les nombres doivent toujours être alignés à droite pour faciliter leur lecture (compréhension facilitée des structures de nombres)
• les étiquettes de colonnes doivent toujours être alignées avec le contenu de leur colonne
• on regroupe les cellules similaires pour éviter les répétitions
• les bordures sont souvent superflues car l’alignement suffit à discerner les relations entre les items
• un saut de ligne dans un tableau peut être plus efficace qu’une bordure pour espacer des groupes de données
• étirer un tableau sur toute la largeur de la page ne sert à rien, il en va de même pour le fait de donner la même largeur à toutes les colonnes, c’est le contenu qui détermine la taille
• alignement vertical : pour éviter que le contenu d’une cellule “flotte” par rapport à une cellule plus densément remplie, on aligne le contenu des cellules suivantes sur la baseline de la première la cellule la plus à gauche

L’agence de visualisation de données Dark Horse Analytics avait partagé une série de billets de blog en 2014 intitulée “Data Looks Better Naked”.

Voici le traitement qu’ils ont appliqués au tableau pour le rendre plus lisible :

Un autre exemple de traitement dataviz de tableau :

On peut noter :

• le fait de remplacer les 0 répétés par des tirets pour supprimer de la charge visuelle
• la mise en évidence des titres via une mise en majuscule plutôt que d’utiliser du gras ou des couleurs fortes
• le placement de total en haut plutôt qu’en pied de tableau pour prioriser l’information

Au sujet des tableaux, Eward Tufte donne quatre principes :

• Above all else show the data.
• Maximize the data-ink ratio.
• Erase non-data-ink.
• Erase redundant data-ink.

Le concept de data-ink est introduit par Tufte comme étant le ‘non-erasable core of the graphic’ : le ratio de pixels utilisés pour présenter les données à rebours de ceux utilisés pour la mise en forme.

Tufte a également documenté un travail de re-design de tableau pour les tables d’horaires d’une ligne de chemin de fer américaine.

Construire des <table> lisibles et clairs en HTML CSS

Le HTML

L’élément <table> englobe le contenu. A l’intérieur on retrouve <thead> qui contient les étiquettes de colonne. <tbody> contient le corps du tableau. Une ligne est construite à partir de <tr> qui contient elle même l’étiquette de la ligne <th> et la donnée associée <td>. Pour afficher un total ou un élément résumant le tableau en pied de tableau il est possible d’utiliser l’élément englobant <tfoot>. Pour titrer le tableau on utilise l’élément <caption> en premier descendant de l’élément <table>.

<table>
	<caption>Indices obligataires France Allemagne</caption>
 	<thead>
		<tr>
			<th scope="column">Pays</th>
			<th scope="column">OAT</th>
		</tr>
 	</thead>
	<tbody>
    <tr>
      <th>
        France
      </th>
      <td>
        3.42
      </td>
    </tr>
    <tr>
      <th>
        Allemagne
      </th>
      <td>
        2.63
      </td>
    </tr>
	</tbody>
	<tfoot>
    <tr>
      <th>
        Spread
      </th>
      <td>
        0.79
      </td>
    </tr>
	</tfoot>
</table>

Le CSS

Le style par défaut appliqué par le navigateur est :

table {
display: table;
border-spacing: 2px;
border-collapse: separate;
box-sizing: border-box;
text-indent: 0;
}

Il est important de ne pas modifier la propriété diplay: table sous peine de rendre le tableau inaccessible pour les utilisateurs de technologies d’assistance.

Les bordures

Par défaut, chaque case du tableau à ses quatre bordures matérialisées et les cases sont séparées les unes des autres car le navigateur attribut un style par défaut pour la table avec la propriété border-collapse qui prend pour valeur separate.

La valeur collapse permet de partager les bordures, ce qui est beaucoup plus courant dans les tableaux que l’on voit tous les jours.

Gérer le dépassement de contenu

Pour éviter que le tableau soit trop grand pour le dimensionnement qui lui est réservé, il peut être judicieux d’appliquer la propriété overflow: scroll à l’élément qui wrap le tableau afin de permettre un défilement au scroll en cas de dépassement.

<div style="overflow: scroll;">
	<table>
	</table>
</div>

Rendre les en-têtes de colonne ou un volet du tableau “sticky”

thead {
  position: sticky;/*l'élément glisse désormais dans l'espace contenu par son ancêtre direct*/
  top: 0.1rem;/*obligatoire de choisir si l'élément est sicky à partir du top, bottom, right ou left, ici je choisis de coller au haut du tableau en décalent légèrement le thead pour ne pas coller la barre du navigateur */
}

Pour figer le premier volet d’un tableau à double entrée sur l’axe horizontal, l’approche est un peu différente, on rend sticky les premiers <th> descendants de chaque <tr> :

th:first-child {
	position: sticky;
	left: 0;
	border-inline-end: none;
}

Alignement vertical à l’intérieur des cellules

Quand les colonnes deviennent plus étroites cela a pour effet de wrapper le texte de la colonne contenant le plus de texte. Le contenu de la cellule la moins large flotte au centre vertical de la cellule. On souhaite plutôt aligner le contenu sur la première ligne de texte de la ligne via la valeur baseline.

th,
td {
	vertical-align: baseline;
}

Cohérence typographique

Dans certaines typographies, les chiffres ont des largeurs différentes, on souhaite plutôt avoir la même largeur pour chaque chiffre afin de préserver la structures des nombres. Pour cela, on utilise la propriété CSS : font-variant-numeric: tabular-nums.

Rendre le tableau responsive sur mobile

L’étroitesse du contenu affiché sur mobile oblige à repenser le tableau. En effet, sur mobile le tableau va rapidement s’allonger en hauteur et l’on en souhaite pas que l’utilisateur ne sache pas à quelle en-tête de colonne correspond la donnée contenue dans la cellule. Une solution peut être d’afficher les en-têtes de colonne en les répétant à côté de chaque donnée de cellule.

On ne prend ici en considération que le cas de <table> générées à partir de Markdown, elles n’ont donc que des en-têtes de colonnes et ne peuvent avoir d’en-tête de ligne car Markdown ne supporte pas les tableaux à double entrée. En Markdown il n’est également pas possible de regrouper plusieurs cellules entre elles alors qu’il est possible de le faire en HTML via l’attribut rowspan ou colspan.

Techniquement, on souhaite que les en-têtes de colonne <th> contenus dans <thead> soient réinjectés dans le corps du tableau. On crée un script en Javascript en ce sens :

const displayTableForMobile = function () {
  document.querySelectorAll("table").forEach((table) => {
    const allTh = table.querySelectorAll("thead th");
    let allRows = table.querySelectorAll("tbody tr");
    allRows.forEach((row) => {
      const allTd = row.querySelectorAll("tbody tr td");
      allTd.forEach((td, index) => {
        const text = allTh[index] ? allTh[index].textContent : "";
        td.setAttribute("data-cell", text);
      });
    });
  });
};
displayTableForMobile();

Pour chaque table sélectionnée, on sélectionne tous les en-têtes de colonne ainsi que toutes les lignes du corps de tableau. Pour chaque ligne sélectionnée, on sélectionne chaque cellule. Pour chaque cellule, on instancie une constante text qui raccroche l’en-tête de colonne et on la place dans un attribut HTML custom data-cell.

Puis on a nécessairement besoin de CSS pour afficher le contenu de l’attribut data-cell avant le contenu de la cellule :

/*---RESPONSIVE TABLES ON MOBILE : pour que ça fonctionne nécessaire que chaque td ait un attribut 'data-cell' qui soit égal au th de sa colonne, par exemple : th "job-title", td doit être <td data-cell="job-title">---*/
@media (width < 800px) {
  th {
    display: none;
  }
  td {
    display: grid;
    grid-template-columns: 33dvw auto;
    word-wrap: anywhere;
  }
  td::before {
    content: attr(data-cell);
  }
}

Sources

https://simplexct.com/data-ink-ratio-tables

https://www.darkhorseanalytics.com/blog/

https://piccalil.li/blog/styling-tables-the-modern-css-way/

https://practicaltypography.com/grids-of-numbers.html

https://book.webtypography.net/Web-Typography_Numerals-and-tables.pdf