Tableau en CSS
Les tableaux et les styles CSS
Là encore, on verra qu'il y a une étroite relation entre XHTML et CSS. En appliquant des styles CSS à des tableaux XHTML, on peut avoir des tableaux plus personnalisés, plus perfectionnés.
Pour vous rafraîchir la mémoire, prenons comme exemple le même tableau utilisé dans le tutoriel XHTML pour les tableaux. Il s'agit du tableau des notes des élèves de la classe de 6ème. On prendra la dernière version du tableau, on essaiera de lui mettre des styles comme les bordures, des couleurs des cellules, etc. Allons-y, c'est parti !
Petit rappel et complément de XHTML
Avant toute chose, il est important que nous nous rappelions des principes que l'on a appris sur les tableaux en XHTML. On avait appris à faire des tableaux simples, à fusionner des cellules, à compartimenter un tableau, à lui mettre des légendes et à le rendre 'accessible' comme le principe de l'XHTML l'exige.
Toutefois on n'a pas encore appris comment rendre les tableaux plus jolis par exemple. Certes, en utilisant les CSS mais dans quel sens ?
Pour commencer apprenons à grouper les colonnes pour y appliquer ensuite des styles.
La balise col est contenue dans la balise colgroup. Comme leur nom l'indique, elles servent toutes deux à grouper des colonnes afin d'y appliquer un style. Il faut placer les balises après la balise caption si celle-ci est renseignée. Pour être plus exact, on les place avant tout le reste pour que tous les éléments du tableau bénéficient des styles que l'on va définir.
Code XHTML avec style en local :
<table summary="Notes des élèves de la classe de sixième année 2008-2009"> <caption>Notes des élèves de la classe de sixième</caption> <colgroup> <col span="1" width="200" /> <col span="3" style="background-color: #0099CC" /> <col span="3" style="background-color: #FF9900" /> <col span="3" style="background-color: #FFFF00" /> </colgroup> <thead> <tr> <th rowspan="2">Nom</th> <th colspan="3" abbr="math">Mathématiques</th> <th colspan="3" abbr="sn">Sciences naturelles</th> <th colspan="3" abbr="phys">Physique </th> </tr> <tr> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> </tr> </thead> <tfoot> <tr> <th colspan="10">Résultats publiés le 01/09/2008</th> </tr> </tfoot> <tbody> <tr> <td>Assan Tessan</td> <td>10</td> <td>14</td> <td>12</td> <td>12</td> <td>18</td> <td>15</td> <td>13</td> <td>11</td> <td>12</td> </tr> <tr> <td>Bernard Chateau</td> <td>8</td> <td>10</td> <td>9</td> <td>8</td> <td>9</td> <td>8,5</td> <td>13</td> <td>6</td> <td>9,5</td> </tr> <tr> <td>Helmut Shröder</td> <td>12</td> <td>18</td> <td>15</td> <td>8</td> <td>9</td> <td>8,5</td> <td>13</td> <td>6</td> <td>9,5</td> </tr> <tr> <td>Willy Jons</td> <td>13</td> <td>6</td> <td>9,5</td> <td>8</td> <td>9</td> <td>8,5</td> <td>8</td> <td>10</td> <td>9</td> </tr> </tbody> </table>
La balise col contient un certain nombre d'attributs, particulièrement l'attribut span. Cet attribut permet de spécifier le nombre de colonnes sur lesquelles le style doit être appliqué. Ici, on a mis 3 comme valeur de l'attribut span pour que chacun des styles soit appliqué aux trois colonnes (puisqu'il y a 3 notes pour chaque matière).
Nous avons distingué ainsi les colonnes de chaque matière : les colonnes des notes de mathématiques seront en bleu, celles des notes de sciences naturelles en orange, et celles des notes de physique en jaune. Sachant que pour mettre une couleur de fond dans une cellule, on utilise la propriété background-color. Quant à la colonne des noms, on n'a pas mis de couleur mais on a juste spécifié sa largeur à 200.
L'attribut scope
L'attribut scope sert à établir une relation entre la balise th et les cellules du tableau.
Il y a 4 valeurs applicables :
- col : la cellule sur laquelle est appliquée la propriété scope se rapporte à une colonne
- row : la cellule sur laquelle est appliquée la propriété scope se rapporte à une ligne
- colgroup : la cellule sur laquelle est appliquée la propriété scope se rapporte à tout le colgrou
- rowgroup : la cellule sur laquelle est appliquée la propriété scope se rapporte à tout le rowgroup
On le met dans la balise th comme suit :
Code XHTML :
<th colspan="3" abbr="math" scope="col" >Mathématiques</th>
Les bordures
L'attribut border sert à mettre une bordure externe à un tableau. La syntaxe est la même que celle de toutes les bordures : Pour une bordure bleue de 2px on a :
Code CSS :
.bordure
{
border: #0099CC 2px solid;
}
Code XHTML :
<table summary="Notes des élèves de la classe de sixième année 2009" class="bordure">
Coller les bordures entre elles
On a vu une bordure à l'extérieur du tableau. Maintenant parlons de l'espacement des bords des cellules. La propriété border-collapse permet de dire si les cellules sont collées entre elles ou non.
Cette propriété peut prendre 2 valeurs :
- separate : Les bordures seront dissociées par défaut.
- collapse : Cette valeur sous entend que les bordures seront collées entre elles. C'est-à-dire qu'il n'y a aucun espace entre les limites de chaque cellule.
En cas de cellules séparées (border-collapse: separate), il est aussi possible de définir une valeur exacte à l'espacement entre les cellules. En effet, la propriété border-spacing permet de spécifier la taille de l'espacement horizontal et vertical.
Par exemple pour border-spacing: 10px 5px, l'espacement horizontal entre les cellules est de 10 px, et l'espacement vertical entre les cellules est de 5px. Voici une exemple d'application de toutes ces propriétés :
Code CSS :
.bordure, td
{
border: #0099CC 2px solid; /*bordure externe*/
border-collapse: separate;/*cellules séparées*/
border-spacing: 10px 5px; /*espacement horizontal : 10px et espacement vertical : 5px*/
}
Code XHTML :
<table summary="Notes des élèves de la classe de sixième année 2009 " class="bordure"> <caption>Notes des élèves de la classe de sixième</caption> <colgroup> <col span="1" width="200"/> <col span="3" style="background-color: #00CCCC" class="bordure" /> <col span="3" style="background-color: #FF9900" /> <col span="3" style="background-color: #FFFF00" /> </colgroup> <thead> <tr> <th rowspan="2">Nom</th> <th colspan="3" abbr="math">Mathématiques</th> <th colspan="3" abbr="sn">Sciences naturelles</th> <th colspan="3" abbr="phys">Physique </th> </tr> <tr> <th scope="row">Examen</th> <th>Devoir</th> <th>Moyenne</th> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> <th>Examen</th> <th>Devoir</th> <th>Moyenne</th> </tr> </thead> <tfoot> <tr> <th colspan="10">Résultats publiés le 01/09/2008</th> </tr> </tfoot> <tbody> <tr> <td>Assan Tessan</td> <td>10</td> <td>14</td> <td>12</td> <td>12</td> <td>18</td> <td>15</td> <td>13</td> <td>11</td> <td>12</td> </tr> <tr> <td>Bernard Chateau</td> <td>8</td> <td>10</td> <td>9</td> <td>8</td> <td>9</td> <td>8,5</td> <td>13</td> <td>6</td> <td>9,5</td> </tr> <tr> <td>Helmut Shröder</td> <td>12</td> <td>18</td> <td>15</td> <td>8</td> <td>9</td> <td>8,5</td> <td>13</td> <td>6</td> <td>9,5</td> </tr> <tr> <td>Willy Jons</td> <td>13</td> <td>6</td> <td>9,5</td> <td>8</td> <td>9</td> <td>8,5</td> <td>8</td> <td>10</td> <td>9</td> </tr> </tbody> </table>
