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-A. table▲
La balise table est l'élément de base d'un tableau.
Il est interdit d'imbriquer des balises table.
<table> </table>II-B. tr▲
La balise tr permet de déclarer une ligne du tableau.
<table>
<tr></tr>
<tr></tr>
</table>II-C. 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-D. 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-E. 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-F. 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 autres 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-G. 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 à deux 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 deux attributs à 0 si vous utilisez une mise en forme CSS.
IV. Fusion des cellules▲
IV-A. 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-B. 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-A. th▲
Bien que le style de la balise th diffère souvent d'une balise td, ce n'est pas 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-B. 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-C. 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-D. 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 quatre 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-E. 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-A. 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-B. Les bordures▲
VI-B-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-B-2. Les bordures internes▲
Il existe deux types de bordures internes. Les bordures dites « fusionnées » et les bordures dites « séparées ».
Pour illustrer ces deux 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;
}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.
#tab
{
border-collapse: collapse;
}VI-C. 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-D. 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 quatre valeurs : bottom, left, right, top.
Cette propriété CSS est compatible Nescape, Safari et Mozilla uniquement.
#tab
{
caption-side: bottom;
}VI-E. 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, 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.