Niveau : Confirmé

Le modèle tabulaire en CSS

Tutoriel par (Intégrateur du Dimanche, Strasbourg)
Créé le (21996 lectures)
Tags : tableau, vertical, table, vertical-align

Sommaire


Propriétés spécifiques, distribution et alignements

Autres propriétés spécifiques aux tableaux

À l’instar de table-layout, certaines autres propriétés CSS sont spécifiques aux éléments de tableaux. Il s’agit de border-collapse, border-spacing, empty-cells et caption-side.

border-collapse
Comme c’est le cas pour les tableaux HTML, la propriété border-collapse détermine si les bordures de la table et entre les cellules doivent être séparées (valeur separate) ou fusionnées (valeur collapse).
border-spacing
La propriété CSS border-spacing, reconnue à partir d’Internet Explorer 8 (et équivalente à l’attribut HTML cellspacing devenu obsolète), spécifie la distance qui sépare les bordures de cellules adjacentes.
Lorsque deux valeurs sont renseignées, la première désigne l’espacement horizontal et la deuxième le vertical. La valeur de cette propriété devient automatiquement nulle lorsque border-collapse a pour valeur collapse.
empty-cells
La propriété empty-cells (à ne pas confondre avec le sélecteur CSS 3 :empty) gère l’affichage des cellules vides : la valeur hide masque les bordures de la cellule.
Lorsque cette propriété est appliquée au sein d’une table ne comportant qu’une seule rangée, les cellules vides disparaissent complètement et les autres cellules se réorganisent sans elles. Cette propriété est prise en compte à partir d’Internet Explorer 8 et chez les autres navigateurs, bien entendu.
caption-side
Cette propriété, reconnue elle aussi depuis IE8, indique la position de la boîte de la légende en fonction de celle de la table. Les valeurs acceptées sont top (par défaut) et bottom, mais aussi left et right, même si ces dernières ne sont actuellement comprises que par Firefox.
div {
	display: table;
	caption-side: bottom;
}

border1

border2

Distribution par défaut

La disposition des éléments d’un tableau se fait sous la forme d’un quadrillage composé de rangées et de colonnes.

Les éléments internes d’une table n’ont pas de marges externes (margin), et les éléments de rangées ne disposent pas non plus de marges internes (padding).

Distribution verticale

Les rangées remplissent l’ensemble de la table, du haut vers le bas dans l’ordre de leur apparition dans le code source.

Chaque cellule d’une même rangée s’adapte automatiquement à la hauteur de la cellule la plus haute, pour occuper toute la hauteur de la rangée.

height

Distribution horizontale

Les cellules d’une rangée remplissent l’ensemble de l’espace de leur rangée, de la gauche vers la droite dans l’ordre d’apparition dans le code HTML (sauf si la propriété direction est appliquée sur le tableau).

Une cellule ne peut pas recouvrir une autre cellule et ne peut pas s’étendre au-delà de sa rangée.

repartition

repartition2

repartition3

Alignement vertical

Les cellules de tableau HTML (<td>) sont réputées pour bénéficier d’un avantage tenant du Saint Graal du concepteur web : pouvoir appliquer la propriété vertical-align et en tirer toutes les vertus en termes d’alignement vertical des contenus.

Qu’à cela ne tienne ! vertical-align est parfaitement adéquate pour le modèle tabulaire CSS et peut être affectée à un élément en display: table-cell pour en aligner le contenu.

Un vieux rêve d’intégrateur web se réalise sous nos yeux : celui de pouvoir intuitivement centrer verticalement n’importe quel élément en HTML.

div {
	display: table-cell;
	vertical-align: middle;
}

vertical-align

Les valeurs acceptées pour l’alignement vertical sont :

baseline
La ligne de base de la cellule se place à la même hauteur que celle de la première rangée dans laquelle celle-ci s'étend.
top
Le haut de la boîte de la cellule s'aligne sur le haut de la première rangée dans laquelle celle-ci s'étend.
bottom
Le bas de la boîte de la cellule s'aligne sur celui de la dernière rangée dans laquelle celle-ci s'étend.
middle
Le milieu de la cellule s'aligne sur celui des rangées dans lesquelles celle-ci s'étend.
sub, super, text-top, text-bottom
Ces valeurs ne s'appliquent pas aux cellules ; pour ces valeurs, la cellule s'aligne sur la ligne de base (baseline) à la place.

Plus d’informations : http://www.alsacreations.com/astuce/lire/4-alignement-vertical-image-texte.html

Commentaires

XdiZ a dit le

Bien présenté, bien écrit, super agréable à lire. Merci d'avoir rempli ma tête d'informations que j'ignorais totalement.

rodolpheb a dit le

Merci Raphaël de mettre encore et toujours ses compétences au service des autres.

rodolpheb a dit le

Je ne comprends pas l'utilité des pseudo-éléments? Dans quels cas peut-on y avoir recours.

Raphael a dit le

Il y a mille et un usages possibles des pseudo-éléments, en voici un par exemple : codepen.io/raphaelgoetter/pen/dGxvL

rodolpheb a dit le

Merci Raphaël.
Voilà au moins un usage, pour les mille autres, je garderai l'oeil ouvert.:)
Bon week-end.

Ten a dit le

Bonjour et merci pour cet article très instructif !!
J'ai une question sur un des points : les propriétés "display: table-header-group" par exemple - dont la position dans le flux semble puissante - peut elle être utilisée dans le cadre d'une chorégraphie de contenus telle qu'imaginée par Trent Walton ?

La compatibilité mobile de ces propriétés est excellente, et ce pourrait être une ingénieuse solution à certaines questions existentielles des intégrateurs en ce moment !

Merci pour la lecture en tout cas, les détails sont croustillants comme on aime !

cynic- a dit le

... quid des webmails et outils tels que Thunderbird, Outlook, Mail (macOs) ? Faut-il garder nos vieux tableaux pour les newsletters ?

jojaba a dit le

Pour ceux qui voudraient une version pdf (bricolée) de ce tuto, c'est par là : http://perso.jojaba.fr/Web-utilisation-develo... ;)

Raphael a dit le

@Ten : en effet, de belles choses sont promises à ces valeurs de table qui modifient l'ordre d'affichage (en attendant flexbox bien plus poussé dans ce domaine). Mais attention à l'accessibilité de ces techniques !

@cynic- : les clients mails sont toujours aussi réfractaires aux styles CSS "évolués", il faut donc toujours se fier aux "vrais" tableaux HTML pour eux :(

Ten a dit le

Je ne suis pas expert en accessibilité mais je sens que ça va être mon nouveau seau dans le bac à sable, c'est l'occasion d'apprendre !!

Merci pour la réponse éclairée.