IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Glossaire des propriétés CSS


précédentsommairesuivant

V. Propriétés de mise en forme des tableaux

V-A. Type de bordure | border-collapse

border-collapse : permet de définir l'affichage des bordures des cellules d'un tableau.

Syntaxe : collapse | separate | inherit

Compatibilité : IE complète 8 - partielle 5 à 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Version CSS : 2.1

  • collapse : les bordures du tableau et des cellules sont unifiées ;
  • separate : les bordures du tableau et des cellules sont distinctes (par défaut) ;
  • inherit : la valeur est reprise du parent. Non supportée par Internet Explorer (IE 9 compris).
 
Sélectionnez
border-collapse: collapse;
border-collapse: separate;
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Voir la source
Cacher/Afficher le codeSélectionnez

V-B. Cellules vides | empty-cells

empty-cells : permet d'afficher ou masquer les cellules vides. Ne fonctionne que si les bordures des cellules sont distinctes.

Syntaxe : hide | show | inherit

Compatibilité : IE complète 8 (si un doctype est déclaré) - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Version CSS : 2.1

  • hide : les bordures des cellules vides sont masquées (par défaut) ;
  • show : les bordures des cellules vides sont affichées.
 
Sélectionnez
empty-cells: hide;
empty-cells: show;
Cellule 1 Cellule 2
Cellule 3
Cellule 1 Cellule 2
Cellule 3
Voir la source
Cacher/Afficher le codeSélectionnez

V-C. Position du titre | caption-side

caption-side : permet de définir la position du titre pour le tableau.

Syntaxe : top | bottom | inherit

Compatibilité : IE 8+ (si un doctype est déclaré), FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

Version CSS : 2.1

  • top : le titre sera en haut du tableau (par défaut) ;
  • bottom : le titre sera en bas du tableau.
 
Sélectionnez
caption-side: top;
caption-side: bottom;
Titre du tableau
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Titre du tableau
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Voir la source
Cacher/Afficher le codeSélectionnez

V-D. Affichage des cellules | table-layout

table-layout : permet de définir la façon dont les cellules d'un tableau se comportent.

Syntaxe : inherit | auto | fixed

Compatibilité : IE 5+, FF 1.0+, Chrome, Safari 1.0+, Opera 7+

Explication.
inherit/auto : la largeur dépend du contenu et de l'algorithme utilisé par le navigateur.
fixed : la largeur est fixe et dépend soit de la largeur de la première ligne si aucune dimensions n'est spécifiée, soit des dimensions spécifiées. À noter que si le contenu des lignes est supérieur en terme d'espace, les cellules adoptent un overflow automatiquement.

Version CSS : 2.1

Exemple :

Cellule 1 Lorem ipsum dolore sit amet, consectetur adipiscing elit
Cellule 3 Cellule 4
Lorem ipsum dolore sit amet, consectetur adipiscing elit Cellule 2
Lorem ipsum dolore sit amet, consectetur adipiscing elit Lorem ipsum dolore sit amet, consectetur adipiscing elit Cellule 4
Voir la source
Cacher/Afficher le codeSélectionnez

V-E. Espacement des cellules | border-spacing

border-spacing : permet de définir l'espacement enter les cellules. Ne fonctionne que si les cellules sont séparées (border-collapse: separate). Cette propriété est équivalente à l'attribut de présentation cellspacing en HTML.

Syntaxe : inherit | <longueur> | <longueur> <longueur>

Compatibilité : IE 7+, FF 1.0+, Chrome, Safari 1.0+, Opera 6+

Note : indiquez de une à deux valeurs à la suite. Selon le nombre de valeurs, la signification change :
une valeur : espacement horizontaux et verticaux ;
deux valeurs : la première longueur indique l'espacement horizontal (espace entre deux cellules de colonnes adjacentes), la seconde longueur indique l'espacement vertical (espace entre deux cellules d'une même colonne).

Version CSS : 2.1

Exemple :

Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Voir la source
Cacher/Afficher le codeSélectionnez

précédentsommairesuivant

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.