|
Créer sa
page perso
|
|
Page -
18
|
Cellules de
tableaux
Après la construction d'un Tableau de Base à
la page précédente, vous allez maintenant
découvrir d'autres possibilités pour positionner du
texte ou des images ou encore positionner du texte suivant des
variables, au moins les plus fréquentes et utiles.
Largeur des cellules
tableau de base , mais partagé en cellules de
largeur non définies
|
cellule 1
|
c'est la cellule 2
|
ici cellule 3
|
<CENTER><B><TABLE
BORDER=2 WIDTH="80%"> <TR BGCOLOR="#FFFFFF">
<TD BGCOLOR="#FF00FF">
<CENTER>cellule 1</CENTER>
</TD>
<TD BGCOLOR="#00FF33">
<CENTER>cellule 2</CENTER>
</TD>
<TD BGCOLOR="#00FFFF">
<CENTER>cellule 3</CENTER>
</TD>
</TR> </TABLE>
</B></CENTER>
Notez que le tableau est centré, avec trois cellules
égales avec les tags <TD> et </TD> et des couleurs
au choix.
Le <CENTER> et son tag de
fermeture </CENTER> qui
encadrent le tableau servent à centrer ce dernier par rapport
à la largeur de la page. Par contre les autres tags
<CENTER> servent ici à centrer le texte dans chacune des
cellules.
ici avec des cellules de différentes largeurs
définies
|
cellule 1
|
cellule 2
|
cellule 3
|
<CENTER><B><TABLE BORDER=2
WIDTH="80%"> <TR
BGCOLOR="#FFFFFF">
<TD WIDTH=45%
BGCOLOR="#FF00FF"> <CENTER>cellule
1</CENTER> </TD>
<TD WIDTH=15%
BGCOLOR="#00FF33"> <CENTER>cellule
2</CENTER> </TD>
<TD WIDTH="27%"
BGCOLOR="#00FFFF"><CENTER>cellule 3</CENTER>
</TD>
</TR> </TABLE> </B></CENTER>
Le tableau représente une largeur de 80% de l'écran
du visiteur, avec la première cellule pour 45%, la
deuxième 15% et la troisième prend le reste ou encore
on la fixe comme indiqué en marron.
Plusieurs lignes et colonnes
tableau centré avec
trois cellules identiques
définies
|
un
|
deux
|
trois
|
|
quatre
|
cinq
|
six
|
<CENTER><TABLE BORDER=1 WIDTH="80%" >
<TR>
<TD WIDTH="31%" BGCOLOR="#99FFFF">
<CENTER>un</CENTER>
</TD>
<TD WIDTH="31% BGCOLOR="#99FF66">
<P>deux</P>
</TD>
<TD WIDTH="31% BGCOLOR="#FF3366">
<CENTER>trois</CENTER>
</TD>
</TR>
<TR>
<TD WIDTH="31%" BGCOLOR="#FFCC99">
<CENTER>quatre</CENTER>
</TD>
<TD WIDTH="31% BGCOLOR="#FF99FF">
<CENTER>cinq</CENTER>
</TD>
<TD WIDTH="31% BGCOLOR="#FFFF00">
<CENTER>six</CENTER>
</TD>
</TR>
</TABLE> </CENTER>
Notez qu'entre les deux tags "TABLE et bien que soudées,
les deux lignes du tableau sont indépendantes du point de vue
code entre <TR> et >/TR>, quant au texte de la
cellule "deux" il n'est pas centré.
- Un tableau encadré par TABLE
- Lequel tableau possède un cadre BORDER
- Deux lignes encadrées par
TR
- Trois colonnes encadrées par
TD
- Des couleurs définies par BGCOLOR="#xxxxxx"
ça va pas non
!!! pouvez pas m'attendre ?
COLSPAN - Fusion de cellules
horizontales
|
Bonjour les
internautes
|
|
un
|
deux
|
trois
|
<TABLE BORDER=1 WIDTH="100%">
<TR>
<TD
COLSPAN=3 BGCOLOR="#FFFFCC">
<CENTER><FONT SIZE="+2"
COLOR="#CC33FF"><B>Bonjour les
internautes</B></FONT></CENTER>
</TD> </TR>
<TR>
<TD BGCOLOR="#33FF00">
<CENTER>un</CENTER>
</TD>
<TD BGCOLOR="#33FFCC">
<P>deux</P>
</TD>
<TD BGCOLOR="#FFFF66"> <P
ALIGN=right>trois</P>
</TD>
</TR>
</TABLE>
Notez le tag
COLSPAN=3
qui occupe une ligne correspondante à 3
cellules. On aurait pu aussi bien ne lui en attribuer que
deux.
NOTA : Dans cet
exemple vous avez réalisé la première ligne en
mettant en style gras le texte "Bonjour les internautes" et puis
centré.
S'il est possible d'obtenir un titre avec TH vu page
précédente, cette option ne peut se réaliser
qu'à l'intérieur d'une cellule et si l'exemple semble
similaire c'est qu'il a été présenté sur
un tableau d'une seule colonne. Ici c'est totalement différent
et dans le tableau ci-dessous le tag TH appliqué à
"deux", n'aurait effet que sur ce mot sans rien bouger d'autre et la
cellule "un" resterait identique. Peut aussi à l'occasion
rendre service.
Border=1 et Colspan=2 cellules
|
un
|
deux
|
|
trois
|
quatre
|
cinq
|
<TABLE BORDER=1 WIDTH="80%" >
<TR><TD WIDTH="31% "
BGCOLOR="#FFCC99"> <CENTER>un</CENTER>
</TD>
<TD COLSPAN=2
BGCOLOR="#FFFF99"> <CENTER>deux</CENTER>
</TD>
<TD><P></P></TD></TR>
<TR> <TD WIDTH="31%"
BGCOLOR="#33FF66"> <CENTER>trois</CENTER>
</TD>
<TD WIDTH="28%" BGCOLOR="#FF99FF">
<CENTER>quatre</CENTER> </TD>
<TD WIDTH="24%" BGCOLOR="#33FFFF">
<CENTER>cinq</CENTER> </TD>
</TR>
</TABLE>
Border=0 et Colspan=2 cellules
|
un
|
deux
|
|
trois
|
quatre
|
cinq
|
Même tableau mais avec BORDER=0 donc bordure non
apparente.
ROWSPAN - Fusion de cellules verticales
<TABLE BORDER=5 WIDTH="80%" HEIGHT="18%">
<TR> <TH
ROWSPAN=6 WIDTH="10%"
HEIGHT="12%" BGCOLOR="#FFFF99">
<P>exemple</P></TH>
<TD WIDTH="20%" HEIGHT="2%">
<CENTER>1</CENTER> </TD> </TR>
<TR><TD WIDTH="20%" HEIGHT="2%" BGCOLOR="#99FF66">
<CENTER>2</CENTER> </TD> </TR>
-----/-----
<TR><TD WIDTH="20%" HEIGHT="2%">
<CENTER>6</CENTER> </TD> </TR>
</TABLE> </B></FONT></CENTER>
Pour réaliser cette présentation, le tag
ROWSPAN exprimé par
un nombre a eu pour effet de lier les cellules verticalement et
d'obtenir ainsi une seule colonne.
Dans la cellule de gauche, le tag
TH synonyme de titre, a
été employé et le mot "exemple" a
été automatiquement
centré et en style
gras. Il est évident que le corps de ce texte
est variable.
Sommaire Page perso
Tous
droits réservés © 1997. aidenet.com
|
