Tables, suite
Tutoriaux, Sommaire
Html
Quand les tables n'ont pas une largeur de 100%,
elles sont par défaut aligné à gauche, la commande pour spécifier
l'alignement dans le tag <table> est,
<table align=center> pour une
table centrée
<table align=right> pour une
table alignée à droite
<table align=left> pour une
table alignée à gauche, (condition de défaut)
Exercice,
dans la forme ci-dessous aligner la
table au centre
Corrigé
à droite
Corrigé
Nous avons déjà vu la commande border=n, si n=0
la bordure disparaît
Exercice, donner différentes valeurs, dont zéro, à la
commande border.
CELLPADDING
Vous pouvez fixer l'espace entre la bordure de la cellule et
son contenu, texte ou image, par la commande cellpadding=n, où n est la
distance en pixel. Le défaut est 1. Cliquez
ici pour voir dans la forme ci-dessous un exemple de cellpadding à 0, vous
pouvez voir que le texte est collé à la bordure.
Exercice,
essayez différentes valeurs de
cellpadding
CELLSPACING
Cette commande, (CELLPASCING),
fixe l'espace en pixel entre les cellules, le défaut est 2.
Cliquez
ici pour voir dans la forme ci-dessous un exemple de cellspacing a 0.
Exercice,
essayez différentes valeurs de
cellspacing .
De la même façon que nous pouvons choisir pour
une page Html une couleur ou une image de fond, nous pouvons fixer la couleur ou
le fond d'une table entière ou d'une cellule.
Si vous ne spécifiez rien, le fond est transparent, vous
voyez la couleur ou le fond de la page.
Couleur, la commande est la même que pour la page,
bgcolor=aqua,
si vous introduisez cette commande dans le tag <table>
comme <table bgcolor=aqua> vous colorez toutes les cellules, vous pouvez
voir un exemple dans la forme ci-dessous.
si vous l'introduisez dans le tag <td> comme <td
bgcolor=red> vous colorez une seule cellule. Voir
un exemple dans la forme ci-dessous.
Image de fond .
On peut choisir pour le fond, de la table ou d'une cellule
une image, comme pour une page l'image sera répétée pour couvrir la surface.
La syntaxe est la même que pour une page, background="nom de l'image"
Exemple,
<table border="1" width="100%" bgcolor=yellow
background="images/ligthex.jpg">
Voir
On doit formater le text,
(taille, fonte, couleur, etc..), cellule par cellule. Essayons d'englober une
table dans un tag font,
<font size=+3 color=blue> Controle de la fonte
<table>
...Contenu de
la table
</table>
</font>
Vous constaterez en exécutant la forme ci-dessous que le
contenu des cellules n'est pas affecté par le tag font.
On doit formater cellule par cellule,
<td><font
size=+1 color=blue>Cellule 1</font></td>
etc....
Corrigé
Vous pouvez aligner le contenu des cellules dans le sens
vertical et horizontal. Le défaut étant alignement vertical milieu, alignement
horizontal gauche.
Horizontal, instruction align, cette instruction peut
prendre trois valeurs, left, center, right, (gauche, centré, droit).
Vertical, instruction valign, (vertical alignement),
cette instruction peut prendre trois valeurs, top, middle, bottom, (haut,
milieu, bas).
Ces deux instruction s'appliquent ou au tag <tr>, dans
ce cas toute la ligne est affectée ou au tag <td> qui n'affecte qu'une
cellule.
Vous pouvez voir un exemple dans la forme ci-dessus, en cliquant
ici.
Dans cet exemple,
la première ligne est formatée
toute siére par le tag <tr>, alignement vertical haut, alignement
horizontal centré,
la cellule 5 est formatée par son
tag <td>, alignement vertical bas, alignement horizontal droit.
