|
1/ Les tableaux
Nous partirons cette fois encore d'une page vierge
: ne comprenant donc aucune information entre les balises
<body> et </body>,
elle se présente donc comme cela :
|
 |
Si vous avez suivi le tutorial précédent,
vous savez que l'on peut inclure sur cette page des
informations de texte et d'image sans aucune mise en
forme particuliere. Il suffit tout simplement de taper
son texte entre <body> et </body>
ou d'y placer une balise <img>
( pour simplifier ).
|
|
|
Voici ce que la source de votre page affichera
aprés l'insertion d'un tableau comportant une rangée
et deux colonnes :
|
|
<table>
ouvre le tableau et contient ses caractéristiques
principales de largeur ( width ), bordure ( border )
et espacement entre les cellules ( cellspacing ).
<tr> ouvre une rangée.
<td> ouvre une cellule. il y en a deux
contenues dans la rangée donc le tableau aura
deux colonnes.
<td>, <tr> et
<table> doivent être fermée
respectivement et dans l'ordre par </td>,
</tr> et </table>.
est un morceau de code signifiant
"espace", il montre que les cellules sont
vides. il est inséré automatiquement par
Dreamweaver mais, dans ce cas précis, ne sert
à rien.
|
|
|
Attention, lorsque vous rencontrez un
code "inutile" supprimez le, votre page ne s'en
portera que mieux. Dreamweaver est le spécialiste
de ce genre de fantaisie et un nettoyage du code n'est pas
inutile, il facilitera d'autant l'affichage de la page.
On peut dés lors insérer ce que l'on veut
dans un tableau :
|
|
|
|
Ici nous avons méler l'exemple de
texte et d'image précédent avec le tableau défini
ici. la premiere colonne contient le texte, la seconde l'image.
Une largeur ( width ) de 100% signifie que votre tableau fera
toute la largeur de l'écran de l'internaute et ce quel
que soient ses options d'affichage. Mon conseil est de plutôt
définir votre tableau en pixels et ainsi rester maitre
de l'affichage de vos pages.
Un tableau de border="0" sera invible à l'écran.
l'internaute n'en verra que le contenu.
|
2/ saut à
la ligne et paragraphe
Avant d'aborder d'autres options des tableaux,
voyons maintenant une petite particularité du HTML,
l'affichage des sauts de ligne dans le code source de la
page.
Depuis que vous lisez ce tutorial, vous avez sans doute
vu dans mes pages des "sauts à la ligne"
plus ou moins marqués. Il y a pourtant une grande
différence entre ...
ça et ...
ça !
|
|
Dans le premier cas, le code affichera
ceci :
|
|
|
|
Dans le second, ceci:
|
|
|
|
Dans le premier cas, la balise <br>
signifie un saut à la ligne. elle est employée
seule, à l'endroit ou vous voulez envoyer votre texte
à la ligne. Sous Dreamweaver en mode création,
elle est obtenu par "maj+Entrée"
Dans le second cas, la balise <p> signifie
un saut de paragraphe ( le texte saute une ligne entière
) et doit impérativement être conclue par </p>.
Sous Dreamweaver en mode création, elle est obtenue
par "Entrée".
Il est à noter que le texte reste dans les deux cas
sous les options définies précédemment
: avec <br> il les affiche une fois
pour toute, avec <p> il les répète.
|
|
3/ fusion
de cellule, espace et marge
les tableaux recélent beaucoup de possibilités.
On peut ainsi créer une cellule de la largeur du tableau
dans un tableau contenant au départ 2 colonnes, on
peut donner une marge au contenu du tableau et également
régler l'écart entre les cellules.
|
Fusion :
Dans cet exemple
nous utiliserons un tabeau de 200 pixels de large,
contenant au départ 2 colonnes et 2 rangées,
soit 4 cellules répartie comme ceci : un titre,
une cellule vide et deux cellules de texte. Les cellules
sont par défaut de tailles équivalentes.
Si nous voulons voir le titre du tableau être
centré, nous devons fusionner les deux premières.
|
|
|
|
|
la fonction colspan
inclue dans la balise <td> va
nous permettre de fusionner les deux premières
cellules. La deuxième balise <td>
aura disparue.
Pour centrer le texte, il est nécessaire de placer
une balise <div>, qui est un
indicateur de position, autour du texte de titre.
Attention, il ne s'agit pas d'un calque.
Nous verrons plus loin que les calques également
peuvent être nommés <div>. |
|
|
|
