tableaux HTML

Transcription

tableaux HTML

Chapitre 11
Utiliser
les
tableaux
,
pour egayer vos pages
• • • • • • • •• • •• •• • •• •• • • • • • • • • •• • • •
Dans ce chapitre:
Comprendre l'intérêt des tableaux.
~ Concevoir un tableau.
Créer des tableaux simples.
Etaler des éléments sur plusieurs cellules.
~ Ajouter des images, des hyperliens ou du texte aux cellules d'un tableau.
Des astuces et des techniques
pour les tableaux.
• •• • • • • • • ••• •• • • • • • • • • • • • • • • • • • •
H
istoriquement, les tableaux contiennent et agencent des données
dans une grille pour en faciliter la lecture. Toutefois, en (X)HTML,
ils servent à tout autre chose - à contrôler l'agencement d'une page Web.
La plupart des pages Web contiennent au moins un tableau - parfois
même des tableaux imbriqués dans des tableaux. Les tableaux (X)HTML
permettent de présenter du texte et des images dans vos pages avec
efficacité et de manière attrayante.
Par ailleurs, CSS offre un très grand contrôle sur le positionnement qui
permet aux concepteurs de pages Web de travailler avec précision et
souplesse sur les tableaux - une combinaison très efficace!
Ce chapitre fournit les instructions étape par étape pour créer et utiliser
des tableaux (X)HTML avec CSS pour en contrôler la présentation.
Utilisez nos trucs et astuces et nos techniques pour aller plus vite et vous
simplifier la vie.
194
Partie III : Contrôler précisément les pages Web et leurs styles
_
Ce que les tableaux peuaent faire
pour flous
Baladez-vous quelque temps sur Internet et vous découvrirez rapidement
que de nombreux sites - tels que Amazon.fr, eBay, Yahoo! et Google, pour
ne citer qu'eux - utilisent des tableaux pour afficher leur contenu, même
si vous ne pouvez les visualiser de manière évidente. En fait, ces tableaux
invisibles sont omniprésents
sur le Web. Deux raisons à cela:
J/
Les tableaux
Web.
permettent
J/
Vous pouvez désactiver
voient pas.
d'agencer
les éléments
dans votre page
leurs bords pour que les utilisateurs
ne les
Par nature, les pages Web commencent de manière linéaire (c'est-àdire qu'elles se déroulent du début à la fin sous la forme d'une longue
séquence de paragraphes et autres textes). Les tableaux permettent de
dépasser cette linéarité pour placer du texte et des images à des endroits
plus intéressants dans une page.
Vous pouvez utiliser les pages de diverses
J/
manières:
La méthode traditionnelle (bof bof ... ) : Vous pouvez définir des
largeurs de tableau ou de cellules en particulier à l'aide de nombres
absolus. Ce type de tableau n'est pas redimensionné
lorsque les
utilisateurs redimensionnent
les fenêtres de leur navigateur.
Quelques concepteurs de pages Web préfèrent utiliser des tableaux
à des fins traditionnelles - pour présenter des données - une
solution simple et claire, facile à mettre en œuvre.
J/
La méthode centrée sur la présentation (woo!) : Vous pouvez
définir la largeur d'un tableau et de cellules en utilisant des
pourcentages.
Le tableau est redimensionné lorsque les utilisateurs
redimensionnent
les fenêtres de leur navigateur.
Nombre de concepteurs
à l'aide de tableaux.
produisent
des effets créatifs et complexes
Quoique ce chapitre traite tous les aspects des tableaux HTML, il se
concentre sur des conseils et des techniques.Lorsque
vous recourez aux
tableaux pour l'agencement, vous pouvez obtenir plusieurs résultats:
J/
Les tableaux peuvent produire des agencements complexes, comme
le montre la Figure 11.1 (visualisez d'autres exemples de tableaux
complexes sur www.arnazon. fr et www.yahoo.com).
_-------Chapitre
11: Utiliserles tableauxpourégayervos pages
Utiliser (X)HTML et CSS dans des tableaux
Il faut éventuellement quelque finesse pour
parvenir à faire aux tableaux (X)HTML ce
que vous souhaitez. Seulement 3 % des internautes utilisent des navigateurs qui ne gèrent
pas CSS.Cela signifie que vous pouvez recourir sans crainte aux tableaux pour concevoir
une page. Nous vous recommandons d'utiliser:
v Les tableaux (X)HTML pour poser les
bases de votre page Web.
v CSS pour pousser plus loin la mise en
forme des tableaux.
Si vous savez que votre public utilise des navigateurs récents, vous pouvez systématiquement employer CSS pour gérer l'agencement
de votre page. Par exemple, si vous concevez
le site Web d'un intranet pour un groupe de
développeurs, vous pouvez imposer à vos
visiteurs d'utiliser un navigateur récent et éliminer tout recours aux tableaux.
Figure 11.1: Cette page Web utilise divers tableaux pour son agencement.
V Une fois que vous avez ouvert ces pages Web dans votre navigateur
Web, jetez un œil au code source de chaque page HTML (essayez
Visualiser s Source depuis la barre de menus de votre navigateur).
Notez combien le balisage est complexe et comment il semble
hasardeux.
195
196
_
V
Quelques modèles de pages Web exposent une interface simplifiée,
dans l'idée qu'une approche à l'économie produit le résultat le plus
facile à utiliser. La Figure 11.2 montre ce qu'il peut en résulter.
v
www. google. fr utilise un seul tableau
pour son interface.
Rech&fcn.ltVeJloH
Ouli"linoui,tigUH
1
Recherche
Rechercher dans:
Programmes
de oublicité
@ Web
. Solutions
Il
Google
®
Ja; de la chance
Pages francophones
d'entreprise
0
Pages:
- À [)fooos de Gooole
France
- Goog!e corn in English
e2a09·~
Figure 11.2: Cette page Web n'utilise qu'un seul tableau de trois cellules pour son
agencement.
Les bases des tableaux
Toute la complexité
base:
des tableaux
HTML repose sur ces trois éléments
v
Les bords: Tout tableau de base comprend
qui forment un rectangle.
v
Les cellules: Ce sont des espaces
bords du tableau.
v
La fusion de cellules: Dans cette structure à base de rectangles,
vous pouvez supprimer ou ajouter des frontières entre les
cellules (comme c'est le cas avec les cellules sur la droite, dans
la Figure Il.3). Lorsque vous supprimez des frontières entre
les cellules, vous créez des lignes ou des colonnes de cellules
fusionnées - et c'est ce qui fait des tableaux des outils si flexibles
pour l'agencement.
individuels
toujours
de
quatre bords
dans les limites des
La fusion des cellules et la largeur des cellules sont deux mécanismes
différents:
_--------Chapitre
yi
Lorsque vous fusionnez des cellules, vous modifiez l'espace d'une
cellule en absorbant d'autres cellules. Vous supprimez donc des
frontières entre cellules.
yi
Lorsque vous accroissez la largeur d'une cellule, vous ne faites
qu'agrandir l'espace qu'elle occupe.
_etœ_ •••
~
P"CIl'
lOQ • JI iJ
-if
Favo,is
c;,llk."IOenisIO.,ktopIXML.
I~c;,1Users\o.nis\o..ktop
...
1
T
.•.••••••
-_ •••..
-o-n-a-_
1 ~t 1 x IJ I!J Li" 5.0«1>
I! a
T
!iil
T
G'l ,.
PT
T
Page
T
Séeurit.
T
"
.
1
1
1
1
T
Figure 11.3 : Vous pouvez utiliser un tableau HTML pour agencer le contenu de pages
Web.
Faire un brouillon de votre tableau
Les tableaux peuvent devenir complexes. Vous devez en planifier
soigneusement la réalisation. Aller jusqu'à les positionner au pixel
près peut se révéler fastidieux, mais c'est une étape essentielle dans la
conception d'une page bien agencée.
Délle/opper des idées sur l'aqencement
Partez d'une idée très générale et affinez progressivement votre
agencement jusqu'à ce qu'il vous paraisse solide et réponde à vos
besoins. Suivez ces trois étapes élémentaires:
L Attrapez une feuille de papier et un crayon pour mettre vos
idées noir sur blanc.
198
_
Commencez par une idée générale du positionnement
qui composent votre page.
des éléments
2. Evaluez ce qu'il faut inclure dans votre page Web et décidez
d'un agencement général.
De cette manière, vous pouvez commencer
Le nombre de lignes et de colonnes
par déterminer:
vous avez besoin.
La largeur du tableau et des cellules.
S'il faut fusionner
des cellules en lignes ou en colonnes.
A vous de faire les choix de conception
suivants:
Si le tableau sera centré, aligné à gauche ou aligné à droite (par
rapport à la fenêtre du navigateur dans laquelle il apparaît).
Si vous souhaitez
les faire figurer.
faire figurer des hyperliens
- et où vous souhaitez
Par exemple, de nombreux sites Web, tels que celui présenté sur
la Figure Il.1, comprennent l'image d'un logo auquel un hyperlien
est associé pour se rendre sur la page d'accueil. De la sorte, vous
pouvez toujours retourner à la porte d'entrée depuis n'importe
quelle page.
3. Faites-vous une idée des dimensions mesurées en pixels
des images que vous souhaitez utiliser. Veillez à ce que le
tableau remplisse la fenêtre du navigateur correctement, sans
contraindre l'utilisateur à faire défiler son contenu à gauche ou
à droite pour tout voir.
Choisissez d'utiliser
la manière suivante:
du texte ou des images pour la navigation,
de
Si vous souhaitez disposer de plus de contrôle sur la police utilisée
dans les éléments de navigation, utilisez des images.
La police est intégrée à l'image; pour cette raison, les paramètres
personnalisés
d'un navigateur ne peuvent pas affecter la manière
dont votre police est représentée dans l'image.
Si vous n'avez pas besoin d'un contrôle
utilisez du texte.
particulier
sur les polices,
Choisissez l'endroit où le logo principal
dimensions qu'il devrait avoir.
devrait être placé et les
Dans la Figure Il.2, le logo est le point focal. Ses dimensions
276 pixels en largeur et 100 pixels en hauteur.
sont de
_--------Chapitre
11
:Utiliser les tableaux pour égayer vos pages
Concentrez-vous sur la largeur du tableau. Laissez le contenu de votre
tableau déterminer la hauteur des cellules. La hauteur est moins
essentielle car les utilisateurs ont l'habitude de faire défiler les pages Web
vers le haut ou vers le bas. En revanche, ils peuvent être frustrés s'ils
doivent les faire défiler vers la gauche ou la droite pour en lire le contenu.
Préparer le tableau
Lorsque vous connaissez le nombre d'éléments
jeter le tout sur un brouillon.
et leur taille, vous pouvez
Si vous optez pour l'approche simplifiée, chaque élément principal
(logo, image hyperlien, navigation) doit disposer de sa propre cellule.
Sur la Figure Il.4, cela signifie trois cellules. Si vous n'avez que quelques
cellules, vous devrez probablement
en fusionner quelques-unes pour que
leur contenu remplisse la largeur de votre page.
"
Une conception
"
Une conception simple et propre (telle que celle de la Figure 11.4)
peut se satisfaire de deux lignes.
"
La Figure 11.4 montre le résultat
La première
La seconde
complexe
peut nécessiter
plusieurs
lignes.
produit pour votre tableau:
ligne opère la fusion de deux colonnes.
ligne contient
deux colonnes
distinctes.
contenu
contenu
1
contenu
Figure 11.4: Commencez
d'ouvrir
par jeter sur le papier les dimensions
du tableau, avant même
un éditeur de texte.
L'auteur de notre site Web exemple utilise des images à la place du texte
pour les éléments de navigation; toutefois, pour des raisons pratiques,
essayez d'utiliser du texte à la place des images chaque fois que vous
le pouvez. Car même si vous souhaitez disposer d'un contrôle total sur
la police utilisée par votre texte, vous devrez changer les images pour
changer la police - c'est-à-dire créer une nouvelle image du texte écrit
dans la nouvelle police que vous souhaitez utiliser.
199
Construire des tableaux de base
Lorsque vous disposez d'un brouillon qui vous donne une bonne idée de
l'agencement de votre page et de votre tableau, vous pouvez ouvrir un
éditeur HTML et créer le squelette de votre tableau.
Les composants
Les éléments de balisage pour le squelette de votre tableau sont les trois
composants de base de tout tableau:
V Tableau: <table>.
V Ligne de tableau: <tr>.
<tr> est toujours imbriqué dans <table>.
V Cellule de tableau: <td>.
<td> est toujours imbriqué dans <tr>.
A l'aide de ces trois éléments, vous pouvez construire un tableau de base.
Représentez-vous leurs relations et compositions de la manière suivante:
chaque tableau contient une ou plusieurs lignes, et chaque ligne contient
une ou plusieurs cellules. Généralement, un tableau contiendra au moins
deux lignes, voir plus, et au moins deux cellules - presque toujours plus.
De fait, à quoi sert un tableau?
Les balises ouvrantes et fermantes <table>, <tr> et <td> sont requises.
Si vous oubliez d'en faire figurer une seule, votre tableau risque de ne pas
s'afficher correctement dans la plupart des navigateurs.
On trouve de nombreuses formes de tableaux, de différents niveaux de
complexité. Un simple tableau de données à deux dimensions intégré
à une page Web est plus facile à concevoir et à implémenter qu'un
agencement plus complexe qui contient une page Web entière. Vous
pourrez mieux apprécier cette distinction au fil de votre lecture des
sections suivantes.
Créer un tableau simple
Une balise <table> apparaît généralement entre les balises <body>
de votre document. Toutefois, vous pouvez aussi les utiliser dans des
éléments de blocs et dans les balises <td> et <th> pour imbriquer des
tableaux (voir la section «Imbriquer des tableaux dans des tableaux»,
_
_--------Chapitre
plus loin dans ce chapitre). Utilisez le balisage suivant pour créer un
simple tableau de deux lignes et de deux colonnes (quatre cellules de
données) - remplacez cellule
1, cellule
2 par votre propre texte:
<! OOCTYPE
HTML PUBLIC "-/ /W3C/ /OTO XHTML 1. 0 Transi tional/ /EN"
''http://www.w3.org/TR/xhtmll/xhtmll-transitional.dtd''>
<html xmlns=''http://www.w3.org/l999/xhtml''>
<head>
<meta http-equiv="Content-Type"
content="text/html"
charset="ISO-8859-l"
/>
<title>Les
tableaux</title>
</head>
<body>
<body>
<table>
<tr>
<td> cellule 1 </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
L'exemple précédent crée un tableau de deux lignes basé sur le brouillon
de la Figure Il.4. La première ligne du tableau contient les cellules 1 et 2 ;
la seconde ligne contient les cellules 3 et 4.
Les lignes de tableau sont toujours horizontales et le contenu de chaque
cellule - dans notre exemple, cellule
1, cellule
2, cellule
3
et cellule
4 - se trouve toujours dans son propre élément <td>.
N'oubliez pas que vous devez fermer les balises de votre tableau ou ce
dernier risque de ne pas être affiché correctement.
Créer une paiJe Web basée sur un tableau
Suivez ces étapes pour créer la coquille de votre page Web basée sur
un tableau (par exemple, le tableau dont le brouillon est repris dans la
Figure ll.4 de la section précédente) :
1. Commencez
par l'élément
<table>
:
<table>
</table>
L'élément <table> peut comprendre un certain nombre d'attributs
optionnels (par exemple, border="1"
ou bgcolor="black")mais pour l'instant, nous allons rester dans la simplicité.
2. Choisissez le nombre de lignes que le tableau doit comprendre:
Le balisage suivant crée un tableau de deux lignes:
<table>
...<tr>
...<tr>
</table>
</tr>
</tr>
3. Créez des cellules dans chaque ligne à l'aide de l'élément <td>.
Chaque élément <td> crée une cellule, si bien que le nombre
d'éléments <td> dans une ligne correspond au nombre de
colonnes.
Le brouillon de la Figure Il.4 représente un tableau de deux
colonnes à trois cellules: la première ligne contient une cellule,
la seconde en contient deux. Le balisage pour cet agencement
ressemble à ceci :
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
''http://www. w3. org/TR/xhtmll/xhtmll-transitiona1.
dtd">
<html xmlns=''http://www.w3.org/1999/xhtml''>
<head>
content="text/html"
charset="ISO-8859-1"
/>
<title>Les
tableaux</title>
</head>
<bOdy>
<body>
<table>
<tr>
<td> contenu </td>
</tr>
<tr>
<td> contenu </td>
<td> contenu </td>
</tr>
</table>
</body>
</html>
C'est ici que les tableaux peuvent se révéler un peu complexes à utiliser.
Un simple tableau contenant un nombre pair de lignes et de colonnes
(disons, deux lignes et deux colonnes) est facile à réaliser - mais tandis
que vous maîtriserez mieux la conception de vos pages, vous découvrirez
que vos besoins ne sont généralement pas satisfaits par des tableaux
aussi symétriques. Si votre cellule s'étale sur plus d'une ligne ou plus
d'une colonne (telle la première cellule dans l'exemple précédent),
vous devrez ajouter un attribut qui dit au navigateur quelle cellule doit
fusionner avec d'autres.
_
_--------Chapitre
D'autres éléments de tableau
Quoique les tableaux aient été inventés pour
contenir et afficher des données, ils peuvent
aussi être utilisés pour contrôler l'agencement d'une page Web, même si de nombreux
professionnels préfèrent dorénavant utiliser
des balises <di v> et des classes ou des
identifiants, les associant à des styles CSS
pour cela. Ce chapitre se focalise sur les éléments des tableaux que vous pouvez utiliser
pour contrôler l'agencement. Si vous préférez
créer un tableau traditionnel, vous pouvez utiliser les éléments de tableau suivants:
v <th> : l'élément
en-tête de tableau affiche
du texte en gras, centré horizontalement.
Vous pouvez utiliser l'élément <th> avec
n'importe quelle ligne du tableau, mais
vous le trouverez le plus souvent dans la
première ligne. Hormis sa position et sa
mise en valeur, <th> se comporte exactement comme la balise de cellules (ct.d>
et doit être traité pareillement.
v <caption> : C'est l'élément de légende
d'un tableau. Il est conçu pour figurer n'importe où entre <table> et </table>,
sauf dans les lignes et dans les colonnes
(car cela serait sans effet). Cet élément ne
peut apparaître qu'une seule fois dans le
tableau.
Tout comme les cellules de tableau, les légendes peuvent s'accommoder avec tous
les éléments HTML susceptibles de figurer
dans le corps d'un document (autrement
dit, les éléments en ligne), mais seulement
ceux-ci. Par défaut, les légendes sont centrées horizontalement dans le tableau, et
leur texte passe à la ligne pour tenir dans
la largeur du tableau. Lélément <caption> accepte l'attribut align.
v <tbody>
: Vous pouvez grouper les
lignes du tableau dans une section particulière, le corps du tableau, à l'aide de cet
élément.
Nouveau venu dans la spécification HTML
4, <tbody> permet au corps du tableau
de défiler indépendamment de son en-tête
«thead» et de son pied «tfoot». Le
corps du tableau devrait contenir des lignes
de données. Lélément <tbody> doit contenir au moins un élément <tr>.
v <the ad> :Vous pouvez grouper des lignes
du tableau dans une section d'en-tête en
utilisant cet élément. l'en-tête du tableau
contient des informations sur les colonnes.
l'élément
<thead> doit contenir
moins une ligne du tableau.
au
v <tfoot>
: Comme avec l'élément
<thead>, vous pouvez grouper des lignes
dans une section pied du tableau en utilisant
cet élément. Le pied de tableau contient des
informations sur les colonnes et doit contenir au moins une ligne du tableau.
Faites figurer vos informations dans le pied
du tableau avant la première occurrence
de l'élément <tbody> afin que le navigateur puisse les afficher avant de s'attaquer
au contenu des cellules.
v <colgroup> : Cet élément crée un
groupe explicite de colonnes. Vous spécifiez le nombre de colonnes en utilisant
l'attribut span ou l'élément <col>, que
nous allons définir plus loin.
Vous pouvez utiliser l'attribut span pour
spécifier une largeur identique pour les
colonnes d'un groupe.
v <col>
: l'élément <col> est un élément
vide. Vous l'utilisez pour définir la structure d'une colonne. Cet élément ne devrait
pas être utilisé pour grouper des colonnes
- c'est à l'élément <colgroup> de le
faire. Vous utilisez l'élément <col> après
avoir défini un groupe de colonnes; il vous
permet de spécifier que ces colonnes doivent adopter la même largeur.
203
_
Le nombre dans un attribut correspond au nombre de colonnes ou de
lignes sur lesquelles vous souhaitez que la cellule s'étale, ce qui signifie
que si vous créez un tableau tel que celui donné en exemple, vous devrez
ajouter l'attribut colspan=" 2" au premier élément <td> (la première
cellule du tableau s'étale sur deux colonnes).
Reportez-vous à la section « Fusionner des cellules », plus loin dans ce
chapitre, pour plus d'informations. Pour l'instant, supposons que vous
souhaitez simplement créer un tableau tel que le nôtre. Le balisage
ressemble alors à ceci :
<table>
<tr>
<td colspan="2">
contenu
</tr>
<tr>
<td> contenu </td>
<td> contenu </td>
</tr>
</table>
</td>
Bravo - vous venez de terminer votre premier tableau. Enfin, presque.
Pour utiliser des tableaux dans un agencement, vous devez savoir
comment contrôler plusieurs paramètres de l'affichage, tels que les
bords, les largeurs de tableau et la gestion des espaces dans votre tableau
(par exemple, sans les bords, vous ne pouvez pas vraiment détecter la
présence d'un tableau - il ne sera pas apparent dans votre navigateur. Ce
n'est pas une mauvaise chose en soi, mais c'est un comportement que
vous pouvez modifier si vous souhaitez que les bords soient affichés par
les navigateurs). Continuez de lire la suite pour apprendre à terminer
votre tableau et à l'intégrer dans votre page.
Ajouter des bords
Le bord d'un tableau définit son contour.
Lorsqu'un tableau est utilisé pour agencer les éléments dans une page,
vous ne voulez pas afficher ses bords. Vous disposez de deux solutions
pour activer ou désactiver les bords d'un tableau:
Y'
Modifiez l'attribut border dans un élément <table>. La valeur de
l'attribut border doit être un entier qui définit l'épaisseur du bord
en pixels.
Pour désactiver
border="Q">.
Y'
le bord, passez l'attribut border
Définissez un bord en utilisant les propriétés
CSS.
à Q : <table
_________
Chapitre 11 : Utiliser les tableaux pour égayer vos pages
Vous pouvez définir le style, la largeur ou la couleur du bord en
utilisant CSS (voir la section « Utiliser les propriétés CSSdes bords »).
Utiliser l'attribut (X)HTML border
Pour un tableau (X)HTML, border se réfère simultanément:
V Aux bords extérieurs.
V Aux bords de cellules individuelles.
Vous utilisez l'attribut border pour activer ou désactiver simultanément
tous les bords.
Pour activer les bords du tableau (et des cellules), ajoutez l'attribut
border à la balise <table>, comme dans le balisage suivant:
<!DOCTYPE
<head>
content="text/html"
charset="ISO-8859-1"
/>
<title>Les
tableaux</title>
</head>
<body>
<body>
<table border="l">
<tr>
<td colspan="2">
contenu </td>
</tr>
<tr>
<td> contenu </td>
<td> contenu </td>
</tr>
</table>
</body>
</html>
La valeur de l'attribut border définit l'épaisseur du bord en pixels. Par
exemple, border=" 5" produit un bord de 5 pixels d'épaisseur. Si vous
laissez cet attribut désactivé, la plupart des navigateurs n'afficheront pas
de bord. Cependant, si vous ne voulez pas que votre bord soit visible,
nous vous suggérons d'ajouter border=" 0" pour désactiver les bords
pour de bon.
Lorsqu'une délimitation parfaitement claire du contenu des cellules est
souhaitée (comme pour les grilles de prix, les tableaux de données réelles
et autres collections de données textuelles ou numériques), les bords
aident le visiteur à décomposer ce qu'il voit en morceaux d'informations.
Mais lorsque le tableau est utilisé pour agencer une page Web et tout faire
tenir ensemble correctement, désactiver les bords peut aider à donner
plus de cohésion à l'ensemble.
_
Par défaut, la plupart des navigateurs appliquent aux tableaux un bord
invisible de 2 pixels d'épaisseur. Lorsque vous concevez votre tableau,
vous devriez faire les choses suivantes:
yi
Prévoir la présence ces bords invisibles dans votre agencement.
yi
Configurer vos propres bords.
yi
Eliminez le bord en passant l'attribut border
Activez les bords des
ajuster votre tableau.
sans afficher le bord.
tableau, vous pouvez
à 0 (border="
0 ").
tableaux aussitôt que vous commencez à créer et à
Parfois, il est difficile de visualiser ce qui se passe
Une fois que vous avez terminé d'ajuster votre
désactiver ses bords.
Utiliser les propriétés C55 des bords
Contrairement à l'attribut border de (X)HTML, CSS permet de styliser
individuellement chaque bord. Par exemple, vous pouvez définir un bord
gris en pointillé pour le bord gauche du tableau et ne pas afficher les
autres bords.
Le stlJle
Comme vous pouvez vous y attendre, la propriété border-style
de définir le style du bord (pointillé ou plein).
permet
La déclaration de style utilisée pour ajouter un style de bord est la
suivante:
sélecteur
{border-style:
valeur;}
La valeur de la propriété border-style
clés prédéfinis :
yi
dotted
yi
da shed (haché).
yi
solid
yi
double
(doublé).
yi
groove
(creux et relief).
yi
ridge
(bord et relief).
yi
inset
(creux).
yi
out set (relief).
doit être un l'un de ces mots-
(pointillé).
(plein).
Pour créer un bord plein (par exemple), utilisez la déclaration de style
suivante:
table
{border-style:
solid;}
_--------Chapitre
L'épaisseur
Comme dans le cas de l'attribut border en (X)HTML,vous pouvez
définir l'épaisseur du bord en pixels. CSS fournit une propriété. Voici la
déclaration type qui permet de spécifier l'épaisseur de votre bord:
sélecteur
{border-width:
valeur;}
La valeur de la propriété border-width
peut être:
J/
Un mot-clé prédéfini : thin
(épais).
(fin), medium (moyen) ou thick
J/
Une valeur absolue ou relative: Reportez-vous à l'encadré
«Les unités de mesure des propriétés» du Chapitre 8 pour plus
d'informations. Les valeurs décrites dans cet encadré fonctionnent
aussi bien pour CSS que pour HTML.
Pour passer l'épaisseur du bord à 1 pixel, utilisez la déclaration de style
suivante:
table
{border-width:
Ipx;}
La couleur
La déclaration de style utilisée pour définir la couleur du bord est:
sélecteur
{border-color:
valeur;}
La valeur de la propriété border-color
doit être définie à l'aide d'un
nom de couleur prédéfini ou d'une valeur hexadécimale:
J/
Nom de couleur: aqua, black, blue, fuchsia,
lime,maroon,navy,olive,purple,red,silver,teal,white,
ou yellow.
J/
Valeur hexadécimale:
gray, green,
Voir le Chapitre 10.
Pour passer la couleur du bord à noir, utilisez la déclaration de style
suivante:
table
{border-color:
black;}
Utiliser la propriété générale border
Vous pouvez utiliser la propriété raccourcie border qui est aux
bords ce que la propriété générale font est aux polices pour définir
simultanément plusieurs règles de styles:
table
{border:
Ipx solide
gray;}
_
Il existe cinq propriétés générales border que vous pouvez utiliser pour
un tableau ou un autre élément pourvu d'un contour :
Définit l'apparence
~
border:
~
border-left
~
border-right
~
border-top:
~
border-bot
des quatre bords.
: Définit l'apparence
du bord gauche.
: Définit l'apparence
Définit l'apparence
du bord droit.
du bord supérieur.
tom : Définit l'apparence
du bord inférieur.
Les propriétés border ne s'appliquent pas qu'aux tableaux; elles font
partie du modèle de boîte de CSS qui identifie les parties d'un élément
auxquelles les déclarations s'appliquent, dont les marges intérieures et
extérieures ainsi que les bords. Ces propriétés permettent de définir les
bords pour presque n'importe quel élément (X)HTML du moment qu'il ne
s'agit pas d'un élément en ligne.
Ajuster ta hauteur et ta tarf/eur
La plupart des navigateurs déterminent la largeur d'un tableau en se
basant sur le contenu de ses cellules (images et/ou texte).
Le navigateur alloue autant d'espace que possible pour le contenu.
Cependant, il impose des limites aux images et au texte:
~
Les images juxtaposées
du navigateur.
doivent tenir dans la largeur de la fenêtre
Par exemple, si vous utilisez une image de 200 pixels de large, la
cellule qui la contient sera agrandie pour qu'elle y tienne. Toutefois,
la ligne du tableau comprend plusieurs cellules, chacune contenant
une image de 400 pixels de large; les cellules ne seront agrandies
que dans les limites de ce que la largeur de la fenêtre du navigateur
autorise.
~
Le texte peut s'étaler et altérer l'agencement.
Si une cellule contient beaucoup de texte, la cellule s'agrandira
autant qu'elle le pourra jusqu'à la première césure de ligne ou la fin
du texte. Cela risque de produire un résultat très peu esthétique.
Lorsque les tableaux sont utilisés pour contrôler l'agencement, il est
important de vérifier la largeur des cellules et du tableau. Vous disposez
de deux moyens:
~
Utilisez l'attribut (X)HTML width dans l'élément <table>
~ Assignez une valeur de largeur à l'élément <table>
utilisant la propriété width.
ou <td>.
ou <td> en
_--------Chapitre
L'attribut (XJHTML width
Si vous ne spécifiez pas la largeur du tableau et des cellules, le navigateur
déterminera la largeur de chaque cellule en fonction de l'espace
qu'occupe son contenu - ni plus, ni moins.
Par exemple, supposons que vous souhaitiez ajouter un logo à la
première cellule et des éléments de navigation à la cellule qui se trouve
sur sa gauche. Si vous n'assignez pas de largeur à la première cellule (qui
contient donc le logo), les éléments de navigation seront placés juste audessous du logo, sans espace ou presque entre les deux. Pour éviter cet
agencement surchargé, vous pouvez utiliser l'attribut width pour définir
stratégiquement le nombre exact de pixels entre le logo et les éléments de
navigation.
Si vous utilisez des tableaux pour de l'agencement, nous vous
recommandons de spécifier la largeur du tableau et de ses cellules.
La slJntaxe
Il est facile de définir une largeur lorsque vous utilisez l'attribut width.
Par exemple, vous pouvez spécifier que votre tableau occupe 630 pixels
de la manière suivante:
<table
border="l"
width="630">
</table>
La valeur de l'attribut peut être définie dans les unités suivantes:
yi
Des pixels (un entier positif, tel que 630).
C'est une valeur absolue.
yi
Un pourcentage de la largeur de l'affichage (un entier positif suivi
du signe pourcentage, tel que 95 %).
C'est une valeur relative qui permet au tableau d'être
redimensionné en fonction de la largeur de la fenêtre du navigateur.
Ces unités peuvent aussi être utilisées pour préciser la largeur d'une
cellule en particulier.
Le balisage
Pour spécifier la largeur du tableau créé plus tôt dans ce chapitre (et pour
définir la largeur de ses cellules individuellement), ajoutez le balisage qui
apparaît en gras:
<! DOCTYPE
<html
HTML PUBLIC "-/ /W3C/ /DTD XHTML 1. 0 Transitional/ /EN"
xmlns=''http://www.w3.org/1999/xhtml''>
210
_
<head>
content="text/html"
charset="rSO-8859-l"
/>
<title>Les
tableaux</title>
</head>
<body>
<body>
<table border="l" width="630">
<tr>
<td colspan="2"
width="630">
contenu </td>
</tr>
<tr>
<td width="400">
contenu </td>
<td width="230">
contenu </td>
</tr>
</table>
</body>
</html>
Les figures 11.5 et 11.6 montrent la différence entre un site qui ne définit
pas la largeur du tableau ni des cellules et un site qui utilise l'attribut
width pour ce faire.
il lesta~aux·
.@'Q.. 1il
ir
Favoris
1~
!contenu
Windows
Intemd
Expforer
C,\U,.,,\D.,,;,\D esktop\XM~
les tableaux
f
-I+t 1xliII
/!.b-
~j
P -~,
Liv<Seorcn
~-
Iii'! -g
Page"
Sécurité .•. Outils .•..
»1
_1
/contenu lcontenu j
Figure 11.5: Aucune largeur n'est spécifiée.
:i' Les tlbluux
Ii w
Fevcns
G2jE§B~
P -1
. Windows Internet Exptorer
_@_O •. J il
C,\U,.,.\D.n;,\D
J:i9 Les tebleeux
es ktop\XM~ f
-I+t 1X 1.1':L'v-S.arrh
nl /!.b-Iii'!
-g
~-
Page .•..
Sécurité .•
Outils'"
»
1
Ilcoot~u
!contenu
Figure 11.6 : Les largeurs sont spécifiées
!contenu
1
à l'aide de la propriété width.
Si vous spécifiez une largeur en pixels plus petite que celle du contenu, le
navigateur ignorera la valeur de l'attribut width pour afficher le contenu
de la cellule. Alors un conseil: vérifiez vos dimensions!
La propriété CSSwidth
La valeur de la propriété width doit être l'une des suivantes:
yi auto.
_--------Chapitre
Ce mot-clé autorise le navigateur à déterminer
requise.
lui-même la largeur
v Une largeur absolue ou relative.
Reportez-vous à l'encadré « Les unités de mesure des propriétés»
du Chapitre 8 pour plus d'informations.
Pour spécifier la largeur du tableau affiché sur la Figure 11.6, utilisez les
déclarations de styles suivantes:
table {width: 630px;}
td.cellone
{width: 630px;}
td.celltwo
{width: 630px;}
td.cellthree
{width: 630px;}
Les marqes internes
Il est essentiel de savoir déterminer l'espace vierge entre les cellules
pour produire un agencement digne de ce nom. Dans le brouillon de la
Figure Il.4, vous devez déterminer - au pixel près -l'espace qui sera
utilisé dans votre tableau.
les attributs (X)HTMl
Deux attributs peuvent vous aider à aérer votre tableau en ajoutant un
peu d'espace entre les cellules: cellspacing
et cellpadding.
Ces
attributs utilisent deux techniques différentes pour insérer cet espace :
v
cellspacing
ajoute de l'espace entre les cellules O'épaisseur du
bord est ajustée).
v
cellpadding
ajoute de l'espace dans une cellule.
La valeur pour chacun de ces attributs doit être donnée en pixels. Par
exemple, cellpadding=" 5" ajoute 5 pixels d'espace à la marge interne
de chaque cellule.
Pour définir chacun de ces attributs,
comme suit:
<table
cellpadding="S"
ajoutez-le à la balise <table>,
cellspacing="S">
Lorsque vous recourez aux tableaux pour l'agencement, sans bord
visible, vous pouvez utiliser l'un ou l'autre de ces attributs pour
aérer votre tableau. Toutefois, si vous ajoutez de la couleur à vos
tableaux - ou si vous utilisez un bord pour une raison quelconque -,
vous pourrez observer une différence très notable. C'est parce que
cellpadding
accroît l'espace dans la cellule tandis que cellspacing
_
accroît l'épaisseur du bord lui-même, comme vous pouvez le constater
clairement sur les figures Il.7 et Il.8.
La valeur par défaut de cellpadding
est 1; celle de cellspacing
est
2. Si vous ne définissez ni cellpadding
ni cellspacing,
un navigateur
utilisera ces valeurs. Vous devriez tenir compte de ces pixels dans votre
agencement, à moins que vous ne passiez les valeurs des attributs à zéro.
~CJQ. ilil
C:\lJ>ers\O.nis\O es
re
'ilf Favoris
cellule 1
1
cellule 3
1
·I.t 1x l,~
Tebl•• ux
Ii
1
1
1
cellule 2
cellule 4
Figure 11.7 : L'attribut cellpadding
passé à 20pixels).
i
Go. il
ill
'ilfFiIYOris
C\Users\O.nis\O.,
l "Tableaux
P
"
cellule 2
1
cellule 3
1
accroît l'espace dans chaque cellule (ici, il est
·I.t 1x RI"Liv. s•• J<h
1 I!Q·§!·g..,·
cellule 1
1
Q
cellule 4
1
Figure 11.8: L'attribut cellspacing
pixels).
accroît l'épaisseur du bord (ici, il est aussi de 20
Travailler avec cellpadding
et cellspacing
pour ajuster l'agencement
de votre tableau peut se révéler assez casse-tête. Parfois, vous devez
. créer des cellules vides pour vous aider à suivre ce qui se passe. C'est
une astuce que de nombreux concepteurs utilisent. Pour cela, vous devez
simplement:
1. Créer une cellule.
2. Remplir la cellule avec l'un de ces éléments :
_--------Chapitre
<br
/>.
Une image servant à espacer (un fichier GIF transparent
1 x 1 pixel) qui vous permet de contrôler la largeur.
de
css
Vous pouvez utiliser CSS pour contrôler la marge interne des cellules et
leur espacement.
Dans ta ce((ute (marge interne)
Pour contrôler l'espace à l'intérieur des cellules, vous devez utiliser la
propriété padding de la manière suivante:
sélecteur
{padding:
valeur;}
La valeur pour la propriété padding
ou relative (pourcentage).
doit être définie en valeur absolue
Pour modifier la marge interne d'une cellule, utilisez la déclaration
style suivante:
td {padding:
de
16px;}
La propriété padding peut être utilisée avec la plupart des éléments
(X)HTML. Par exemple, si vous créez un pied de page et que vous lui
assigniez un nom de classe, vous pouvez définir sa marge interne en
utilisant la règle de style suivante:
pieddepage
{padding:
5px;}
Entre tes ce ((utes (marge externe)
Vous pouvez contrôler l'espace entre vos cellules en utilisant la propriété
border-spacing:
sélecteur
{border-spacing:
valeur;}
La valeur pour la propriété border-spacing
absolue ou relative (pourcentage).
doit être définie en valeur
Pour modifier la marge externe d'une cellule, vous devez utiliser la
déclaration de style suivante:
td {border-spacing:
10px;}
La propriété border-spacing
<td>.
ne peut être utilisée qu'avec l'élément
_
Décaler l'alilJnement
Si vous utilisez des tableaux pour définir votre agencement, vous avez
besoin de contrôler leurs emplacements dans la fenêtre du navigateur.
Vous pouvez le faire en utilisant (X)HTML ou CSS.
Utilisez les attributs définis dans le standard HTML pour aligner
vos tableaux (horizontalement) et le contenu de ces derniers
(horizontalement et verticalement).
Vous alignez des tableaux comme vous alignez des images.
L'alit)nement horizontal
Vous pouvez aligner horizontalement le contenu de cellules en utilisant
l'attribut align dans divers éléments de tableau.
JI'
Pour aligner votre tableau horizontalement,
avec l'élément <table>.
utilisez l'attribut align
Lorsqu'il est utilisé avec l'élément <table>, l'attribut align peut
prendre les valeurs suivantes: left (gauche), right (droite) et
center (centré) par rapport au document.
JI'
Vous pouvez utiliser l'attribut align avec les éléments <td>
(cellule) ou <tr> (ligne) pour aligner le texte dans une cellule ou
dans une ligne.
Les valeurs qui peuvent être utilisées avec l'attribut align
éléments <td> ou <tr> sont:
align=" r ight"
dans les
: Aligne le contenu du tableau ou de la cellule sur
la droite.
align=" left"
: Aligne le contenu du tableau ou de la cellule sur la
gauche (c'est la valeur par défaut).
align=" center" : Aligne le contenu du tableau ou de la cellule.
Lorsqu'il est appliqué à l'élément <table>, cet attribut centre le
tableau; lorsqu'il est appliqué à l'élément <td>, cet attribut centre
son contenu.
align="
justify"
: Justifie le contenu de la cellule (ne fonctionne
pas partout).
align=" char" : Aligne le contenu de la cellule autour d'un
caractère (ne fonctionne pas partout).
Les exemples suivants alignent un tableau au centre de la page et
centrent le texte dans chaque cellule (voir Figure 11.9).
<lDOCTYPE
HTML PUBLIC
"-//W3C//DTD
XHTML 1.0
Transitional//EN"
_--------Chapitre
<head>
content="text/html"
charset="rSO-8859-1"
/>
<title>Les
tableaux</title>
</head>
<body>
<table border="2" width="430"
align="center"
cellpadding="20">
<tr>
<td colspan="2"
width="630"
align="center">
contenu </td>
</tr>
<tr>
<td width="400"
align="center">
contenu </td>
<td width="230"
align="center">
contenu </td>
</tr>
</table>
</body>
</html>
l'alilJnement vertical
pouvez aligner verticalement le contenu des cellules en utilisant
l'attribut valign. Il ne peut être utilisé qu'avec les éléments <tr> Oigne)
et <tr> (cellule).
VOUS
:i9l••_-W
••••••••
_bp4om
@O • "~"\"'=\Om;,\D~ ·1', 1x LI" liV<s.o""
~
Fworis
1~
les tableaux
~~
P •
,.
Ilt!ll·!»l·g.·
coetecu
1
coœeœ
1
contenu
1
~
1
Figure 11.9: Un simple tableau, centré.
Les valeurs possibles sont:
V valign=" top" : Aligne verticalement
haut de la cellule.
v valign="bottom"
le contenu de la cellule sur le
: Aligne verticalement
sur le bas de la cellule.
v
le contenu de la cellule
valign="middle"
: Centre verticalement le contenu de la cellule
dans la cellule (c'est la valeur par défaut).
v valign="
baseline"
: Définit une référence pour toutes les autres
cellules de la même ligne, si bien qu'elles sont toutes alignées de la
même manière.
215
216
Partie III : Contrôler précisément les pages Web et leurs styles ----
__
Vous pouvez aussi utiliser les attributs align et valign avec les
éléments de tableau suivants: <col>, <colgroup>,
<tbody>, <tfoot>,
<th> et <thead>.
Si vous spécifiez un alignement pour une ligne (xt;r> puis un alignement
pour une cellule de cette ligne (x t.dc-), l'alignement de la cellule
l'emportera sur celui de la ligne.
Vous risquez d'entendre assez souvent que la plupart des éléments de
mise en forme de (X)HTMLsont obsolètes et qu'il faut leur préférer CSS.
Toutefois, quoique l'attribut align soit obsolète pour la plupart des
éléments (X)HTML, il fonctionne encore avec les éléments de tableau.
Vous ne pouvez pas utiliser l'attribut valign
avec la balise <table>.
Utiliser C55 pour définir un alit}.nement
Il existe deux propriétés CSS que vous pouvez utiliser pour contrôler
l'alignement d'un tableau: text-align
et vertical-align.
Elles
fonctionnent exactement comme les attributs align et valign qui
viennent d'être mentionnés.
Pour utiliser la propriété text-align,
suivantes:
V right
assignez-lui une des valeurs
: Aligne le contenu du tableau ou la cellule sur le côté droit.
v left:
Aligne le contenu du tableau ou la cellule sur le côté gauche
(c'est la valeur par défaut).
v
center:
v justify:
Centre le contenu du tableau ou de la cellule.
Justifie le contenu des cellules.
Pour utiliser la propriété vertical-align,
suivantes:
v
top: Aligne verticalement
cellule.
v bottom:
assignez-lui une des valeurs
le contenu de la cellule sur le haut de la
Aligne verticalement
le contenu de la cellule sur le bas de
la cellule.
v middle : Centre verticalement le contenu de la cellule dans la
cellule (c'est la valeur par défaut).
v
baseline
: Définit une référence pour toutes les autres cellules
de la même ligne, si bien qu'elles sont toutes alignées de la même
manière.
Vous pouvez contrôler l'alignement d'une ligne entière en spécifiant les
propriétés d'alignement pour l'élément <tr>.
_--------Chapitre
Vous ne pouvez pas centrer un tableau en utilisant la propriété textalign - elle ne sert qu'à aligner du texte. Pour l'instant, vous n'avez pas
beaucoup d'options pour centrer le tableau. Aucune n'est idéale, mais
toutes fonctionnent:
v Utiliser les balises obsolètes <center>
autour du tableau (pas
conseillé).
v Utiliser l'attribut obsolète align
dans le tableau: <table
align="center">.
Tous les navigateurs ne le gèrent pas de la
même manière, si bien que vous devez vérifier le résultat dans
chacun d'entre eux!
v
Imbriquer le tableau dans un élément <di v> et utiliser la propriété
text-align
pour en centrer le contenu: div.mytable
{textalign:
center;}
(recommandé).
Fusionner des cellules
La fusion est l'une des fonctionnalités des tableaux qui les rendent si
pratiques pour agencer des éléments dans votre page Web.
La fusion permet d'étaler du contenu sur plusieurs cellules; en gros, vous
abattez les frontières de cellules. Que vous ayez besoin de fusionner
en lignes ou en colonnes, vous pouvez utiliser la fusion pour produire
presque n'importe quel agencement avec votre tableau.
Il faut soigneusement planifier la fusion de cellules et de lignes lorsque
vous rédigez votre brouillon (comme nous l'avons expliqué plus tôt dans
ce chapitre, dans la section « Faire un brouillon de votre tableau »).
Pour fusionner des cellules, vous ajoutez l'un de ces attributs à l'élément
<td> (c'est-à-dire la cellule):
v colspan
permet de fusionner la cellule avec d'autres
horizontalement (sur plusieurs colonnes).
v
rowspan permet de fusionner la cellule avec d'autres verticalement
(sur plusieurs lignes).
La fusion de cellules ne fonctionne qu'avec des attributs (X)HTML; CS5
ne fournit aucune fonctionnalité équivalente. Ceci étant, l'élément <div>
vous permet de réaliser assez vitz n'importe quel agencement sans
utiliser de tableau (ce qui explique qu'il soit devenu la solution idéale
pour les concepteurs de site professionnels).
218
La fusion des colonnes
Pour fusionner des colonnes, utilisez l'attribut colspan dans l'élément
<td> et donnez-lui pour valeur le nombre de cellules que vous souhaitez
fusionner. Ici, nous passons la couleur d'arrière-plan de la cellule étendue
en bleu et nous affichons son contenu en texte blanc gras pour nous
accorder avec le reste du texte affiché en noir sur fond blanc dans les
cellules du dessous.
La Figure Il.10 montre la cellule résultant
de la fusion de deux autres.
contenu
contenu
contenu
Figure 11.10: La cellule résultant de la fusion de deux autres.
Dans cet exemple, une unique cellule bleue occupe la première ligne,
résultant de la fusion des deux cellules de la ligne réparties sur deux
colonnes. Nous utilisons l'attribut colspan dont la valeur est fixée à 2,
comme dans le balisage suivant:
<!DOCTYPE
''http://www.w3.org/TR/xhtmll/xhtmU-transitional.dtd''>
<head>
<title>Les
tableaux</title>
</head>
<body>
align="center"
cellpadding="20"
type="text/css"
style="font-family:
Arial, sans-serif;
fontsize: 18pt">
<tr>
<td colspan="2"
width="430"
align="center"
type="text!css"
style="background-color:
blue; color: white; font-weight:
bolder;">
contenu </td>
</tr>
<tr>
<td width="230"
align="center">
contenu </td>
<td width="200"
align="center">
contenu </td>
</tr>
</table>
_
__ ------Chapitre
11 : Utiliser les tableaux pour égayer vos pages
</body>
</html>
Notez que dans l'exemple précédent, ainsi que dans le suivant, nous
utilisons du code C55 en ligne pour faire figurer les informations relatives
au style dans le balisage du tableau. En production, vous devriez stocker
votre balisage C55 dans un fichier de feuille de styles externe.
Une fois que vous avez ajouté l'attribut colspan
:
"" Vérifiez que vous disposez du nombre idoine de cellules <td> dans
la première ligne. Par exemple, si vous spécifiez qu'une cellule
s'étale sur deux colonnes, vous devrez compter un <td> de moins
dans sa ligne. Si vous utilisez colspan=" 3", vous devrez compter
deux <td> de moins dans la ligne.
"" Vérifiez que les autres lignes contiennent le bon nombre de cellules
<td>. Par exemple, si vous étalez une cellule sur deux colonnes,
les autres lignes du tableau devront comprendre deux <td> pour
remplir les deux colonnes.
La fusion des liiJnes
Vous utilisez l'attribut rowspan avec l'élément <td> pour fusionner les
lignes. La Figure 1l.11 vous montre un exemple où la cellule s'étale sur
deux lignes.
1
contenu
,
contenu
contenu
Figure 11.11 : La dernière cellule s'étale sur deux lignes.
Pour fusionner les lignes, vous utilisez l'attribut rowspan dans l'élément
<td> et vous passez sa valeur au nombre de cellules que vous souhaitez
fusionner.
D'abord, faites un brouillon de votre tableau afin de déterminer les
cellules qu'il faut fusionner en lignes et en colonnes. L'exemple que nous
illustrons au fil de ce chapitre utilise l'attribut colspan de la première
cellule de la première llgne. Toutefois, la conception d'un tableau
contenant des éléments de navigation pourrait être tout aussi simple si
219
_
nous utilisions l'attribut rowspan de la seconde cellule de cette première
ligne. D'une manière comme de l'autre, le tableau est agencé efficacement.
Le tableau présenté est généré à l'aide du balisage suivant (notez l'usage
de rowspan) :
<!DOCTYPE
<head>
<title>Les
tableaux</title>
</head>
<body>
align="center"
cellpadding="20"
type="text/css"
style="font-family:
Arial, sans-serif;
fontsize: 18pt">
<tr>
<td width="230"
align="center">
contenu </td>
<td width="230"
align="center"
rowspan="2"
type="text/css"
style="background-color:
blue; color: white; font-weight:
bolder;">
contenu </td>
</tr>
<tr>
<td width="230"
align="center">
contenu </td>
</tr>
</table>
</body>
</html>
Remplir les cellules d'un tableau
Une fois que vous avez rédigé un brouillon de votre tableau et défini les
propriétés de ce dernier (telles que la largeur, les marges internes et
externes des cellules, les fusions de cellules), vous pouvez rajouter des
images, des hyperliens, du texte et presque tout autre élément (X)HTML
dans vos cellules. C'est un processus trivial: vous ajoutez les images, les
hyperliens et le texte dans l'élément <td> tout comme vous les ajouteriez
à l'élément <body>.
Le balisage suivant affiche un tableau rempli de données figurant en gras:
<!DOCTYPE
<html
<head>
<title>Les
tableaux
: les albums recommandés</title>
<meta http-equiv="Content-type"
content="text/
_-------Chapitre
html;charset=UTF-B"
/>
<style type="text/css">
hl {
font-size:
200%;
font-family:
Verdana,
Tahoma,
Arial,
sans-serif;
Tahoma,
Arial,
sans-serif;
}
p {
font-size:
90%;
font-family:
Verdana,
}
#pied {
font-size:
70%;
font-family:
Arial,
color: orange;
sans-serif;
}
</style>
</head>
<body>
<table border="l" width="BOO"
align="center"
cellpadding="S"
cellspacing="S">
<tr>
<td colspan="2"
valign="bottom"
align="center">
<a href="http://www.arclightrecords.com">
<img src="arclight-header.jpg"
width="640"
height="203"
alt="arclight
header art" border="O"
/>
<la>
</td>
</tr>
<tr>
<td colspan="2"
valign="center"
align="center">
<hl>La sélection de cette semaine :</hl>
<la>
</td>
</tr>
<tr>
<td valign="center"
align="center"
width="lll">
<img src="releases-ar22.gif"
width="107"
height="99"
alt="magnet
school coyer" border="O"
/>
</td>
<td valign="top"
align="left"
width="6B9">
<strong>Magnet
School</strong>   
ID catalogue:
<tt>AR22</tt>   
<em>Tonight
We Drink ...Tomorrow We Battle The Evil CD</em><br
/>
<p>Magnet School produit ici une brillante expérience
en
capturant et en amplifiant la présence électrique
de U2 dans leur
chanson <cite>Bullet
the Blue Skye/cite> pour construire
un album
entier autour de ces sonorités et de ces idées. Vous entendrez du
blues, du rock, du psychédélique,
de l'angoisse et de l'engagement
qui sont les marques de ce classique de U2 portées jusqu'à des
extrêmes.</p>
</td>
</tr>
<tr>
_
<td valign="center"
align="center"
width="lll">
width="107"
height="99"
alt="Phonograph
Phonograph
coyer" border="O"
/>
</td>
<td valign="top"
align="left"
width="680">
<strong>Phonograph</strong>   
ID catalogue:
<tt>AR17</tt>   
<em>Phonograph</em><br
/>
<p>Ceux qui écoutent Phonograph
doivent tout d'abord faire
abstraction
des échos de tous les autres; Tom petty rappelle
inévitablement
la voix et l'écriture de Matthew welsh, tandis
que wilco rappelle combien Phonograph
a réussi à dépasser les
clichés du rock acoustique
américain. Au-delà, Phonograph
réussit
à remettre en question tous les prémices du rock tout en restant
solidement
amarré au genre. Le sons acoustiques
et électroniques
se mélangent pour former un paysage totalement
bluffant.</p>
</td>
</tr>
<tr>
<td valign="center"
align="center"
width="lll">
width="107"
height="99"
alt="Hognose
Longhandle
coyer" border="O"
/>
</td>
<td valign="top"
align="left"
width="689">
<strong>Hognose</strong>   
ID catalogue
:<tt>AR04</tt>   
<em>Longhandle</em><br
/>
<p>Hognose
est une bande de heavy metal dont le rythme pour le
moins direct et les paroles renvoient à Black Sabbath, Motorhead
ou Metallica.
Appelez ça du "stoner rock" ou du "thrash metal",
ceux qui aiment la musique ne pourront s'empêcher d'apprécier
ce
qu'ils entendront.
Parmi les titres les plus notables, il faut
retenir "Sneech" , dont l'intro à la guitare et aux cymbales fait
trembler les murs, et "Black Angus", un hymne de deux minutes qui
engage tout le pouvoir du rock. Ceux qui écoutent en conduisant
feront bien de faire attention à leur vitesse, car ils risquent de
se laisser entraîner.
</p>
</td>
</tr>
</table>
<table width="800"
border="O"
align="center"
cellpadding="O"
cellspacing="O"
id="pied">
<tr>
<td width="18"> </td>
<td width="382"><a
href="index.htm">Nouveautés</a>
1
<a
href="aboutus.htm">A
propos <la> 1
<a href="releases.htm">Sorties
<la> 1 <a href="tours.
htm">Concerts</a>
1
<a href="press.htm">Presse</a>
1 <a href="store.htm">Store</
a> 1
<a href="links.htm">Liens</a>
1 <a href="contactus.
htm">Contact</a>
</td>
_--------Chapitre
11: Utiliser les tableaux pour égayer vos pages
<td width=ff18ff> </td>
<td width=ff382ff>Images et contenu © 2006 Arclight
Records. Tous
droits réservés.
<br />
Site Web par <a href= ..
http://www.conquestmedia.com
..
>Conquest
Media</a></td>
</tr>
</table>
</body>
</html>
Cette page Web contient de nombreux éléments intéressants. Nous
l'avons dimensionnée pour qu'elle occupe 800 pixels de largeur (un
standard de nos jours, qui conviendra à tous les affichages sauf les plus
anciens) et nous avons utilisé l'attribut colspan pour centrer l'image et
le titre dans la page. Nous avons aussi soigneusement divisé les zones
correspondant aux couvertures d'albums et aux textes en utilisant des
images de dimensions communes (107 x 99 pixels) et en conservant
2 pixels supplémentaires sur chaque côté, ce qui laisse 689 pixels pour
la zone de texte et permet de faire tenir le nom de l'artiste, la référence
dans le catalogue et le titre sur une seule ligne de texte, suivie de 7 lignes
de texte décrivant l'album et sa musique. Le résultat est reproduit sur la
Figure 11.12, où nous avons activé les bords pour que vous puissiez les
observer (en production, nous les aurions désactivés).
g.
iJc:,Usett\Denis\06ktop\XMl.HTMldC:SSpourlesnuls\c.~-Jl..htmI
La sélection
!\hpet
Sc.ool
•.• ,
p.
X
de cette semaine:
ID catalogue: AR22 Tonighi
w. Drink.
.. Tomorrow
w. Bartl.
Th. Evil CD
Magnet scnoot produit id une brillante expérience en capturant et en amplifiant la présence
électrique de U2 dans leur chanson Bullet the Blue Sky pour construire un album entier
autour de ces sonorités et de ces Idées. Vous entendrez du blues, du rock, du
psychédélique, de l'angoisse et de J'engagement Qui sont les marques de ce dess.qve de U2
portés jusqu'à des extrêmes.
PIIo_O&r2pll
ID cataiogue : AR17
Phonograph
Ceux qui écoutent Phonograph dOivent tout d'abord faire abstraction des échos de tous les
autres;
Tom Petty rappele inévitablement
la voix et récnture de Matthew weisn, tandiS
wdco rappele combien Phonograph il réussi à dépasser les œcnés du rock acoustique
amêr1cain. Au-delà, Phonograph reussit à remettre en Question tous les prémices du rock
tout en restant solidement amarré au genre. le sons acoustiques et électroniques se
mélangent pour tonner un paysage totalement bluffant.
Figure 11.12: La page de la sélection d'Arclight
une liste d'albums incluant des miniatures.
Records utilise des tableaux
pour créer
Notez aussi l'utilisation de l'entité de l'espace insécable ( ) ; dans
la liste des albums, il permet de séparer le nom de l'artiste, l'identifiant
au catalogue et le titre de l'album tout en maintenant ces informations
sur une seule ligne; dans le pied-de-page, il permet d'imposer une marge
de 18 pixels entre le menu sur la gauche et la mention aux droits d'auteur
sur la droite. Nous utilisons aussi le style hl pour le titre de la page, le
style de paragraphe (P) pour la copie de l'album et l'identifiant (ID) pied
pour modifier la présentation du pied de page. Tout cela devrait vous
donner moult idées pour utiliser les tableaux et les styles afin de créer
des agencements qui font sens.
Tester votre tableau
Le test est l'étape finale avant que votre tableau ne soit exposé à la face
du monde. Vous devez tester vos tableaux dans les navigateurs les plus
utilisés - dont Internet Explorer, Firefox, Safari et Opera. Si vous ne le
faites pas, vos utilisateurs risquent d'avoir à déchiffrer le contenu de vos
pages; s'ils ne se contentent pas de considérer qu'elles sont dans le plus
grand désordre.
Laissez une fenêtre de navigation ouverte lors de la création de
votre tableau. Chaque fois que vous modifiez la largeur d'une cellule,
enregistrez le document et visualisez-le dans le navigateur. De cette
manière, lorsque vous testerez votre tableau, vous n'aurez pas trop à le
bidouiller.
Testez toujours votre site dans tous les navigateurs que vos utilisateurs
pourraient utiliser. Par exemple, si votre tableau est aligné avec
align=" center"
mais que, dans une précédente version d'Internet
Explorer, le tableau reste aligné sur la gauche, vous voudrez sans
doute délimiter le tableau par des balises <div> et inclure l'attribut
aligne="center"
dans la balise ouvrante <d i,v>. Toutefois, vous ne
devriez pas rencontrer trop de problèmes avec les tableaux si vous vous
en tenez au standard.
Conseils pour faire les tableaux
Le premier - et plus important - des conseils est de s'en tenir aux
standards établis. Les gens impliqués dans le projet Web Standards ont
fait campagne pour que le standard soit supporté par tous les navigateurs
et toutes les applications d'édition de HTML depuis 1998. Ce lourd travail
de normalisation devrait vous faciliter la vie.
---.!
_--------Chapitre
Il Ya fort longtemps, si vous créiez une page HTML,vous étiez contraint de
créer différentes versions de votre page Web (chaque version contenant
des éléments et des attributs spécifiques à un navigateur), ne serait-ce que
pour définir des choses aussi basiques que les propriétés d'un tableau.
Comme vous pouvez l'imaginer, créer et manipuler différentes versions
de la même page Web faisait exploser les coûts de développement.
Pour contourner cette difficulté, de nombreux développeurs ont
consciencieusement créé leurs tableaux avec des balises spécifiques
qui fonctionnaient dans Internet Explorer comme dans Netscape - mais
pourquoi pas Opera? Fort heureusement, tous ces problèmes sont
derrière nous. Les dernières versions d'Internet Explorer, de Firefox, de
Safari et d'Opera gèrent toutes HTML,ainsi que CSSet XHTML.Pour en
savoir plus sur les standards du Web, visitez www.webstandards.org.
Nettoue» le balisage
Un balisage soigneusement rédigé est plus facile à analyser en cas
de problèmes et à maintenir. A cette fin, de nombreux concepteurs
introduisent des espaces entre les éléments. Par exemple, le balisage
suivant n'en utilise pas beaucoup, ce qui complique la lecture:
<tr><td width="630"
colspan="2">
contenu </td></tr>
<tr><td width="400">
contenu </td>
<td width="230">
contenu </td></tr></table>
Observez plutôt cette version aérée:
<tr>
<td width="630"
colspan="2">
contenu
</tr>
<tr>
<td width="400">
contenu </td>
<td width="230">
contenu </td>
</tr>
</table>
</td>
L'espace que nous avons inclus dans notre balisage figure entre les
éléments - et non dans les éléments. Par exemple, si vous ajoutez
un espace entre les balises <td> et </td>, cela affectera l'affichage
du contenu de la cellule, ce qui n'est généralement pas ce que vous
souhaitez.
226
_
Imbril{uer des tableaux dans des
tableaux
De nombreux concepteurs doivent imbriquer des tableaux dans des
tableaux pour parvenir à réaliser l'agencement qu'ils souhaitent. C'est à
la fois légal et commun.
Quelques tableaux imbriqués ne vont pas gêner vos utilisateurs outre
mesure. Toutefois, imbriquer de nombreux tableaux les uns dans les
autres peut ralentir le temps de chargement.
Pour imbriquer un tableau, ajoutez simplement l'élément <table>
un élément <td> comme suit:
dans
<!DOCTYPE
<html
<head>
<title>Imbriquer
des tableaux</title>
<table border="l"
cellpadding="20"
align="center">
<tr align="center">
<td> contenu </td>
<td> contenu </td>
</tr>
<tr>
<td>
<table border="l">
<tr>
<td> contenu </td>
<td> contenu </td>
</tr>
<tr>
<td> contenu </td>
<td> contenu </td>
</tr>
</table>
</td>
<td> contenu </td>
</tr>
</table>
</body>
</html>
Ce balisage produit les tableaux représentés
sur la Figure 11.13.
Lorsque vous utilisez des tableaux imbriqués ...
J/
Vérifiez la largeur des cellules -la largeur de la troisième cellule
devrait correspondre à la largeur du tableau imbriqué.
J/
Créez et testez le tableau que vous souhaitez imbriquer séparément, avant de l'ajouter à votre premier tableau.
_--------Chapitre
11:Utiliserles tableauxpourégayervospages
:ii!l1mIIrique •••• -.._
@O. ,I~
Il •••• Fevcris
•••••••• __
"'\lkenlD<n~\D.,
-œ-
-e-
-1'.1 x 1./1: L••• s.onh
r~
Imbriqu""d.,t,bl.,ux
cool...,
1
IcontenuIcool~ 1
Icool..., Icool...,
"Iii
a - ~ . Gl
p »
FI
F
1
Figure 11.13: Des tableaux imbriqués.
Eaiter les tableaux trop denses
Nous vous recommandons d'être créatif, mais faites attention - ne
bourrez pas l'écran d'informations denses au point d'être impénétrables
- surtout de chiffres. Une liste de chiffres sans césures fait rapidement
fuir tout le monde sauf les masochistes - un résultat totalement contreproductif. Rangez ces chiffres dans un tableau attrayant (mieux encore,
dans plusieurs tableaux séparés par des images soigneusement choisies).
Observez alors comment l'attrait et la lisibilité de votre page sont
améliorés; entendez les visiteurs soupirer de soulagement.
Les cellules individuelles peuvent être étonnamment spacieuses. Vous
pouvez y ranger des images très précisément. A ce propos, si vous
souhaitez ajouter des images dans un tableau, veillez à :
v Sélectionner des images qui ont des dimensions et des apparences
similaires.
v Mesurer ces images pour déterminer leur hauteur et leur largeur
en pixels (des programmes shareware tels que Paint Shop Pro et
GraphicConverter le font automatiquement).
v
Utiliser un balisage HTML pour positionner
cellules.
ces images dans les
Un tableau beau et court n'a pas besoin d'images et garantit que le texte
sera bien présenté.
Deux astuces permettent
cohérent d'images:
v
de produire un agencement
consistant
et
Redimensionnez vos lignes et vos colonnes de cellules qui
contiennent les images en adoptant les dimensions de l'image la
plus grande.
v Centrez toutes les images dans chaque cellule (verticalement
horizontalement).
et
228
_
Ajouter de la couleur aux cellules
de tableau
Vous pouvez utiliser CSS ou (X)HTML pour modifier la couleur d'arrièreplan d'une cellule ou du tableau. Avant CSS, les concepteurs utilisaient
l'attribut bgcolor pour modifier l'arrière-plan des cellules du tableau de
la même manière dont elle permettait de modifier la couleur d'arrière-plan
de tout le document. Ajoutez simplement l'attribut bgcolor à n'importe
quelle cellule de tableau pour modifier sa couleur d'arrière-plan:
<td bgcolor="teal">
...</td>
Toutefois, vous disposez d'un peu plus de souplesse
pour ajouter de la couleur :
td {background-color:
Nous traitons
si vous utilisez CSS
red;}
de la propriété
background-color au Chapitre
10.
L'attribut bgcolor peut être utilisé avec n'importe quel élément de
tableau. Toutefois, l'attribut bgcolor d'une cellule prévaut sur tout
attribut bgcolor défini pour une ligne ou pour le tableau. Notez aussi
que l'attribut bgcolor est obsolète, et que la plupart des experts
du Web utilisent le balisage CSS à la place en employant la propriété
background-color ainsi que la propriété color pour modifier la
couleur du texte.
Autres attributs de tableau intéressants
Le Tableau Il.1 recense les autres attributs liés aux tableaux
que vous pouvez rencontrer dans des fichiers HTML.
T••••••
(X)HTML
".' : AUributs supplémentaires associés aux tableaux
Nom
Fonction/Va/eur
Typede valeur
E/ément(s) associé(s)
abbr
Abrège le nom d'une cellule de l'en-tête
Texte
<td>
axis
Spécifie une liste d'en-têtes
par des virgules
CDATA
<td> <th>
char
Définit l'alignement des caractères
pour les éléments du tableau
séparés
Caractère
ISO 10646
<col
<th>
/>
<colgroup>
<tbody>
<td>
<tfoot>
<th>
<the ad> <tr>
_--------Chapitre
Nom
Fonction/Va/euT
Type de valeur
E/ément(s) associé(s)
charoff
Définit le décalage lorsque
l'alignement char est utilisé
Longueur (%)
<col />
<colgroup>
<tbody> <td>
<tfoot>
<th> <the ad>
<tr>
frame
Identifie les parties visibles de la
structure d'un tableau
{ "above" l"below
" l"border" l"box
" 1 "hsides"l"
lhs"l"rhs"l"
void" l"vsides"}
<table>
rules
Gouverne l'affichage de guides dans
le tableau
{"all" l"cols" 1"
groups" l"rione " 1
"rows"}
<table>
scope
Décrit la portée pour les cellules de
l'en-tête du tableau
{"col" l"colgroup" 1
"row" l"rowgroup"}
<td><th>
summary
Décrit l'objet du tableau pour la
synthèse vocale
Texte
<table>
span
Modifie le nombre de colonnes
auxquelles les attributs de col
s'appliquent
Nombre
<col />

tableaux HTML

Transcription

Documents pareils

Le module EPG de Progdvb

Logiciels AgrÃ©Ã©s par la Commission de pilotage de la

L`ADJECTIF ATTRIBUT DU SUJET Exercice Soulignez l`adjectif

Télécharger les spécifications techniques au

Mise en forme d`un document HTML

Le Border Collie

Cette carte interactive, réalisée par la chaîne de radio

E40HBAE1 Accessory

drawers - guylop

Bruno Vargas et Didier Debord