Niveau Niveau confirmé

Le modèle tabulaire en CSS

Tutorielcss

Publié par Raphael le 30 Décembre 2012 (32411 lectures)

Sommaire

Introduction, compatibilité et valeurs de display
En action et algorithme de calcul des tableaux
Propriétés spécifiques, distribution et alignements
Flux, éléments anonymes, positionnements et accessibilité
Conclusion, ressources et démonstrations en ligne

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