Le tableau HTML, ce grand incompris
Diabolisé depuis des années pour ses problèmes de sémantique, d’accessibilité et de performances notamment, le tableau HTML de mise en page est aujourd’hui le vilain canard de la conception web, tant et si bien qu’on n’ose même plus l’employer pour ce dont il est fait : des données tabulaires.
(C’est aussi un peu pour ça que je me suis amusé à présenter un atelier à contre-courant lors de Paris-Web 2011 : “Vive les tableaux de mise en page”.)
On lui prête tous les maux de la terre, et je rencontre souvent ce genre d’observations :
Le gros problème avec les tableaux HTML, c’est qu’il est difficile, voire impossible, de déterminer leur largeur puisque tout dépend du contenu de chaque cellule !
Cette observation est fausse. Ou plutôt, elle montre une grosse lacune dans nos connaissances du modèle de rendu tabulaire : on peut parfaitement fixer la largeur d’un tableau ou de ces cellules indépendamment de leurs contenus.
Un tableau, souvenez-vous
Un tableau (de données ou de mise en page), ce n’est pas très compliqué : c’est (au minimum) composé de cellules (td, th) dans des rangées (tr), le tout dans un conteneur (table).
Venons-en tout de suite à notre expérience.
- j’indique à mon tableau qu’il doit disposer d’une largeur de 300 pixels : table {width: 300px}
- pour assurer mon coup, je précise également une largeur de 100 pixels à chacune de ses trois cellules : td {width: 100px}
Jusque là tout va bien : au final, mon tableau occupe bien 300px de large, comme souhaité et ses trois cellules se répartissent harmonieusement.
Rendu par défaut
Les choses se compliquent dès lors que le contenu d’une des cellules est plus large que la valeur indiquée. Par exemple, si je place une image large (de 200 pixels) au sein de la première cellule dont la largeur définie en CSS est de 100 pixels, le comportement observé est le suivant :
En clair : l’image large “pousse” sa cellule parente, cette dernière occupe 200px de large contrairement aux indications faites dans les styles CSS, et les deux autres cellules se répartissent dans l’espace restant.
C’est le comportement par défaut d’une table. Et c’est généralement le seul connu par les concepteurs web.
table-layout: fixed
Il existe cependant un second mode d’affichage des tableaux, malheureusement oublié depuis longtemps.
Le modèle de rendu d’un tableau est déterminé par la propriété table-layout, définie en CSS2 depuis… pfiou, bien longtemps !
La valeur par défaut de table-layout est “auto”, ce qui indique que le contenu est roi : c’est lui qui décide de la largeur des cellules. Mais si vous appliquez la valeur “fixed” à la propriété table-layout, alors c’est vous qui déciderez : les largeurs seront au final celles que vous aurez fixées dans vos CSS :
En mode de rendu “table-layout: fixed”, les largeurs des cellules peuvent être figées en CSS, les contenus excédentaires déborderont alors de leur parent, le cas échéant.
Et en plus, ça fonctionne partout !
Cette propriété reconnue depuis… IE5.5 (!) offre la possibilité de définir très précisément les dimensions des cellules et du tableau, sans avoir de surprises selon le contenu, mais aussi d’accélérer les performances d’affichage du navigateur et de gérer les débordements de texte ou de médias, par exemple sur des écrans de petite taille.
Dans la plupart des cas, table-layout: fixed, c’est que du bonheur…
PS : je vous ai déjà dit qu’il y avait plein de facettes mal connues des tableaux ? :)
