HTML 4 : Tableaux
Attributs de TABLE
attribut |
rôle |
border="x" |
épaisseur du cadre (par défaut 1) |
bgcolor=couleur |
couleur des cellules |
frame |
cadre du tableau |
rules |
lignes de séparation dans le tableau |
height |
taille en hauteur |
width="80%" |
taille en pourcentage par rapport à la largeur
de la fenêtre |
align |
left, right, center |
cellpadding="y" |
espace situé entre les bordures du tableau et le contenu des cellules |
cellspacing="y" |
taille de la bordure entre les cellules |
summary |
résumé du tableau pour les navigateurs non graphiques |
NB : l'attribut align est déclassé au profit des feuilles de
style.
Attributs cellpadding et cellspacing
aucun attribut |
cellpadding="15" |
cellspacing="15" |
cellule 1 |
cellule 2 |
cellule 3 |
cellule 4 |
|
cellule 1 |
cellule 2 |
cellule 3 |
cellule 4 |
|
cellule 1 |
cellule 2 |
cellule 3 |
cellule 4 |
|
Valeurs pour l'attribut frame
Uniquement en HTML 4.0, les anciennes versions des navigateurs ne connaissent pas cet attribut.
void
pas de cadre
above
côté supérieur
below
côté inférieur
hsides
côtés horizontaux
lhs
côté gauche
rhs
côté droit
vsides
côtés verticaux
box
ou border
: les quatre côtés (ne pas confondre avec
border="n"
qui indique
l'épaisseur du trait du cadre, ici border
signifie un cadre pour les quatre
côtés)
Exemples :
NB : <TABLE frame="border" border="5">
de HTML 4.0 a pour équivalent :
<TABLE border="5">
(dans les exemples ci-dessous nous donnons la syntaxe en HTML 4.0 mais
il vaut mieux pour conserver la compatibilité avec les anciens
navigateurs utiliser border pour indiquer qu'il faut dessiner le cadre et
border=n pour donner une épaisseur de n pixels au cadre, i.e. utiliser
<TABLE border="1">
à la place des
<TABLE frame="border" border="1">
).
Valeurs pour l'attribut rules
Uniquement en HTML 4.0, les anciennes versions des navigateurs ne connaissent pas cet
attribut.
none
aucun
cols
entre les colonnes
rows
entre les lignes
alls
de partout
group
entre les groupes de lignes
Exemples :
Syntaxe : <TD> contenu de la cellule </TD>
Table Data
Attributs de TD
align="letf / center / right / justify / char" | alignement horizontal |
valign="top / bottom / middle / baseline" | alignement vertical, |
width="x" | largeur de la cellule, |
height="y" | hauteur de la cellule, |
colspan="x" | définit une cellule dont la largeur est x
fois celle de la colonne de base (fusion des x colonnes adjacentes), |
rowspan="y" | définit une cellule dont la hauteur est y
fois celle de la ligne (fusion des y lignes adjacentes), |
bgcolor="couleur" | définit la couleur de fond, |
background="url" | image de fond. |
nowrap | force le navigateur à écrire le texte
de la cellule sans saut de ligne |
abbr="texte" | contenu abrégé de la cellule |
axis="texte" | attribue une catégorie à la
cellule (par exemple <TD axis="lieu">Marseille</TD> |
headers=ref | référence des cellules de l'en-tête
qui fournissent une information d'en-tête pour la cellule courante |
Tableau |
HTML |
Voici un tableau avec une seule cellule grise. |
|
<TABLE border="1">
<TD bgcolor="#CCCCCC">
Voici un tableau avec une seule
cellule grise.
</TD>
</TABLE>
|
Une ligne de cellules
Tableau |
HTML |
|
<TABLE border="1" >
<TD> cellule 1 </TD>
<TD> cellule 2 </TD>
</TABLE> |
Syntaxe : <TR> ... </TR>
Table Row
Attributs de TR
valign = "top / bottom / baseline / middle" | alignement vertical |
align = "right / center / left " | alignement horizontal |
bgcolor="couleur" | couleur de fond de la cellule |
Les attributs sont appliqués pour toutes les cellules de la ligne sauf
si un attribut de <TD> donne un autre ordre.
Tableau |
HTML |
cellule 1.1 |
cellule 1.2 |
cellule 2.1 |
cellule 2.2 |
|
<TABLE frame="border" cellpadding="2">
<TR>
<TD> cellule 1.1 </TD>
<TD> cellule 1.2 </TD>
</TR>
<TR>
<TD> cellule 2.1 </TD>
<TD> cellule 2.2 </TD>
</TR>
</TABLE> |
Utiliser <TH> (Table Header) à la place de <TD>, les attributs
sont les mêmes que ceux de TD.
Tableau |
HTML |
titre 1 |
titre 2 |
contenu 1 |
contenu 2 |
|
<TABLE frame="border" cellpadding="2">
<TR>
<TH align="center"> titre 1</TH>
<TH align="center"> titre 2 </TH>
</TR>
<TR>
<TD> contenu 1</TD>
<TD> contenu 2</TD>
</TR>
</TABLE> |
- syntaxe : <CAPTION> ma légende </CAPTION>
- à placer avant le premier TR ;
- attributs :
align="top / bottom / left /right / center" pour la position du titre horizontalement
par rapport au tableau et valign="top / bottom" pour la position verticale (dessus ou
dessous le tableau).
Regroupement de cellules en lignes ou colonnes
- regroupement de cellules en lignes : attribut rowspan de TD;
- regroupement de cellules en colonnes : attribut colspan de TD.
Tableau |
HTML |
titre
Script |
Exécution |
CGI |
par le |
serveur |
javascript |
client |
|
<TABLE frame="border" cellpadding="2">
<CAPTION align="bottom">
titre
</CAPTION>
<TR>
<TH align="left">Script</TH>
<TH align="left" colspan="2">
Exécution</TH>
</TR>
<TR>
<TD>CGI</TD>
<TD rowspan="2">par le</TD>
<TD>serveur</TD>
</TR>
<TR>
<TD>javascript</TD>
<TD>client</TD>
</TR>
</TABLE> |
Nouveaux éléments (HTML 4.0) de groupement dans les tableaux
Le groupement peut permettre aux navigateurs de laisser afficher l'en-tête du tableau
quand on fait défiler la page parce que le tableau est trop long, il permet
également d'aider les navigateurs non graphiques à interpréter le tableau.
Des styles peuvent être attribués aux différentes parties par
l'intermédiaire des attributs align, valign et style (que nous détaillerons
dans le cours sur les feuilles de style).
- THEAD en-tête du tableau
- TBODY corps du tableau
- TFOOT pied du tableau
Structure :
<TABLE>
<THEAD>
<TR>...</TR>
...
<TR>...</TR>
</THEAD>
<TBODY>
<TR>...</TR>
...
<TR>...</TR>
</TBODY>
<TFOOT>
<TR>...</TR>
...
<TR>...</TR>
</TFOOT>
</TABLE>
Exemple :
<TABLE border="5" width="70%">
<THEAD align="right" style="font-family:monaco; color:blue">
<TR>
<TD>en tete 1.1</TD>
<TD>en tete 1.2</TD>
<TD>en tete 1.3</TD>
</TR>
</THEAD>
<TBODY align="center" style="font-family:courier">
<TR>
<TD>corps 1.1</TD>
<TD>corps 1.2</TD>
<TD>corps 1.3</TD>
</TR>
<TR>
<TD>corps 2.1</TD>
<TD>corps 2.2</TD>
<TD>corps 2.3</TD>
</TR>
</TBODY>
<TFOOT align="left" style="font-style:italic; color:red">
<TR>
<TD>pied 1.1</TD>
<TD>pied 1.2</TD>
<TD>pied 1.3</TD>
</TR>
</TFOOT>
</TABLE>
Lorsqu'il n'y a pas d'en-tête ni de pied de tableau TBODY est optionnel.
Groupement d'attributs pour des colonnes
Pour regrouper des attributs de style (align, valign, style), de taille (width, height)
pour plusieurs colonnes (le nombre est donné par span).
syntaxe : <COLGROUP width="t" valign="a" align="a" span="n">
<COLGROUP width="75px" align=left span="3">
<COLGROUP width="50px" align="right" span="3">
<COLGROUP width="100%" align="char" char="." span="3">
donne 75 pixels de large aux trois premières colonnes
et les cadre à gauche, donne 50 pixels de large aux
trois colonnes suivantes et les cadre à droite, et laisse
le reste de l'écran à la dernière colonne qui
cadre les
caractères sur le point décimal.
Les éléments COLGROUP peuvent contenir des éléments COL.
Exemple :
<TABLE border="5" bgcolor="#FFCCCC" width="50%>
<COLGROUP style="font-weight:bold" align="left">
<COL span="3">
<COL span="2" style="color:red" align="center">
<COL span="3" style="color:blue">
</COLGROUP>
<TR>
<TD>1.1</TD>
<TD>1.2</TD>
...
</TR>
...
</TABLE>