Principaux éléments
|
remarques
|
exemples
|
résumé du tableau |
pour aider à la compréhension du tableau sur
les navigateurs non-graphiques
|
<table summary="En 10 ans les ventes ----" >
|
légende |
<caption>légende</caption>
|
en-tête |
<thead> <tr> <th>entête col1</th>
<th>entête col2</th> </tr> </thead> |
corps du tableau |
<tbody><tr>...</tr></tbody> |
pied du tableau |
<tfoot><tr>...</tr></tfoot> |
Caractéristiques générales
|
remarques
|
exemples
|
largeur du tableau |
s'exprime en % de la largeur de page ou en pixels
|
<table width ="80%">
<table width ="450">
|
alignement sur la page |
|
<table align= "center">
|
nombre de lignes |
déterminé par le nombre de balises <tr>
|
|
nombre de colonnes |
déterminé par le nombre de balises <td>
par ligne.
|
|
disposition des colonnes |
rarement utilisé
alignement horizontal : align=left, right, center
alignement vertical : valign= middle (par
défaut),top, bottom, baseline
|
<table>
<colgroup span=1 align="right" width="75">
<colgroup span=5 align="center">
<tr>...
le 1er colgroup s'applique à la 1e col., le 2e aux
5 suivantes...
|
Espacement et bordures
|
|
remarques
|
exemples
|
marge intérieure à la cellule
|
écart entre le contenu et les bords, s'exprime en
pixels
|
<table cellpadding="10">
|
espace entre les cellules |
s'exprime en pixels
|
<table cellspacing="5">
|
taille de la bordure |
détermine l'épaisseur du quadrillage en pixels
|
<table border="1">
|
arrière-plan |
couleur ou image
|
<table bgcolor ="#CCFFCC">
<table background ="../images/sable.gif">
|
Caractéristiques d'une ligne
(l'emportent sur celles du tableau)
|
|
remarques
|
exemples
|
alignement horizontal du texte
dans la ligne |
center (par défaut), left, ou right
|
<tr align="right">
|
alignement vertical du texte |
middle (par défaut),top,
bottom, baseline |
<tr valign="top">
|
arrière-plan |
couleur ou image (masque l'arrière plan du tableau
sur la ligne concernée)
|
<tr bgcolor="#FFFF66">
<tr background ="../images/ciel.gif">
|
hauteur minimale |
en pixels
|
<tr height="27">
|
Caractéristiques d'une cellule
(l'emportent sur celles de la ligne et du tableau)
|
|
remarques
|
exemples
|
alignement horizontal du texte dans la ligne
|
center (par défaut), left, ou right
|
<td align="right">
|
alignement vertical du texte
|
middle (par défaut),top, bottom,
baseline
|
<td valign="top">
|
arrière-plan
|
couleur ou image (masque l'arrière plan du tableau
ou de la ligne sur la cellule concernée)
|
<td bgcolor="#FFFFFF">
<td background ="../images/nuage.gif">
|
étendue (cellules fusionnées) |
nb de lignes ou de collonnes sur lesquelles s'étend
la cellule
|
<td colspan="2">
<td rowspan="3">
|
Fioritures...
Peu de navigateurs savent les interpréter, préférer
l'utilisation des feuilles de style.
couleur des bordures
|
<table bordercolorlight="#CCCCCC" bordercolordark="#999999
...
<td bordercolor= "#FF9999" ...
|
affichage du cadre
|
détermine le contour du tableau
<table frame =" " ...
void (pas de contour) ; above (en haut) ; below (en bas)
; hsides (haut et bas) ; lhs (à gauche) ; rhs (à
droite) ; vsides (droite et gauche) ; box ; border
|
séparation des cellules
|
<table rule=" " ...
none (pas de quadrillage) ; all (quadrillage) ;
rows (séparation des lignes) ; groups (séparation
des groupes de cellules : thead, tbody, tfoot, colgroup)
|
|