CSS => les tables

Syntaxe

table-layout: auto | fixé;
effondrement des frontières: séparé | effondrer;
border-spacing: <longueur> | <longueur> <longueur>;
cellules vides: afficher | cacher;
côté légende: haut | bas;

Remarques

Ces propriétés s'appliquent aux deux éléments <table> (*) et HTML affichés sous forme d' display: table ou display: inline-table

(*) Les éléments <table> sont évidemment conçus de manière native par UA / navigers comme display: table

Les tables HTML sont sémantiquement valables pour les données tabulaires. Il n'est pas recommandé d'utiliser des tableaux pour la mise en page. Au lieu de cela, utilisez CSS.

mise en table

La propriété table-layout modifie l'algorithme utilisé pour la mise en page d'une table.

Ci-dessous un exemple de deux tables réglées sur la width: 150px :

La table de gauche a une disposition de table-layout: auto alors que celle de droite a une disposition de table-layout: fixed . Le premier est plus large que la largeur spécifiée (210 pixels au lieu de 150 pixels) mais le contenu convient. Ce dernier prend la largeur définie de 150px, que le contenu soit débordé ou non.

Valeur	La description
auto	Ceci est la valeur par défault. Il définit la disposition de la table à déterminer par le contenu de ses cellules.
fixé	Cette valeur définit la disposition de la table à déterminer par la propriété width fournie à la table. Si le contenu d'une cellule dépasse cette largeur, la cellule ne sera pas redimensionnée mais laissera le contenu déborder.

effondrement des frontières

La propriété border-collapse détermine si les bordures d'une table doivent être séparées ou fusionnées.

Ci-dessous un exemple de deux tables avec des valeurs différentes pour la propriété border-collapse :

La table de gauche a une border-collapse: separate tandis que celle de droite a un border-collapse: collapse .

Valeur	La description
séparé	Ceci est la valeur par défault. Il sépare les bords de la table.
effondrer	Cette valeur définit les bordures de la table à fusionner, plutôt que d'être distincte.

espacement des frontières

La propriété d' border-spacing détermine l'espacement entre les cellules. Cela n'a aucun effet sauf si border-collapse est défini pour se separate .

Ci-dessous un exemple de deux tables avec des valeurs différentes pour la propriété d' border-spacing :

La table de gauche a un border-spacing: 2px (valeur par défaut) tandis que celle de droite est border-spacing: 8px .

Valeur	La description
<longueur>	C'est le comportement par défaut, même si la valeur exacte peut varier d'un navigateur à l'autre.
<longueur> <longueur>	Cette syntaxe permet de spécifier des valeurs horizontales et verticales distinctes respectivement.

cellules vides

La propriété empty-cells détermine si les cellules sans contenu doivent être affichées ou non. Cela n'a aucun effet sauf si border-collapse est défini pour se separate .

Ci-dessous un exemple avec deux tables avec des valeurs différentes définies pour la propriété empty-cells :

La table de gauche a empty-cells: show alors que celle de droite a empty-cells: hide . Le premier affiche les cellules vides alors que le second ne les affiche pas.

Valeur	La description
montrer	Ceci est la valeur par défault. Il montre les cellules même si elles sont vides.
cacher	Cette valeur masque complètement une cellule s'il n'y a pas de contenu dans la cellule.

Plus d'information:

côté légende

La propriété caption-side détermine le positionnement vertical de l'élément <caption> dans une table. Cela n'a aucun effet si un tel élément n'existe pas.

Sous un exemple avec deux tables avec des valeurs différentes définies pour la propriété caption-side :

La table de gauche a une caption-side: top celle de droite a une caption-side: bottom .

Valeur	La description
Haut	Ceci est la valeur par défault. Il place la légende au-dessus de la table.
bas	Cette valeur place la légende sous la table.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

CSS
les tables

Recherche…