|
Créer sa
page perso
|
|
Page -
17
|
Présentation
générale
Le langage HTML est par nature peu propice à la
réalisation de pages symétriques, alignées,
aux fins de ligne justifiées (on y arrive maintenant : voir
page 74), en un mot peu propice à une création
comparable à la PAO (Programmation Assistée par
Ordinateur) obtenue à partir de certains logiciels
graphiques et de traitement de textes, afin de réaliser une
mise en page idéale.
Heureusement, pour y pourvoir et tendre vers cette mise en page
au moins satisfaisante sur le Web, il existe les Tableaux dont
l'origine remonte à 1995 et le tag "Table" est
inventé par Netscape.
Constatez au
préalable les différences obtenues entre Netscape 4 et
+ et Internet Explorer 4 et +, et aussi suivant la couleur de votre
fond de page. Ces tableaux de premier niveau ne sont simplement
affichés que pour vous donner une idée
générale et, vous allez ensuite retrouver la
progression "pas à pas" que vous connaissez bien si vous
visitez quelquefois ce Site
En premier sur fond blanc
:
 Internet
Explorer 4  Navigator
Netscape 4
Les mêmes tableaux avec une couleur de fond de
page.
Valeurs en % , pourcentage,
soit WIDTH="75%" ce qui contraint le tableau à occuper
un certain pourcentage de la largeur de la fenêtre ouverte.
Valeurs en pixels, soit
WIDTH="320" fait que le tableau reste fixe comme dimension,
quel que soit la largeur de la fenêtre ouverte.
Toujours procéder à des essais, quitte à
mettre le tableau en % et les cellules en pixels par
exemple.
Nouvelle race, le chien " Kadré "
Vous remarquez que chaque navigateur a tenu à marquer sa
différence dans le rendu des tableaux, et c'est une raison
supplémentaire et suffisante qui doit inciter chaque
concepteur de Site à visualiser alternativement ses pages dans
les deux logiciels, ne serait-ce que pour trouver "un juste milieu"
qui permette une présentation acceptable sur le Web, quel que
soit le navigateur utilisé par le surfeur.
Car c'est bien à lui que vous vous adressez ? n'est-ce pas
!
Par exemple le tableau du haut de cette page
sur fond violet, va apparaître avec une bordure blanche sur
Navigator et une bordure bleue ciel sur Internet Explorer qui
supporte cette fonction supplémentaire.
Définition du tableau de
base, avec une cellule unique
Les tag
<TABLE>.....</TABLE>
marquent le début et la fin d'un tableau.
Il sont accompagnés (pour le tag d'ouverture) de
l'attribut BORDER, qui
définit l'épaisseur de la bordure autour du
tableau.
|
Les tableaux
présentés sont en couleur pour faciliter leur
visualisation
|
code de ce tableau ci-après expliqué
|
<CENTER>
<TABLE
BORDER=7
BGCOLOR="#FFFF99" WIDTH="75%" HEIGHT="10%">
<TR>
<TD>
<CENTER><FONT
COLOR="#0000FF">Les tableaux
présentés sont en couleur pour faciliter leur
visualisation</FONT></CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
|
analyse
- TABLE (Table) sert à
introduire le tableau, dans son ensemble.
- BORDER (Bordure) qui
l'accompagne sert à définir l'épaisseur du cadre
du tableau.
- BGCOLOR =#FFFF99 vous donne la
couleur interne du tableau
- TR (Table Row)
marque l'ouverture d'une ligne d'un tableau.
- TD (table Data) marque le
début des données à l'intérieur de la
cellule (pour l'instant il n'y en a qu'une).
- WHIDHT et HEIGHT servent à fixer la dimension du
Tableau : pourcentage, pixels ou automatique.
* en pourcentage (% ) par rapport à la grandeur de
l'écran du navigateur ou en pixels (chiffre sans signe
distinctif) fixe la grandeur du tableau quel que soit l'affichage, ce
qui parfois empêche de visualiser le tableau en entier ou
encore en automatique et le navigateur fixe le tableau à la
valeur correspondante à son contenu.
Il est important de noter que si vous n'êtes pas obligé
de fixer des valeurs à un tableau c'est recommandé, car
ainsi le navigateur n'a pas a effectuer de calculs
supplémentaires et le chargement de la page s'en trouve
accéléré.
Attribut
BORDER
|
Ici, le BORDER a été
fixé à zéro, donc sans bordure.
|
|
<TABLE
BORDER=0
BGCOLOR="#FFFF99" WIDTH="75%" HEIGHT="7%">
<TR>
<TD>
<P ALIGN=right><FONT
COLOR="#0000FF">Ici, le BORDER a
été fixé à
zéro, donc sans bordure.</FONT>
</TD>
</TR>
</TABLE>
|
- <CENTER> + </CENTER>
qui encadrait le texte (ne confondez pas avec celui qui encadrait le
tableau) a été remplacé par
<ALIGN=right> sans tag de fermeture.
- BGCOLOR="#FFFF99" donne la couleur du tableau.
- WIDTH="75%" HEIGHT="7%"> fixe la dimension du tableau (ici en
pourcentage).
Définition du tableau de
base, avec deux cellules
|
Le tag
<TH>
sert pour les titres et se ferme avec
</TH>
|
|
Vous pouvez compiler autant de
cellules qu'il vous plaît.
|
<TABLE BORDER=1 BGCOLOR="#CCFFCC"
WIDTH="80%">
<TR> <TH>
<P><FONT COLOR="#330000">Le tag
<TH> sert pour les titres et se ferme avec
</TH></FONT></P>
</TH></TR>
<TR><TD>
<P ALIGN=right
><FONT COLOR="#CC0000">Vous pouvez
compiler autant de cellules qu'il vous
plaît.</FONT></P>
</TD></TR>
</TABLE>
|
analyse :
- Pas de HEIGHT pour dimensionner la hauteur des cellules, et le
texte est donc pratiquement jointif de la bordure interne de la
cellule, mais nous verrons plus loin comment y remédier pour
une meilleure présentation. Seul WIDTH="80% définit la
largeur du tableau.
- Dans la première cellule après TR, au lieu du TD
habituel, vous trouvez <TH> et
>/TH> ( TH = Table Header) qui servent à
désigner une cellule d'en-tête avec automatiquement
le texte en gras et centré.
- Vous retrouvez la deuxième cellule avec le TR et le TD
normaux.
- A titre d'exemple son texte n'a pas non plus été
centré.
-COLOR="#330000" et COLOR="#CC0000" pour la couleur des textes.
Les tableaux offrent de nombreuses possibilités que vous
allez découvrir dans les pages suivantes, mais demande de la
rigueur. Pour ceux qui ont suivi la méthode que je
préconise en début de ce dossier, consistant à
apprendre à programmer manuellement en premier, vous allez
maintenant pouvoir l'expérimenter.
En effet lorsque vous utiliserez un logiciel de programmation, il
sera quelquefois utile d'aller corriger ou modifier des tags dans la
source de votre fichier. Vous n'éprouverez alors aucune
crainte à passer derrière le rideau de la
scène.
exemple plus
complet
|
prix des articles
|
Unité
|
Quantité
|
Total
|
|
pack de 10 bières
|
25,00
|
2
|
50,00
|
|
<TABLE BORDER=1 BGCOLOR="#FF9999"
WIDTH="80%">
<TR>
<TH WIDTH="40%"><P>prix des
articles</TH>
<TH
WIDTH="18%"><P>Unité</TH>
<TH><P>Quantité</TH>
<TH
WIDTH="20%"><P>Total</TH>
</TR>
<TR>
<TD WIDTH="40%"><P>pack de 10
bières></TD>
<TD WIDTH="18%"><P>25,00</TD>
<TD><P>2</TD>
<TD WIDTH="20%"><P>50,00</TD>
</TR>
</TABLE>
|
Vous constatez que dans cet exemple la cellule "Quantité"
n'a pas de valeur et a pris le restant de la place laissée par
les trois autres cellules, sur un total de 8 0% pour le tableau
complet. Il s'agit de faire des essais et de rechercher la meilleure
présentation. Il faut un peu d'initiative et du goût
!
Lignes de couleurs
différentes
<CENTER><TABLE
BORDER=0 BGCOLOR="#FF00FF" CELLSPACING=0
WIDTH="70%">
<TR>
<TD>
<P>c</P>
</TD>
</TR>
<TR
BGCOLOR="#FFFF00">
<TD>
<P>c</P>
</TD>
</TR>
<TR>
<TD>
<P>c</P>
</TD>
</TR>
</TABLE>
</CENTER>
|
c = lettre au hasard pour donner du volume au
tableau.
<TR BGCOLOR="#FFFF00"> =
la couleur est palcé après le tag BR pour
donner une couleur différente de celle établie pour
l'ensemble du tableau qui est notifiée ci-après
:
<TABLE BORDER=0 BGCOLOR="#FF00FF"
Sommaire Page perso
Tous
droits réservés © 1997. aidenet.com
|
