Developpez.com - Développement Web
X

Choisissez d'abord la catégorieensuite la rubrique :


Les propriétés de tableaux

01/02/2003

Par giminik (Matthieu Petiot) (autres articles)
 

ü


1. border-collapse (CSS 2)
2. border-spacing (CSS 2)
3. caption-side (CSS 2)
4. empty-cells (CSS 2)
5. table-layout (CSS 2)


1. border-collapse (CSS 2)


Liste des navigateurs compatibles

  • Internet Explorer 5 et supérieurs
  • Netscape 6 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété détermine si les bords des cellules adjacentes doivent être fusionnées (en ignorant les marges) ou séparées. Cette propriété hérite de son parent. Elle s'applique à l'élément table. La valeur par défaut est separate.

Syntaxe et valeurs possibles
/* avec cellules séparées */ border-collapse : separate ; /* défaut */ /* avec cellules fusionnées */ border-collapse : collapse ;
Visualisez un exemple.


2. border-spacing (CSS 2)


Liste des navigateurs compatibles

  • Internet Explorer ne connait pas cette propriété
  • Netscape 6 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété ne s'applique que si border-collapse a été défini à separate. Elle indique l'espacement entre deux cellules. Si vous ne spécifiez qu'une seule valeur, celle-ci s'applique verticalement et horizontalement. Si vous spécifiez deux valeurs, la première est utilisée horizontalement et la seconde, verticalement. Cette propriété hérite de son parent. Elle s'applique à l'élément table. La valeur par défaut vaut 0.

Syntaxe et valeurs possibles
/* espacement de cellule de 10px */ border-spacing : 10 px ; /* espacement de 10px horizontalement et 5 verticalement */ border-spacing : 10px 5px ;
Visualisez un exemple.


3. caption-side (CSS 2)


Liste des navigateurs compatibles

  • Internet Explorer 5 et supérieurs
  • Netscape 6 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété sert à définir l'endroit où doit s'afficher la légende caption par rapport au tableau. Cette propriété hérite de son parent. Elle applique à l'élément table. Par défaut, la légende est placée au dessus du tableau.

Syntaxe et valeurs possibles
/* légende placée au dessus */ caption-side : top ; /* défaut */ /* légende placée au dessous */ caption-side : bottom ; /* légende placée à gauche */ caption-side : left ; /* légende placée à droite */ caption-side : right ;
Visualisez un exemple.


4. empty-cells (CSS 2)


Liste des navigateurs compatibles

  • Internet Explorer ne connait pas cette propriété
  • Netscape 6 et supérieurs
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété définit si les bordures d'une cellule vide doivent être dessinées ou non. Cette propriété hérite de son parent. Elle s'applique à l'élément td. Par défaut, les bordures sont affichées.

Syntaxe et valeurs possibles
/* bordures visibles */ empty-cells : show ; /* bordures non visibles */ empty-cells : hide ;
Visualisez un exemple.


5. table-layout (CSS 2)


Liste des navigateurs compatibles

  • Internet Explorer 5 et supérieurs
  • Netscape ne connait pas cette propriété
  • Mozilla
  • Mozilla Firebird
  • Opera

Cette propriété détermine si le navigateur doit attendre d'avoir reçu la totalité du tableau avant de commencer à l'afficher. Cette propriété n'hérite pas. Elle s'applique à l'élément table. Par défaut, le navigateur attend que le tableau soit chargé, mais il est possible de l'afficher ligne par ligne, ceci est utile lorsque le tableau contient une grande quantité de données.

Syntaxe et valeurs possibles
/* affichage à la fin du chargement */ table-layout : auto ; /* défaut */ /* affichage ligne par ligne */ table-layout : fixed ;
Visualisez un exemple.



Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur.
La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -