Nous abordons ici la partie la plus délicate mais aussi la plus interessante du
point de vue de la présentation. Les tableaux permettent en effet des possibilités
d'alignement que les autres éléments du Html n'autorisent pas. De plus cela permet
de modifier le fond, pour faire de belle tête de châpitre comme celle qui est
juste au dessus :-))).
La structure générale d'un tableau est la suivante :
<TABLE BORDER=1><TR><TD>
blablabla, blabalbla ,
bblablabla,
</TD><TD>
blablabla, blabalbla ,
bblablabla,
</TD></TR><TR><TD>
blablabla, blabalbla ,
bblablabla,
</TD><TD>
blablabla, blabalbla ,
bblablabla,
</TD></TR></TABLE>
|
|
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
| |
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
|
|
Le marqueur <TABLE> initialise le tableau.
Il possède tout un tas de paramètres qui peuvent donner ses caractéristiques.
Par exemple, ici BORDER donne l'épaisseur du bord des cellules et du tableau.
La marqueur <TR>, lui, débute une ligne
d'un tableau, le marqueur <TD> quant à lui débute une
cellule.
Il est possible de donner une couleur de fond particulière à tout le tableau, soit à
une ligne ou à une cellule particuliere. Ceci se fait gràce au paramètre BGCOLOR
Exemple :
<TABLE BORDER=1 BGCOLOR=GRAY><TR><TD>
blablabla, blabalbla ,
bblablabla,
</TD><TD BGCOLOR=RED>
blablabla, blabalbla ,
bblablabla,
</TD></TR><TR BGCOLOR=BLUE><TD>
blablabla, blabalbla ,
bblablabla,
</TD><TD>
blablabla, blabalbla ,
bblablabla,
</TD></TR></TABLE>
|
|
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
| |
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
|
|
Les paramètres du marqueur TABLE sont les suivants:
- COLOR="Couleur" indique la couleur de fond du tableau
- ALIGN= LEFT | RIGHT,
HSPACE et VSPACE ont la même signification
que pour le marqueur IMG
- CELLPADDING="Pixels" determine la marge
d'une cellule. Cette marge est la même de tous les côtes de chaque cellule.
- CELLSPACING="Pixels" determine la largeur en pixels
entre chacune des cellule (à l'exterieur de la cellule).
- WIDTH et HEIGHT
sont censés donner la taille du tableau, soit en pixels, soit en pourcentage de la page.
Je dois avouer que c'est un des paramètres qui me parait fonctionner le moins bien.
Personellement, je n'utilise quasiement que le paramètre du type WIDTH=xx%
pour faire un tableau qui prendra xx% de la page courante.
Les paramètres du marqueur TR sont les suivants:
- COLOR="Couleur" indique la couleur de fond de la ligne
- ALIGN= LEFT | RIGHT | CENTER indiquent
l'alignement horizontal à l'interieur de chacune des cellules de la ligne
(comme DIV
- VALIGN= BOTTOM|MIDDLE|TOP indiquent
l'alignement vertical, BOTTOM: aligné en bas, TOP aligné en haut et
MIDDLE centré
Les principaux paramètres du marqueur TD sont les suivants:
- COLOR="Couleur" indique la couleur de fond de la cellule
- ALIGN= LEFT | RIGHT | CENTERindiquent l'alignement
horizontal à l'interieur de la cellule(comme DIV
- VALIGN= BOTTOM|MIDDLE|TOPindiquent l'alignement
vertical, BOTTOM: aligné en bas, TOP aligné en haut et MIDDLE centré
- COLSPAN=x permet à une cellule d'occuper plusieurs
colonnes consécutives. (voir exemple plus loin)
- ROWSPAN=x permet à une cellule d'occuper plusieurs
lignes consecutives (voir exemple plus loin)
A noter la présence d'un marqueur suppléméntaire <CAPTION
ALIGN=BOTTOM|TOP> qui permet de mettre un titre au tableau. Son paramètre
indique si le titre doit être avant (TOP) ou après (BOTTOM) le tableau.
Quelques exemples :
<TABLE BORDER=1>
<CAPTION ALIGN=BOTTOM>
Exemple de COLSPAN & ROWSPAN
</CAPTION
<TR><TD>
blablabla, blabalbla ,
bblablabla,
</TD><TD COLSPAN=2>
blablabla, blabalbla ,
bblablabla,
</TD></TR><TR><TD>
blablabla, blabalbla ,
bblablabla,
</TD><TD ROWSPAN=2>
blablabla, blabalbla ,
bblablabla,
</TD><TD>
blablabla, blabalbla ,
bblablabla,
</TD></TR><TR><TD>
blablabla, blabalbla ,
bblablabla,
</TD><TD>
blablabla, blabalbla ,
bblablabla,
</TD></TR></TABLE>
|
Exemple de COLSPAN & ROWSPAN
|
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
| |
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
| |
blablabla, blabalbla ,
bblablabla,
|
blablabla, blabalbla ,
bblablabla,
|
|
La suite ....
|