I. Introduction

Cet article se base sur un DOCTYPE XHTML 1.0 Strict. À la fin de l'article, on aura un tableau qui ressemblera à ceci :

Résultat du tableau obtenu après mise en forme avec du CSS

II. Les balises

II.1. table

La balise table est l'élément de base d'un tableau.
Il est interdit d'imbriquer des balises table.

 
Sélectionnez

<table> </table>

II.2. tr

La balise tr permet de déclarer une ligne du tableau.

 
Sélectionnez

<table>
    <tr></tr>
    <tr></tr>
</table>

II.3. td

La balise td permet de créer une cellule dans la ligne du tableau.

 
Sélectionnez

<table>
    <tr>
        <td>Navigateurs</td>
        <td>Nombre</td>
    </tr>
    <tr>
        <td>Firefox 2.0</td>
        <td>34778 (50.7 %)</td>
    </tr>
    <tr>
        <td>Internet Explorer 6.0</td>
        <td>15176 (22.1 %)</td>
    </tr>
    <tr>
        <td>Internet Explorer 7.0</td>
        <td>9957 (14.5 %)</td>
    </tr>
    <tr>
        <td>Firefox 1.5</td>
        <td>3864 (5.6 %)</td>
    </tr>
</table>

Voir l'exempleVoir l'exemple :: table, tr, td

II.4. th

La balise th permet de créer un en-tête dans le tableau. Dans notre exemple th définit le titre des colonnes.

 
Sélectionnez

<table>
    <tr>
        <th>Navigateurs</th>
        <th>Nombre</th>
    </tr>
    <tr>
        <td>Firefox 2.0</td>
        <td>34778 (50.7 %)</td>
    </tr>
    <tr>
        <td>Internet Explorer 6.0</td>
        <td>15176 (22.1 %)</td>
    </tr>
    <tr>
        <td>Internet Explorer 7.0</td>
        <td>9957 (14.5 %)</td>
    </tr>
    <tr>
        <td>Firefox 1.5</td>
        <td>3864 (5.6 %)</td>
    </tr>
</table>

Voir l'exempleVoir l'exemple :: table, tr, td

II.5. caption

La balise caption permet de définir une légende pour le tableau. Cette légende est généralement placée au dessus du tableau. Nous verrons dans la partie CSS le moyen de la déplacer.

 
Sélectionnez

<table>
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <tr>
        <th>Navigateurs</th>
        <th>Nombre</th>
    </tr>
    <tr>
        <td>Firefox 2.0</td>
        <td>34778 (50.7 %)</td>
    </tr>
    <tr>
        <td>Internet Explorer 6.0</td>
        <td>15176 (22.1 %)</td>
    </tr>
    <tr>
        <td>Internet Explorer 7.0</td>
        <td>9957 (14.5 %)</td>
    </tr>
    <tr>
        <td>Firefox 1.5</td>
        <td>3864 (5.6 %)</td>
    </tr>
</table>

Voir l'exempleVoir l'exemple :: caption

II.6. thead, tbody et tfoot

Les balises thead, tbody et tfoot servent respectivement à grouper logiquement des lignes dans un en-tête, un corps et un pied de page.

Le W3C impose que la balise tfoot apparaisse avant tbody. Si vous ne le faites pas, votre page ne passera pas la validation.
Il est aussi obligatoire de spécifier un tbody si vous avez utilisé plus haut un thead ou un tfoot.

Grouper les lignes de cette façon permet entre autre via CSS de mettre en forme qu'un certain nombre de lignes. Nous verrons un exemple plus tard dans la partie CSS.

 
Sélectionnez

