Tous les éléments du tableau, les colonnes, les en-têtes et les cellules et le tableau lui-même par rapport à la surface d'affichage, peuvent être redimensionnés indépendamment.
Des attributs identiques pour chaque élément précité permettent de régler en largeur ou en hauteur. D'ailleurs, ces attributs ont déjà été rencontrés dans la rubrique : Les dimensions des images, et fonctionnent exactement de la même manière.
L'attribut width="Valeur"* définit la largeur.
L'attribut height="Valeur"* définit la hauteur.
* Les valeurs peuvent s'exprimer en pixels ou en pourcentage de la surface d'affichage : width="250" ou width="80%".
<html> <head> <title>Un titre pertinent</title> <meta name="Description" content="..."> <meta http-equiv="Date" content="01/01/2000"> ... </head> <body> <table width="Valeur" height="Valeur"> <caption align="Type d'alignement" valign="Type d'alignement"> Titre du tableau </caption> <tr> <th width="Valeur" height="Valeur">Titre colonne 1</th> <th>Titre colonne 2</th> ... </tr> <tr> <td>Première cellule</td> <td width="Valeur" height="Valeur">Seconde cellule</td> ... </tr> <tr> <td width="Valeur" height="Valeur">Première cellule</td> <td>Seconde cellule</td> ... </tr> ... </table> ... Diverses commandes HTML ... </body> </html> |
Il est, donc, possible d'affecter les deux attributs de dimensionnement à pratiquement tous les éléments, c'est-à-dire <table>, <th> et <td> sauf la commande de création de lignes <tr>.
D'autre part, les éléments du tableau acceptant ces attributs ne réagissent pas de la même façon devant leurs spécifications.
La commande <table> effectuera une modification globale du tableau en ne tenant compte que de la bordure extérieure.
Les balises d'en-têtes et de cellules s'occuperont essentiellement de la largeur de la colonne dont elles font partie et de la hauteur de la ligne dont elles dépendent. Lorsqu'une valeur en hauteur ou en largeur est affectée à une cellule, c'est respectivement à la ligne et à la colonne, dans leur totalité, que seront appliquées les dimensions de la cellule. Ainsi, en dimensionnant une seule cellule par ligne ou par colonne, le reste des cellules s'alignera automatiquement.
Première colonne | Seconde Colonne | Troisième colonne | |
---|---|---|---|
Première ligne | height="120"
width="200" |
Hauteur de 120 pixels | Hauteur de 120 pixels |
Seconde ligne | Largeur de 200 pixels | ||
Troisième ligne | Largeur de 200 pixels |
Voici un exemple ou la cellule supérieure gauche a des dimensions spécifiées et agit sur la colonne rose et la ligne bleue entière tandis que les cellules grises n'en dépendant pas, conservent leurs dimensions par défaut.
|
Voici un autre exemple de dimensionnement s'appliquant cette fois-ci à un tableau avec une valeur en pixels pour la hauteur et une autre en pourcentage pour la largeur.