Les tableaux (XHTML & CSS)
Date de publication : 21/02/2008
Par
Adrien Pellegrini (Page d'accueil)
Les tableaux ont été introduits pour pouvoir afficher des données
tabulaires. Il n'est plus question d'utiliser des tableaux pour la
mise en page d'un site. Nous allons voir dans cet article, les balises
se rapportant aux tableaux ainsi que la façon de rendre son tableau plus
beau avec du CSS. Une attention particulière sera portée sur
l'accessibilité.
I. Introduction
II. Les balises
II.1. table
II.2. tr
II.3. td
II.4. th
II.5. caption
II.6. thead, tbody et tfoot
II.7. col et colgroup
III. Espacement des cellules
IV. Fusion des cellules
IV.1. colspan
IV.2. rowspan
V. Accessibilité
V.1. th
V.2. summary
V.3. abbr
V.4. scope
V.5. headers
VI. Un peu de CSS
VI.1. Centrage du tableau
VI.2. Les bordures
VI.2.1. Les bordures externes
VI.2.2. Les bordures internes
Les bordures séparées
Les bordures fusionnées
VI.3. Les cellules vides
VI.4. Emplacement de la légende
VI.5. Exemple complet
VII. Conclusion
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 :
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.
II.2. tr
La balise tr permet de déclarer une ligne du tableau.
<table>
<tr></tr>
<tr></tr>
</table>
|
II.3. td
La balise td permet de créer une cellule dans la ligne du tableau.
<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>
|
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.
<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>
|
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.
<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>
|
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.
<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> </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>
|
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.
<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> </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>
|
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.
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.
<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>
|
IV.2. rowspan
L'attribut rowspan permet de fusionner plusieurs cellules.
<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>
|
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.
<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>
|
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.
<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>
|
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 :
- col : la cellule sur laquelle est appliqué le scope se rapporte à une colonne
- row : la cellule sur laquelle est appliqué le scope se rapporte à une ligne
- colgroup : la cellule sur laquelle est appliqué le scope se rapporte à tout le colgroup
- rowgroup : la cellule sur laquelle est appliqué le scope se rapporte à tout le rowgroup
<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>
|
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.
<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>
|
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.
#tab, #tab caption
{
margin: auto;
}
|
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.
#tab
{
border: #003399 1px solid;
}
|
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.
#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).
#tab
{
border-collapse: separate;
border-spacing: 10px 5px;
}
|
|
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.
#tab
{
border-collapse: collapse;
}
|
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.
|
#tab
{
empty-cells: hide;
}
|
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.
|
#tab
{
caption-side: bottom;
}
|
VI.5. Exemple complet
#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;
}
|
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