<table>
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <thead>
        <tr>
            <th>Navigateurs</th>
            <th>Nombre</th>
        </tr>
    </thead>

    <tfoot>
    	<tr>
            <td>&nbsp;</td>
            <td>Créé par Adrien Pellegrini</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Firefox 2.0</td>
            <td>34778 (50.7 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 6.0</td>
            <td>15176 (22.1 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 7.0</td>
            <td>9957 (14.5 %)</td>
        </tr>
        <tr>
            <td>Firefox 1.5</td>
            <td>3864 (5.6 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: thead, tfoot, tbody

II.7. col et colgroup

Les balises col et colgroup servent toutes deux à grouper des colonnes afin d'y appliquer un certain style.
Les balises doivent être placées après la balise table, après la balise caption si elle est renseignée et avant tout le reste.
Il n'est pas nécessaire d'inclure les balises col dans une balise colgroup. Aussi bien col que colgroup peut s'utiliser seule.

La balise col contient un certain nombre d'attributs, mais un en particulier mérite d'être un peu plus expliqué. Il s'agit de l'attribut span. Cet attribut permet de spécifier sur combien de colonnes le style doit être appliqué. Dans l'exemple ci-dessus, il est mis à sa valeur par défaut.

 
Sélectionnez

<table>
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <colgroup>
    	<col span="1" width="200" style="background-color:#B8C7D3" />
        <col span="1" width="150" style="background-color: #CCCCCC" />
    </colgroup>
   
    <thead>
        <tr>
            <th>Navigateurs</th>
            <th>Nombre</th>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
            <td>&nbsp;</td>
            <td>Créé par Adrien Pellegrini</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Firefox 2.0</td>
            <td>34778 (50.7 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 6.0</td>
            <td>15176 (22.1 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 7.0</td>
            <td>9957 (14.5 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: col, colgroup

III. Espacement des cellules

Il est possible grâce à 2 attributs de la balise table de spécifier un espacement entre les cellules, cellspacing et un espacement entre le contenu et les bords de la cellule, cellpadding.

Espacements entre cellules

Il est préférable de mettre ces 2 attributs à 0 si vous utilisez une mise en forme CSS.

IV. Fusion des cellules

IV.1. colspan

L'attribut colspan permet de fusionner plusieurs colonnes.

Image d'illustration du colspan
 
Sélectionnez

<table>
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <colgroup>
    	<col span="1" width="200" style="background-color:#B8C7D3" />
        <col span="1" width="150" style="background-color: #CCCCCC" />
    </colgroup>
   
    <thead>
        <tr>
            <th>Navigateurs</th>
            <th>Nombre</th>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
            <td colspan="2">Créé par Adrien Pellegrini</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Firefox 2.0</td>
            <td>34778 (50.7 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 6.0</td>
            <td>15176 (22.1 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 7.0</td>
            <td>9957 (14.5 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: colspan

IV.2. rowspan

L'attribut rowspan permet de fusionner plusieurs cellules.

Image d'illustration du rowspan
 
Sélectionnez

<table>
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <colgroup>
    	<col span="1" width="200" style="background-color:#B8C7D3" />
        <col span="1" width="150" style="background-color: #CCCCCC" />
    </colgroup>
   
    <thead>
        <tr>
            <th>Navigateurs</th>
            <th>Nombre</th>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
            <td rowspan="2">Créé par</td>
            <td>Adrien Pellegrini</td>
        </tr>
        <tr>
            <td>PhpMyVisite</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Firefox 2.0</td>
            <td>34778 (50.7 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 6.0</td>
            <td>15176 (22.1 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 7.0</td>
            <td>9957 (14.5 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: rowspan

V. Accessibilité

V.1. th

Bien que le style de la balise th diffère souvent d'une balise td, ce n'est son but premier. Pour les programmes utilisés par les malvoyants, cette balise est très importante car elle permet, comme dit précédemment, de lier une cellule à une colonne ou une ligne.

V.2. summary

L'attribut summary de la balise table permet de spécifier une description du tableau beaucoup plus longue que celle de la balise caption.
Cela permet à une personne malvoyante de savoir ce que le tableau décrit et si oui ou non il faut s'y intéresser.

L'attribut summary au contraire de la balise caption n'est pas affiché par les navigateurs habituels.

 
Sélectionnez

<table summary="Comparaison des statistiques des différents navigateurs sur la période du 1er janvier 2007 
	au 31 décembre 2007 sur le domaine a-pellegrini.developpez.com">
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <colgroup>
    	<col span="1" width="200" style="background-color:#B8C7D3" />
        <col span="1" width="150" style="background-color: #CCCCCC" />
    </colgroup>
   
    <thead>
        <tr>
            <th>Navigateurs</th>
            <th>Nombre</th>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
            <td rowspan="2">Créé par</td>
            <td>Adrien Pellegrini</td>
        </tr>
        <tr>
            <td>PhpMyVisite</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Firefox 2.0</td>
            <td>34778 (50.7 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 6.0</td>
            <td>15176 (22.1 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 7.0</td>
            <td>9957 (14.5 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: summary

V.3. abbr

L'attribut abbr de la balise th sert à spécifier un titre plus court. L'exemple ici n'est pas très bien choisi car il n'est pas nécessaire de mettre un titre plus court.

Pourquoi spécifier un titre plus court ?
Tout simplement pour ne pas faire répéter au navigateur pour malvoyants un titre de colonne trop long à chaque ligne.

 
Sélectionnez

<table summary="Comparaison des statistiques des différents navigateurs sur la période du 1er janvier 2007 
	au 31 décembre 2007 sur le domaine a-pellegrini.developpez.com">
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <colgroup>
    	<col span="1" width="200" style="background-color:#B8C7D3" />
        <col span="1" width="150" style="background-color: #CCCCCC" />
    </colgroup>
   
    <thead>
        <tr>
            <th abbr="Nav">Navigateurs</th>
            <th abbr="Nb">Nombre</th>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
            <td rowspan="2">Créé par</td>
            <td>Adrien Pellegrini</td>
        </tr>
        <tr>
            <td>PhpMyVisite</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Firefox 2.0</td>
            <td>34778 (50.7 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 6.0</td>
            <td>15176 (22.1 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 7.0</td>
            <td>9957 (14.5 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: abbr, scope, headers

V.4. scope

L'attribut scope sert à établir une relation entre l'en-tête (balise th) et les cellules de données.

L'attribut scope peut prendre 4 valeurs :

  1. col : la cellule sur laquelle est appliqué le scope se rapporte à une colonne
  2. row : la cellule sur laquelle est appliqué le scope se rapporte à une ligne
  3. colgroup : la cellule sur laquelle est appliqué le scope se rapporte à tout le colgroup
  4. rowgroup : la cellule sur laquelle est appliqué le scope se rapporte à tout le rowgroup
 
Sélectionnez

<table summary="Comparaison des statistiques des différents navigateurs sur la période du 1er janvier 2007 
	au 31 décembre 2007 sur le domaine a-pellegrini.developpez.com">
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <colgroup>
    	<col span="1" width="200" style="background-color:#B8C7D3" />
        <col span="1" width="150" style="background-color: #CCCCCC" />
    </colgroup>
   
    <thead>
        <tr>
            <th abbr="Nav" scope="col">Navigateurs</th>
            <th abbr="Nb" scope="col">Nombre</th>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
            <td rowspan="2">Créé par</td>
            <td>Adrien Pellegrini</td>
        </tr>
        <tr>
            <td>PhpMyVisite</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Firefox 2.0</td>
            <td>34778 (50.7 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 6.0</td>
            <td>15176 (22.1 %)</td>
        </tr>
        <tr>
            <td>Internet Explorer 7.0</td>
            <td>9957 (14.5 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: abbr, scope, header

V.5. headers

L'attribut headers permet de spécifier la liste des en-têtes qui se rapporte à une cellule. Cette liste sera des id séparés par un espace.

Cet attribut s'utilise essentiellement quand l'attribut scope n'est pas suffisant. Encore une fois ici, l'exemple est assez mal choisi car l'attribut scope est largement suffisant.

 
Sélectionnez

<table summary="Comparaison des statistiques des différents navigateurs sur la période du 1er janvier 2007 
	au 31 décembre 2007 sur le domaine a-pellegrini.developpez.com">
    <caption>Statistique des navigateurs sur l'année 2007 de a-pellegrini.developpez.com</caption>
    
    <colgroup>
    	<col span="1" width="200" style="background-color:#B8C7D3" />
        <col span="1" width="150" style="background-color: #CCCCCC" />
    </colgroup>
   
    <thead>
        <tr>
            <th id="nav" abbr="Nav" scope="col">Navigateurs</th>
            <th id="nb" abbr="Nb" scope="col">Nombre</th>
        </tr>
    </thead>
    
    <tfoot>
    	<tr>
            <td rowspan="2">Créé par</td>
            <td>Adrien Pellegrini</td>
        </tr>
        <tr>
            <td>PhpMyVisite</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td id="ff2" headers="nav">Firefox 2.0</td>
            <td headers="ff2 nb">34778 (50.7 %)</td>
        </tr>
        <tr>
            <td id="ie6" headers="nav">Internet Explorer 6.0</td>
            <td headers="ie6 nb">15176 (22.1 %)</td>
        </tr>
        <tr>
            <td id="ie7" headers="nav">Internet Explorer 7.0</td>
            <td headers="ie7 nb">9957 (14.5 %)</td>
        </tr>
    </tbody>
</table>

Voir l'exempleVoir l'exemple :: abbr, scope, headers

VI. Un peu de CSS

VI.1. Centrage du tableau

Pour centrer le tableau, il faut faire comme pour centrer tout élément c'est à dire avec un margin à auto.
Comme vous pourrez le constater, le caption ne se centre pas automatiquement avec le tableau. Il faut donc appliquer le même CSS au caption.

 
Sélectionnez

#tab, #tab caption
{
    margin: auto;
}

Voir l'exempleVoir l'exemple :: css centrage

VI.2. Les bordures

VI.2.1. Les bordures externes

Comme à tout élément HTML, il est possible de spécifier une bordure sur l'élément table.
Comme vous pourrez le constater également, le caption n'est pas pris dans les bordures.

 
Sélectionnez

#tab
{
    border: #003399 1px solid;
}

Voir l'exempleVoir l'exemple :: css bordure externe

VI.2.2. Les bordures internes

Il existe 2 types de bordures internes. Les bordures dites "fusionnées" et les bordures dites "séparées".
Pour illustrer ces 2 cas il nous faut d'abord mettre des bordures sur les éléments td du tableau.

 
Sélectionnez

#tab td
{
    border: #3399CC 1px solid;
}

Les bordures séparées

Dans ce cas, les bordures de chaque cellule sont séparées. Pour se faire, il faut utiliser la propriété CSS border-collapse à separate.
Il est possible de spécifier aussi l'espacement entre les cellules grâce à la propriété CSS border-spacing à x y ou x (ou x représente la taille de l'espacement horizontal et y le vertical).

 
Sélectionnez

#tab
{
    border-collapse: separate;
    border-spacing: 10px 5px;
}

Voir l'exempleVoir l'exemple :: css bordure séparée

Les propriétés CSS border-collapse et border-spacing sont compatibles Nescape, Safari et Mozilla uniquement. Pour que l'espacement soit correct, il faut utiliser les attributs cellpadding et cellspacing de la balise table.

Les bordures fusionnées

Dans ce cas, les bordures de chaque cellule sont fusionnées. Pour se faire il faut utiliser la propriété CSS border-collapse à collapse.

 
Sélectionnez

#tab
{
    border-collapse: collapse;
}

Voir l'exempleVoir l'exemple :: css bordure fusionnée

VI.3. Les cellules vides

Il se peut qu'une cellule soit vide (c'est à dire ni de texte ni d'espace insécable ou espace blanc). Le comportement par défaut est d'afficher les cellules vides. Ce comportement peut être changé grâce à la propriété CSS empty-cells à hide. La propriété CSS prend soit comme valeur hide, soit show.

Cette propriété CSS est compatible Nescape, Safari et Mozilla uniquement.

 
Sélectionnez

#tab
{
	empty-cells: hide;
}

Voir l'exempleVoir l'exemple :: css empty

VI.4. Emplacement de la légende

Une propriété CSS nous permet de déplacer l'élément caption. Cette propriété est caption-side qui prend 4 valeurs : bottom, left, right, top.

Cette propriété CSS est compatible Nescape, Safari et Mozilla uniquement.

 
Sélectionnez

#tab
{
	caption-side: bottom;
}

Voir l'exempleVoir l'exemple :: css caption

VI.5. Exemple complet

 
Sélectionnez

#tab, #tab caption
{
    margin: auto;
}

#tab
{
    border: #DDEEFF 2px solid;
    border-collapse: separate;
    border-spacing: 2px;
    empty-cells: hide;
}

#tab caption
{
    background-color: #DDEEFF;
	font-size: 0.8em;
}

#tab th
{
    color: #996600;
    background-color: #FFCC66;
    border: #FFCC66 1px solid;
    font-variant: small-caps;
    font-size: 0.8em;
    letter-spacing: 1px;
}

#tab td
{
    border: #DDEEFF 1px solid;
    padding-left: 10px;
}

#navcol
{
    width: 200px;
    background-color: #F4FAFD;
}

#numcol
{
    width: 150px;
}

#tab tfoot
{
    font-size: 0.7em;
    background-color: #FFCC66;
    color: #996600;
    letter-spacing: 1px;
}

Voir l'exempleVoir l'exemple :: css complet

VII. Conclusion

N'oubliez pas les personnes en difficulté ! Il ne faut pas grand chose de plus à un tableau pour qu'il soit au minimum accessible (ajouter la balise th, caption et l'attribut summary).
Pour la partie CSS libre à votre imagination. Ce n'est pas très compliqué de mettre en forme un tableau et ça demande peu de CSS pour arriver à un beau résultat.