Les tableaux

Nous traitons ici seulement des propriétés spécifiques à l'élément table. Les propriétés qui s'appliquent aussi à d'autres types d'éléments (cadre, couleur de fond, … ) sont vues ailleurs. Dans ce qui suit, la valeur inherit pour une propriété indique que la valeur doit être héritée de l'élément parent. Si une valeur apparait en caractères gras dans un tableau, c'est qu'il s'agit de la valeur par défaut.

Propriétés spécifiques aux tableaux

Prénom Nom Téléphone
John Doe 123-4567
Machin Chose 890-1234
What Hisname 567-8901
Fig. 1. Exemple de tableau où les cellules
n'ont pas de cadre (comportement par défaut).
Prénom Nom Téléphone
John Doe 123-4567
Machin Chose 890-1234
What Hisname 567-8901
Fig. 2. On a ajouté un cadre de 1px aux
cellules et au tableau et utilisé la déclaration
border-spacing: 2px 4px;.
Prénom Nom Téléphone
John Doe 123-4567
Machin Chose 890-1234
What Hisname 567-8901
Fig. 3. On a ajouté un cadre de 1px aux
cellules et au tableau et utilisé la déclaration
border-collapse: collapse;.

Propriétés spécifiques aux tableaux
Propriété Valeurs possibles
border-collapse collapse | separate | inherit
border-spacing longueur (valeur par défaut : 0) | largeur hauteur | inherit
caption-side top | bottom | inherit
empty-cells show | hide | inherit
table-layout auto | fixed
vertical-align baseline | longueur | sub | super | top | text-top | middle | bottom | text-bottom | inherit

Le tableau à droite donne les propri­étés spécifiques aux tableaux et leurs valeurs pos­si­bles. Ces déclara­tions sont à inter­préter de la manière suivante :

border-collapse spécifie s'il doit y avoir un espace entre les cadres des cellules (separate) ou pas (collapse).

border-spacing spécifie les dis­tances horizontale et verticale entre cadres de cellules adjacentes. Il suffit de donner une seule distance si les deux valeurs sont égales. (L'information est ignorée si la valeur collapse est utilisée pour la propriété border-collapse.)

caption-side indique si on veut que la légende du tableau soit au-dessus (top) ou en-dessous (bottom).

empty-cells indique si on veut que les cellules vides apparaissent normalement (show) ou qu'on omette leur cadre et couleur d'arrière plan (hide).

table-layout permet, lorsqu'on utilise la valeur auto, de laisser le navigateur calculer la dimension des cellules. Lorsqu'on utilise la valeur fixed, si on ne fournit pas explicitement les largeurs des colonnes, le navigateur basera son calcul sur les cellules de la première ligne seulement.

vertical-align définit l'alignement vertical du contenu des cellules. On peut utiliser les valeurs top, middle et bottom, respectivement, pour aligner le contenu avec le haut, le milieu ou le bas de la cellule où il se trouve.

Accueil