SELFHTML/Quickbar
HTML
Tableaux SELFHTML/Quickbar
HTML
Tableaux
 |
Tuyaux pour travailler avec des tableaux sans quadrillage |
|
|
 | |
Quand sur des pages WWW vous rencontrez des éléments alignés proprement
mais relativement bien équilibrés, il s'agit dans de nombreux cas d'un travail
effectué avec la technique des tableaux sans quadrillage. Les tableaux sans
quadrillage n'ont, comme leur nom l'indique, aucun quadrillage visible. C'est
pourquoi l'utilisateur ne remarque pas du tout qu'il s'agit en réalité d'un
tableau.
Vous devez cependant tenir compte d'un inconvénient si vous avez l'intention
de mettre dans un tableau tout le contenu d'une page WWW: Les tableaux ne sont
affichés par le navigateur que lorsque leur contenu complet a été lu ou
plutôt lorsque le navigateur sait exactement dans quelle hauteur et quelle
largeur le tableau doit être affiché. Ce qui signifie lors de la transmission
de données sur le WWW qu'un utilisateur attend plus longtemps devant son écran
avant d'avoir la moindre chose affichée. À moins que vous n'utilisiez la
commande pour prédéfinir
des colonnes.
Quelques tâches qui étaient nécessaires pour les tableaux sans quadrillage
courants HTML se laissent entre temps résoudre également grâce aux 
feuilles
de style CSS. C'est le cas notamment pour les espaces
et marges, pour la structure
de l'arrière plan de passages distincts ou pour le positionnement
d'éléments.
|
Plusieurs colonnesLes tableaux ne servent pas uniquement à afficher de l'information sous forme de tableaux. En HTML comme dans d'autres systèmes de traitement de texte, les tableaux servent également à Forcer la disposition en plusieurs colonnes à l'écran.
À l'aide d'un tableau sans quadrillage à trois colonnes par exemple, vous pouvez réaliser un paragraphe en trois colonnes assez attrayant dans le style d'un journal.
<table cellpadding=5>
<tr valign=top>
<td width=33%>
Ici se trouve le texte de la colonne 1
</td>
<td width=33%>
Ici se trouve le texte de la colonne 2
</td>
<td width=34%>
Ici se trouve le texte de la colonne 3
</td>
</tr>
</table>
|
Dans cet exemple sont définies trois colonnes, dont les largeurs ont été
définies avec les mentions width= 33%, 33% et 34% (= 100%).
Dans chacune des trois colonnes peuvent se trouver des éléments au choix. Des
graphiques qui sont trop larges font sauter la limitation de largeur des
colonnes.
(voir aussi forcer
la largeur de colonnes)
Étant donné que les contenus des colonnes peuvent être de longueur
variable, vous pouvez grâce à la mention valign=top dans le repère
d'introduction de la ligne (<tr>) les aligner tous en haut.
(voir aussi alignement
en haut, au milieu, en bas)
Veillez à ce que les contenus des colonnes définies soient environ de la
même longueur et dans la mesure du possible, qu'ils ne soient pas plus longs
que ce qu'un écran avec une résolution de 640x480 pixels peut afficher. Car
dans le cas contraire, l'utilisateur doit continuellement faire dérouler
l'écran. Au cas où vous voulez mettre davantage d'information, il est
préférable de noter à la suite tout simplement une nouvelle ligne avec les
trois cellules suivantes. Au cas où vous voulez noter des titres ou des lignes
de séparation qui s'étendent sur les trois colonnes, vous devez là aussi
noter une nouvelle ligne distincte de tableau. au lieu de trois cellules, n'en
notez qu'une que vous étendrez sur les trois colonnes grâce à la mention colspan=3 .
(voir aussi relier
des cellules dans une ligne sur plusieurs colonnes)
Pour la réalisation de plusieurs colonnes en HTML, il y a outre la
possibilité des tableaux sans quadrillage, également une possibilité directe
pour texte
en colonnes, qui cependant n'est interprétée que par Netscape
depuis V3.0.
Par ailleurs il y a aussi une variante officielle et standard, à savoir
les mentions
de feuilles de style pour le texte en colonnes. Ces mentions ne sont
cependant pas encore interprétées ni par Netscape ni par l' Explorer Internet MS
dans leur version 4.
|
|
Texte et GraphiqueAvec l'aide de tableaux sans quadrillage, vous pouvez disposer proprement plusieurs graphiques les uns à côté des autres et avez la possibilité de placer tout aussi proprement du texte au dessus et en dessous.
<table width=500 cellpadding=10>
<tr align=center>
<td><h3>Titre</h3><img src="graphique1.gif" width=70 height=76 border=0>
<td><h3>Titre</h3><img src="graphique2.gif" width=66 height=76 border=0>
<td><h3>Titre</h3><img src="graphique3.gif" width=81 height=76 border=0>
</tr>
<tr align=center valign=top>
<td><texte descriptif>
<td><texte descriptif>
<td><texte descriptif>
</tr>
</table>
|
Dans cet exemple trois colonnes sont définies. Dans la première ligne
doivent figurer trois titres avec les trois graphiques correspondants au dessous,
dans la deuxième ligne trois textes descriptifs appropriés à chacun des trois
graphiques et placés au dessous. Avec la mention width=500 une
largeur totale du tableau a été obtenue. La largeur est choisie pour
concorder avec la somme des largeurs de tous les graphiques et celle du texte
pour que l'aspect soit présentable.
(voir aussi forcer
la hauteur et la largeur du tableau complet).
Avec la mention cellpadding=10 on s'assure que les contenus des
cellules, s'ils sont importants, ne soient pas trop près les uns des autres.
(voir aussi espace
du contenu de la cellule au bord de la cellule).
Avec <tr align=center> toutes les cellules de la ligne
concernée seront centrées. Étant donné que les textes descriptifs peuvent
être de longueurs différentes on obtient leur alignement en haut avec la
mention valign=top,
(voir aussi alignement
horizontal et alignement
vertical).
Les titres et les graphiques dans l'exemple ci-dessus sont bien notés les
uns à côté des autres. Mais étant donné que les titres créent leurs
propres paragraphes, le graphique mentionné à sa suite sera placé sous le
titre à l'affichage. Comme le contenu des cellules est aligné au centre, le
titre sera proprement centré au dessus de chacun des graphiques.
(voir aussi titres
et incorporer
des graphiques).
|
|
Forcer les marges de pageGrâce à un tableau sans quadrillage, vous pouvez avec une seule cellule de tableau forcer les marges de page.
<div align=center>
<table width=70%>
<tr>
<td>
Ici suit le contenu proprement dit
</td>
</tr>
</table>
</div>
|
Dans cet exemple on a d'abord défini un passage centré avec <div align=center> .
(voir aussi définir
un passage avec plusieurs éléments).
Entre le repère d'ouverture et celui de fermeture </div> un
tableau est défini, il ne comprend qu'une ligne avec une cellule. Dans cette
cellule se trouve le contenu complet auquel seront assignées des marges. Les
marges elles-mêmes seront obtenues par la mention width=70% dans le
repère d'ouverture du tableau. Étant donné que le tableau est lui-même
centré, est créée aussi bien à droite qu'à gauche une marge de 15%.
(voir aussi forcer
la hauteur et la largeur du tableau complet).
Entre temps vous pouvez aussi faire ce genre de choses avec l'aide de feuilles
de style CSS. Les mentions de feuilles de style appropriées sont les
mentions de feuilles de style concernant les espaces,
marges, alignement.
|
|
Surfaces coloréesAvec des tableaux sans quadrillage colorés vous pouvez mettre des surfaces colorées sans que ça ne ressemble à un tableau. Tous les exemples dans ce document, y compris celui qui suit, sont basés sur cette technique.
<table bgcolor=#000066 cellpadding=20>
<tr>
<td>
<div color=#FFFFFF>Ici suit le contenu - blanc sur fond bleu foncé</font>
</td>
</tr>
</table>
|
Dans cet exemple un tableau avec une seule cellule a été défini. En
mentionnant bgcolor=#000066 un arrière plan bleu foncé est affecté
au tableau. Pour que la surface entoure généreusement le texte, un espace
le séparant du bord de la cellule a été défini avec cellpadding=20.
Pour faire ressortir le texte de l'arrière plan sombre, une couleur qui
contraste (blanc) a été définie avec <font color=#FFFFFF>.
(voir aussi tableaux
colorés, espace
du contenu de la cellule au bord de la cellule et couleur
de police).
Entre temps vous pouvez aussi faire ce genre de choses avec l'aide de feuilles
de style CSS. Ainsi vous pouvez par exemple définir un passage avec <div>...</div>
et noter les données de feuilles de style dans le repère d'ouverture <div>
Les mentions de feuilles de style appropriées sont les
mentions de feuilles de style concernant la. couleur
d'arrière plan, la couleur
du texte et l' espace
intérieur.
|
| |
après: |
Tableaux
et moyens non visuels
|
avant: |
Titres d'un tableau et
alignement
|
SELFHTML/Quickbar
HTML
Serge François, 13405@free.fr
