Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Mettre en forme un tableau avec les propriétés CSS

Mettre en forme un tableau avec les propriétés CSS

L'heure est venue de mettre en pratique toutes les propriétés CSS de formatage de tableaux qu'on a apprises. Dans le chapitre précédant j'ai crée des tableaux trop moches, car ils étaient destinés à servir d'exemple. Dans ce tuto, je vais faire appelle à mon talent

Bon, passons au boulot. J'ai le code XHTML suivant :

Code XHTML

<table>
<caption>Le personnel de mon entreprise</caption>
<tr>
<th scope="col">Nom</th>
<th scope="col">Age</th>
<th scope="col">Ancienneté</th>
<th scope="col">Salaire</th>
</tr>
<tr>
<td>François</td>
<td>40 ans</td>
<td>3 ans</td>
<td>1000.00001 €</td>
</tr>
<tr>
<td>Peter</td>
<td>30 secondes</td>
<td>60 minutes et quelques secondes</td>
<td>3 pommes</td>
</tr>
<tr>
<td>Jacques</td>
<td>1 siècle et 3 fractions de secondes</td>
<td>moins trois jours</td>
<td>bénévole</td>
</tr>
<tr>
<td>Michel</td>
<td>+∞</td>
<td>[(-b±√(b^2-4ac))/2(∑ß)]Ω</td>
<td>30 gifles</td>
</tr>
<tr>
<td>Emile</td>
<td>-∞</td>
<td>∑ anciennetés des autres employés</td>
<td>salut + au revoir</td>
</tr>
</table>

Habillage du tableau avec les propriétés CSS

table { /* le quadrillage externe */
border: 3px double blue; /* Bordure du tableau double et bleue */
margin: auto; /* Centrer horizontalement le tableau */
border-collapse: collapse; /* éviter d'avoir un quadrillage double */
}
th { /* Les cellules d'en-têtes */
border: 2px solid blue;
color: white;
font-size: 1.2em;
font-family: "Trebuchet MS";
background-color: black;
}
td { /* Les cellules normales */
border: 2px solid blue;
font-family: "Comic Sans MS";
font-size: 0.8em;
padding: 8px; /* Remplissage de 8 pixels pour éviter que
le texte touche les bordures */
vertical-align: middle; /* Centrer le contenu des cellules verticalement */
text-align: center; /* Centrer le contenu des cellules horizontalement */
}
caption { /* la légende du tableau */
font-family: "Times New Roman";
font-weight: bold;
font-size: 140%;
color: #330099;
margin-left: auto; /* pour centrer la légende */
margin-right: auto; /* pour centrer la légende */
margin-bottom: 4px; /* titre placé à 4px au-dessus du tableau */
}

Rendu visuel

formatage et mise en forme des tableaux avec les CSS

Commentaires

Ayez l'habitude de passer les mêmes bordures aux éléments 'th' et 'td' pour uniformiser les bordures de vos tableaux. Ceci concerne les trois variables des bordures à savoir le style, la largeur et la couleur.

Les cellules d'en-têtes n'ont nullement besoin de centrages vertical et horizontal.

Pour centrer la légende, vous devez lui définir des marges latérales (gauche et droite) avec la valeur 'auto'. Normalement, si le tableau est centré, la légende doit l'être aussi. Ce raisonnement a été adopté par les navigateurs Opera et Safari. Pour que la légende soit aussi centrée sur les autres navigateurs Firefox, Mozilla, Netscape et K-Meleon vous devez passer la valeur auto aux marges latérales.

Faites attention au phénomène de fusion de marges verticales, qui peut apparaître chez les deux éléments 'table' et 'caption', si ces deux derniers sont superposés (caption au-dessus ou en-dessous du tableau), sinon, on parlera d'addition de marges latérales, si les deux éléments sont juxtaposés. Pour plus de détails à propos de la fusion des marges horizontales.

Ah J'ai failli oublier de vous poser une question. Que pensez-vous de mon tableau ? Il est nickel. Est ce que j'ai raison, ou bien j'ai raison ? J'ai toujours raison A présent passons au chapitre suivant : des tableaux accessibles.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau