Les attributs permettent de configurer les tableaux pour
obtenir la présentation souhaitée.
Les attributs des tableaux
sont :
border :
l'attribut border se
place dans la commande <table>
et permet d'encadrer tous les éléments du tableau par une bordure dont
il est possible de spécifier l'épaisseur (border=1, border=2,
etc...). Border peut être utilisé
sans spécifier de valeurs (<table border>)
Le
code HTML suivant :
<table
border=5>
<caption>Les
chiffres</caption>
<tr> <th>
A </th>
<th> B </th> <th> C
</th> <th> D </th>
</tr>
<tr> <td> 1
</td> <td> 2 </td> <td>
3 </td>
<td> 4 </td> </tr>
<tr> <td> 5 </td> <td>
6 </td>
<td> 7 </td> <td> 8
</td> </tr>
</table>
Affichera sous un logiciel client :
Les chiffres
| A |
B |
C |
D |
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
Align
L'attribut
align est utilisé dans les commandes
de base <caption> et
<th>,
<tr>,
<td>.
=>
Pour <caption>
align permet de placer le titre d'un tableau au-dessus
(top) ou en dessous
(bottom)
Les
codes HTML suivant affichent sous un logiciel client :
| <caption align=top> |
|
|
|
<caption
align=bottom> | |
Les chiffres
| A |
B |
C |
D |
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 | |
|
|
|
| A |
B |
C |
D |
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
Les
chiffres |
=>
Pour <th>, <tr>,
<td>
Ce même
attribut utilisé dans ces commandes permet d'aligner le contenu des
cellules à gauche (align=left), à
droite (align=right) ou au centre
(align=center).
Valign
Cet attribut
est utilisé à l'intérieur des commandes <th>,
<tr>, <td>
Il permet de
contrôler la disposition verticale des données à l'intérieur des cellules
du tableau. Les valeurs qu'il peut adopter sont :
- valign=top
: le texte est
placé dans la partie supérieure de la cellule.
- valign=middle : le
texte est placé au milieu de la cellule (valeur par
défaut).
- valign=bottom : le
texte est placé dans la partie inférieure de la cellule.
- valign=baseline : le
texte est placé sur la même ligne.
Nowrap
Cet attribut,
lorsqu'utilisé dans les cellules <th> ou <td> empêche que le
texte ne soit brisé en deux ou plusieurs lignes. Comparez les deux
tableaux suivants pour voir la différence.
La commande
s'écrit comme suit : <td nowrap> ou <th nowrap>
| contenu très long sans
nowrap | |
| contenu très long avec
nowrap | |
Width
Variation de la
largeur totale d'un tableau. Cet attribut peut toutefois être utilisé avec
les commandes <th>,
<tr>, <td> Voici
trois tableaux configurés avec une largeur respective de 30, 60 et 90%.
Les commandes pour les obtenir sont :
<table border=1
width="30%">
<table border=1
width="60%">
<table border=1
width="90%">
Rowspan
L'attribut
rowspan a pour effet de donner une
largeur de lignes que l'on définit. Ainsi, <td
rowspan=2> affichera une colonne de 2
rangées.
Les commandes
s'appliquent indifféremment avec <td> ou <th>.
Exemples :
| 1° exemple |
La
commande |
| <th rowspan=2> |
| 2° exemple |
La
commande |
| <th rowspan=10> |
| <th rowspan=10> |
| <th rowspan=10> |
| <th rowspan=10> |
| <th rowspan=10> |
| <th rowspan=10> |
| <th rowspan=10> |
| <th rowspan=10> |
| <th
rowspan=10> |
| Sur la droite |
3° exemple |
| <th rowspan=2> |
| Centré |
4° exemple |
dans le
tableau |
| <th rowspan=2> |
ou <td rowspan=2>
|
Colspan
Attribut
identique à rowspan mais pour les colonnes.
Exemples :
| 1° exemple |
| La commande |
<th colspan=2> |
| 2° exemple |
| Chiffres |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| En bas |
<th colspan=2> |
| 3°
exemple |
| Centré |
dans le
tableau |
| 4° exemple |
| <th colspan=2> |
ou <td
colspan=2> |
Dernier exemple qui combine les
attributs rowspan & colspan
| Dernier
exemple |
| opérations |
2 |
+ 11 |
=
13 |
| 6 |
+ 7 |
=
13 |
| 10 |
+ 3 |
=
13 |
Cellspacing
L'attribut cellspacing
détermine l'épaisseur de la bordure en entre les bordures de deux cellules
adjacentes. Bien sûr, cellspacing nécessite la présence de l'attribut
border
(NB : border ne définit que la bordure
entourant le tableau en entier).
Par exemple, le
premier tableau a une valeur d'espacement des bordures de 0, alors que le
deuxième a une valeur de 5.
Cellpadding
L'attribut cellpadding
détermine l'espace libre dans les deux directions entre le contenu d'une
cellule et ses bordures. Bien sûr, cellpadding nécessite la présence
de l'attribut border
(NB :border ne définit que la bordure entourant le tableau
en entier).
Par exemple, le
premier tableau a une valeur d'espacement des cellules de 0, alors que le
deuxième a une valeur de 5.
Les attributs
cellspacing & cellpadding peuvent être combinés comme
dans l'exemple ci-dessous avec des valeurs respectives de 0 et de
5.
|