Légende et titre
Vous pouvez très facilement ajouter à votre tableau un titre ou une légende
avec la balise <caption>. Si vous voulez un titre en dessus du tableau, il vous suffit de laisser la balise CAPTION seule. Si vous désirez passer le titre en légende en bas du tableau, il vous faudra utiliser l'attribut align comme ceci : <caption align="bottom">
Exemple pour un titre
| Code | Résultat |
<table>
<caption>LE TITRE DU TABLEAU
</caption>
<tr><td>
L'insertion d'un titre se fait avec la
balise <caption>.
</td></tr>
</table>
|
LE TITRE DU TABLEAU
|
L'insertion d'un titre se fait avec la balise <caption>.
|
|
Exemple pour une légende
| Code | Résultat |
<table>
<caption align="bottom">
LA LEGENDE DU TABLEAU
</caption>
<tr><td>
L'insertion d'une légende se fait avec la
balise <caption>.
</td></tr>
</table>
|
LA LEGENDE DU TABLEAU
|
L'insertion d'une légende se fait avec la balise <caption>.
|
|
Titre des cellules
Vous avez des données dans votre tableau auxqelles vous voulez affecter un
titre, vous avez la balise <th> en remplacement de <td>. Cette balise met
automatiquement en valeur la première ligne.
| Code | Résultat |
<table>
<caption align="bottom">
Les balises du XHTML
</caption>
<tr>
<th>Balise</th>
<th>Définition</th>
</tr><tr>
<td><td></td>
<td>Table Data</td>
</tr><tr>
<td><th></td>
<td>Table Head</td>
</tr>
</table>
|
Les balises du XHTML
| Balise |
Définition |
| <td> |
Table Data |
| <th> |
Table Head |
|
Espacement des cellules
Avec les attributs cellpadding (Réglage de l'espace entre le
contenu de la cellule et la bordure) et cellspacing (Réglage de l'espace entre les
cellules) vous allez pouvoir gérer les espacements comme vous le désirez.
Agrandir l'espace entre les cellules avec cellspacing.
Une table d'une longueur de 250 pixels avec un espace entre les cellules de 15 pixels.
| Code | Résultat |
<table cellspacing="15" width="250px">
<caption align="bottom">
Utilisation de cellspacing
</caption>
<tr>
<th>Balise</th>
<th>Définition</th>
</tr><tr>
<td><td></td>
<td>Table Data</td>
</tr><tr>
<td><th></td>
<td>Table Head</td>
</tr>
</table>
|
Utilisation de cellspacing
| Balise |
Définition |
| <td> |
Table Data |
| <th> |
Table Head |
|
Augmenter l'espace entre le contenu et la bordure avec
cellpadding.
Même exemple que ci-dessus, mais avec l'utilisation de cellpadding avec la valeur 10.
| Code | Résultat |
<table cellspacing="15" cellpadding="10">
<caption align="bottom">
Utilisation de cellpadding
</caption>
<tr>
<th>Balise</th>
<th>Définition</th>
</tr><tr>
<td><td></td>
<td>Table Data</td>
</tr><tr>
<td><th></td>
<td>Table Head</td>
</tr>
</table>
|
Utilisation de cellpadding
| Balise |
Définition |
| <td> |
Table Data |
| <th> |
Table Head |
|
|