Cours les tableaux (XHTML & CSS)

Cours les tableaux (XHTML & CSS), tutoriel & guide de travaux pratiques en pdf.

Accessibilité
– th
Bien que le style de la balise th diffère souvent d’une balisetd, 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.
summary
L’attributsummary 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’attributsummary 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>

Les tableaux (XHTML & CSS) par Adrien Pellegrini (Page d’accueil)

Voir l’exemple
abbr
L’attributabbr 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>
Voir l’exemple
V.4 – scope
L’attributscope sert à établir une relation entre l’en-tête (baliseth) et les cellules de données.

L’attributscope 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
<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’exemple

headers
L’attributheaders 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’attributscope n’est pas suffisant. Encore une fois ici, l’exemple est assez mal choisi car l’attributscope est largement suffisant.
<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’exemple

Un peu de CSS

Centrage du tableau
Pour centrer le tableau, il faut faire comme pour centrer tout élément c’est à dire avec unmargin à 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;
}
Voir l’exemple
Les bordures
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;
}
Voir l’exemple
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émentstd 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.

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

Cours gratuitTélécharger le cours complet

Télécharger aussi :

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *