Mise en forme des tableaux
Bordure et quadrillage
L'attribut "border"
Il permet d'ajouter un quadrillage : <table border="1">
afffichera :
| ligne 1 colonne 1 |
ligne 1 colonne 2 |
ligne 1 colonne 3 |
| ligne 2 colonne 1 |
ligne 2 colonne 2 |
ligne 2 colonne 3 |
| ligne 1 colonne 1 |
ligne 3 colonne 2 |
ligne 3 colonne 3 |
avec : <table border="3">
on aura :
| ligne 1 colonne 1 |
ligne 1 colonne 2 |
ligne 1 colonne 3 |
| ligne 2 colonne 1 |
ligne 2 colonne 2 |
ligne 2 colonne 3 |
| ligne 1 colonne 1 |
ligne 3 colonne 2 |
ligne 3 colonne 3 |
On remarque que la valeur de l'attribut agit exclusivement sur l'épaisseur de la bordure et non sur la totalité du quadrillage
D'autre part on constate un espacement entre les cellules. Cet espacement peut être géré grâce
à l'attribut "cellspacing"
Contrôles plus fins
Deux attributs supplémentaires peuvent affiner l'attribut “border” :
-
L'attribut frame pour contrôler précisement la bordure
-
L'attribut rules pour l'affichage du quadrillage
L'utilisation de l'attribut “frame” ou “rules” au sein d'une balise <table> présuppose la présence de l'attribut “border”.
L'attribut frame
| frame="box" |
frame="void" |
frame="above" |
frame="below" |
| |
Note1 |
Note2 |
| Moy |
15 | 12 |
| | 10 |
14 |
| |
18 | 10 |
|
| |
Note1 |
Note2 |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
| frame="hsides" |
frame="vsides" |
frame="lhr" |
frame="rhs" |
| |
Note1 |
Note2 |
| Moy |
15 | 12 |
| | 10 |
14 |
| |
18 | 10 |
|
| |
Note1 |
Note2 |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
L'attribut rules
| rules="none" |
rules="cols" |
rules="rows" |
rules="group" |
| |
Note1 |
Note2 |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
| |
Note1 |
Note2 |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
| |
Note1 |
Note2 |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
L'utilisation des feuilles de styles permettant une mise en forme encore plus précise est recommandée.
Espace inter et intra-cellule
Deux attributs de la balise <table> permettent de gérer l'espace entre cellules (marge exterieure) et l'espace entre les cellules et leur contenu (marge intérieure.
-
cellspacing pour gérer la marge extérieure :
<table cellspacing="nombre de pixels">
-
cellpadding pour définir la marge intérieure :
<table cellpadding="nombre de pixels">
| |
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
espace définit par cellspacing
espace définit par cellpadding
contenu des cellules
Dans les exemples les bordures et le quadrillage sont rendus visibles avec border="1" afin de mieux visualiser l'impact des deux attributs :
L'attribut "cellspacing"
L'attribut “cellspacing” définit l'espacement entre deux cellules adjacentes.
par défaut
cellspacing="1" |
cellspacing="0" |
cellspacing="10" |
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
L'attribut "cellpadding"
L'attribut “cellpadding” gère l'espacement entre la bordure de la cellule et son contenu
| cellpadding="0" |
cellpadding="20" |
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
Les dimensions d'un tableau
Par défaut
-
Hauteur et largeur d'une cellule s'adapte aux dimensions de son contenu en prenant en compte la marge intérieure (cellpadding)
-
-
La cellule la plus large d'une colonne détermine la largeur de la colonne
-
La cellule la plus haute d'une ligne détermine la hauteur de la ligne
-
-
La largeur d'un tableau est déterminé par la largeur de ses colonnes en prenant en compte la marge extérieure (attribut cellspacing)
-
La hauteur d'un tableau est déterminé par la hauteur de ses lignes en prenant en compte la marge extérieure (attribut cellspacing)
Illustration
|
|
Note1
|
Note2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
Note d'informatique |
N2
|
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
|
|
Note
d'informatique |
Note de
mathématiques |
| Moyenne |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
Fixer la largeur d'un tableau
-
Il est possible de fixer la largeur d'un tableau grâce à l'attribut “width”:
<table width="valeur">
-
La valeur de l'attribut “width” n'est prise en compte que si elle est supérieure à la largeur nécessaire par défaut.
-
La valeur de l'attribut “width” peut être donnée en nombre de pixels (valeur absolue)
ou en pourcentage de l'élément qui le contient (cellule d'un tableau, calque ou page)
par défaut
(217 pixels)
|
|
Informatique |
Mathématiques |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
<table width="150">
(valeur par défaut qui prévaut)
|
|
Informatique |
Mathématiques |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
<table width="400">
400 est pris en compte, car supérieur š la largeur par défaut
|
|
Informatique |
Mathématiques |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
<table width="50%">
pris en compte selon la largeur de la fenêtre
|
|
Informatique |
Mathématiques |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
Hauteur d'un tableau
Bien que l'attribut “height” au sein d'un élément table soit reconnu par la majorité des navigateurs, il ne fait pas partie de la norme.
Dimension des cellules
Fixer hauteur et largeur des cellules.
-
Hauteur et la largeur d'une cellule peuvent être
définies par les attributs “height” et “width” dans une balise <td> ou <th>
- Il suffit de définir la hauteur d'une cellule pour déterminer la hauteur de la ligne qui la contient.
- Il suffit de définir la largeur d'une cellule pour déterminer la largeur de la colonne qui la contient.
- Largeur et hauteur peuvent être données en pixels ou en pourcentage des dimensions du tableau.
- Ces deux attributs de la balise <td> ou <th> sont en cours d'abandon. On leur préférera l'utilisation des CSS.
- Les valeurs fixées par les attributs “height” et “width” dans une balise <td> ou <th>
sont prise en compte si elles sont supérieures aux dimensions par défaut nécessaires à l'affichage du contenu de toute les cellules.
100x50
| contenu plus conséquent |
100x50
| contenu ne pouvant tenir dans les dimensions fixées |
| <td width="100"> |
<td width="200"> |
<td width="200"> |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
<table width="600">
| <td width="100"> |
<td width="200"> |
<td width="200"> |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
<table width="400">
| width="400" height="20" |
<td width="200"> |
<td width="200"> |
| Moy |
15 |
12 |
| |
10 |
14 |
| |
18 |
10 |
Alignement
Alignement horizontal du contenu des cellules
L'attribut “align” permet d'aligner le contenu des cellules :
-
à gauche (left) par défaut
- à droite (right)
- centrer (center)
Cet attribut peut s'appliquer à une seule cellule (<td> ou <th>) à
une ligne (<tr>) ou à une partie de tableau <thead> <tbody> <tfoot>
(voir structure d'un tableau).
Remarque : Lorsque l'attribut “align” est appliqué à la balise <table> il permet de cadrer le tableau dans son élément englobant (cellule de tableau, calque ou body par exemple).
Alignement vertical du contenu des cellules
L'attribut “valign” permet de positionner verticalement le contenu d'une cellule :
- en haut (top)
- en bas (bottom)
- au milieu (middle).
Couleur et image de fond
L'attribut “bgcolor” permet d'affecter une couleur de fond. Il s'applique à l'intégralité du tableau lorsqu'il figure dans la balise <table> et à une cellule unique lorsqu'il est présent dans une balise <td> ou <th>.
Cet attribut est en cours d'abandon. Pour attribuer une couleur ou une image de fond on préfèrera la propriété “background-color” des CSS.
L'attribut “background” pour une balise <table> <td> ou <th> qui permet d'afficher une image de fond, bien que reconnu par certains navigateurs ne fait pas partie de la norme HTML. On utilisera la proprété “background-image” des CSS.
