Glossaire des propriétés CSS

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

<style type="text/css">
    .border1 {
        border-collapse: collapse;
        margin-bottom: 20px;
    }
 
    .border2 {
        border-collapse: separate;
    }
</style>
<div>
    <table class="border1">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>
 
    <table class="border2">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>
</div>

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

<style type="text/css">
    .empty1 {
        empty-cells: hide;
        border-collapse: separate;
        margin-bottom: 20px;
    }
 
    .empty2 {
        empty-cells: show;
        border-collapse: separate;
    }
</style>
<div>
    <table class="empty1">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td></td>
    </tr>
    </table>
 
    <table class="empty2">
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td></td>
    </tr>
    </table>
</div>

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

<style type="text/css">
    .caption1 {
        caption-side: top;
        margin-bottom: 20px;
    }
 
    .caption2 {
        caption-side: bottom;
    }
</style>
<div>
    <table class="caption1" style="border: 1px solid black;">
    <caption>Titre du tableau</caption>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>
 
    <table class="caption2" style="border: 1px solid black;">
    <caption>Titre du tableau</caption>
    <tr>
        <td>Cellule 1</td>
        <td>Cellule 2</td>
    </tr>
    <tr>
        <td>Cellule 3</td>
        <td>Cellule 4</td>
    </tr>
    </table>
</div>

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

<style type="text/css">
    .table-layout1 {
        border-collapse: collapse;
        margin-bottom: 20px;
        table-layout: fixed;
        width: 200px;
    }
    .table-layout2 {
        border-collapse: collapse;
        margin-bottom: 20px;
        table-layout: auto;
        width: 200px;
    }
    
    .table-layout2 td {
        white-space: nowrap;
    }
</style>
<table class="table-layout1">
<tr>
    <td>Cellule 1</td>
    <td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
</tr>
</table>
<table class="table-layout2">
<tr>
    <td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
    <td>Cellule 2</td>
</tr>
<tr>
    <td>Lorem ipsum dolore sit amet, consectetur adipiscing elit Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
    <td>Cellule 4</td>
</tr>
</table>

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

<style type="text/css">
    .border-spacing1 {
        border-collapse: separate;
        margin-bottom: 20px;
        width: 200px;
        border-spacing: 10px;
    }
    .border-spacing2 {
        border-collapse: separate;
        margin-bottom: 20px;
        width: 200px;
        border-spacing: 10px 20px;
    }
    
    .border-spacing2 td {
        white-space: nowrap;
    }
</style>
<table class="border-spacing1">
<tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
</tr>
<tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
</tr>
</table>
<table class="border-spacing2">
<tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
</tr>
<tr>
    <td>Cellule 3</td>
    <td>Cellule 4</td>
</tr>
</table>

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.