Clair Obscur - tutoriaux
Accueil
- CLAIR OBSCUR -


DOSSIER - Conception de tableaux


Les bordures et la liaison de cellules

L'attribut BORDER
Il est possible de modifier l'attribut BORDER (<TABLE BORDER=1>) qui définit la taille du cadre autour du tableau.
Si vous ne souhaitez aucun cadre, il vous suffit de remplacer la valeur 1 par 0 (dans ce cas <TABLE BORDER=0>).

Exemple de tableau
code source
exemple
<TABLE BORDER=1>
<TR>
<TD> Première cellule de la première ligne</TD>
<TD>Deuxième cellule de la première ligne</TD>
</TR>
<TR>
<TD>Première cellule de la seconde ligne</TD>
<TD>Deuxième cellule de la seconde ligne</TD>
</TR>
</TABLE>
Première cellule de la première ligne Deuxième cellule de la première ligne
Première cellule de la seconde ligne Deuxième cellule de la seconde ligne


Autre possibilité
Vous pouvez, en revanche, augmenter l'épaisseur de la cellule, en donnant une plus grande valeur à l'attribut BORDER.
Dans l'exemple suivant, la valeur de BORDER est 7.

Exemple de tableau
code source
exemple
<TABLE BORDER=7>
<TR>
<TD> Première cellule de la première ligne</TD>
<TD>Deuxième cellule de la première ligne</TD>
</TR>
<TR>
<TD>Première cellule de la seconde ligne</TD>
<TD>Deuxième cellule de la seconde ligne</TD>
</TR>
</TABLE>
Première cellule de la première ligne Deuxième cellule de la première ligne
Première cellule de la seconde ligne Deuxième cellule de la seconde ligne


L'attribut cellspacing
Il est aussi possible de modifier la taille des bordures du quadrillage, c'est à dire l'épaisseur des traits qui séparent les cellules. Il suffit d'insérer l'attribut cellspacing dans la balise <TABLE>.
Remarque: si vous donnez la valeur 0 à cellspacing, l'espace entre les cellules est nul (utile lors de l'utilisation de couleurs).
Dans l'exemple suivant, la valeur de cellspacing est 10.

Exemple de tableau
code source
exemple
<TABLE BORDER=7 cellspacing=10>
<TR>
<TD> Première cellule de la première ligne</TD>
<TD>Deuxième cellule de la première ligne</TD>
</TR>
<TR>
<TD>Première cellule de la seconde ligne</TD>
<TD>Deuxième cellule de la seconde ligne</TD>
</TR>
</TABLE>
Première cellule de la première ligne Deuxième cellule de la première ligne
Première cellule de la seconde ligne Deuxième cellule de la seconde ligne


Liaison des cellules

Les différents attributs de liaison
Vous pouvez lier des cellules d'une même ligne ou les cellules d'une même colonne. La liaison s'effectue toujours depuis la première cellule, à savoir la ceullule de départ.

Voici les différents attributs qui permettent les liaisons.
Notez: Les caractères des cellules de titre seront automatiquement mis en gras, d'où "cellule de titre".

<TH COLSPAN=[nombre]> Lie des cellules de titre sur une ligne (la valeur correspond au nombre de cellules à lier)
<TD COLSPAN=[nombre]> Lie des cellules de données sur une ligne (la valeur correspond au nombre de cellules à lier)
<TH ROWSPAN=[nombre]> Lie des cellules de titre sur une colonne (la valeur correspond au nombre de cellules à lier)
<TD ROWSPAN=[nombre]> Lie des cellules de données sur une colonne (la valeur correspond au nombre de cellules à lier)
Exemples de tableaux
Ex 1: TH COLSPAN=4
code source
exemple
<TABLE BORDER=1>
<TR>
<TH COLSPAN=4 ALIGN=CENTER>Cellule de titre</TH>
</TR>
<TR>
<TD>cellule 1</TD>
<TD>cellule 2</TD>
<TD>cellule 3</TD>
<TD>cellule 4</TD>
</TR>
</TABLE>
Cellule de titre
cellule 1 cellule 2 cellule 3 cellule 4

Ex 2: TD ROWSPAN=4
code source
exemple
<TABLE BORDER=1>
<TR>
<TD ROWSPAN=4 ALIGN=CENTER>Cellule de données</TD>
</TR>
<TR><TD>cellule 1</TD></TR>
<TR><TD>cellule 2</TD></TR>
<TR><TD>cellule 3</TD></TR>
</TABLE>
Cellule de données
cellule 1
cellule 2
cellule 3



<< précédent


1. Un tableau simple, la base