Programmation en HTML

   

chapitre 6-b

 

Les attributs des tableaux

     
    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%">

567 891 123
765 981 321
567 891 123
765 981 321
567 891 123
765 981 321
 

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. 

100 200 300
400 500 600
 
100 200 300
400 500 600
 

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. 

100 200 300
400 500 600
 
100 200 300
400 500 600

Les attributs cellspacing & cellpadding peuvent être combinés comme dans l'exemple ci-dessous avec des valeurs respectives de 0 et de 5.
100 200 300
400 500 600
 
100 200 300
400 500 600
 
Introduction | Découvrez le HTML | La page HTML | Les liens hypertextes | Formater le texte
Mettre des images | Les tableaux | Les listes & définitions | Les formulaires | Le multimédia