HTML en 5 leçons

Partie2

Leçon 1 Leçon 2 Leçon 3 Leçon 4 Leçon 5

Tables 

eric@netline.be

TABLE

Dans les premières versions du langage HTML, le positionnement d'éléments en tableaux relevait du cauchemar. Il a fallu attendre la version 3.0 pour enfin voir apparaître la balise <TABLE>. Les tables permettent de diviser l'espace visible du navigateur en zones rectangulaires et de remplir ces zones avec des objets (textes, images, couleurs) permettant un contrôle amélioré de la position de ces objets. Le début et la fin du tableau sont balisés par les marqueurs <table> et </table>. Entre les deux, on place une séquence d'éléments décrivant les diverses parties du tableau : en-tête, pied du tableau, rangées et cellules.

L'ordre de cette séquence d'éléments est important et doit contenir :

Partons du cas le plus simple, un tableau composé d'une seule rangée incluant deux cellules

Il faut d'abord créer le tableau avec <TABLE>, définir une nouvelle rangée avec <TR> ( Table Row) et dans cette rangée, créer autant de couples <TD></TD> qu'il n'y a de colonnes dans la rangée. On termine la rangée avec <TR> puis la table avec </TABLE>. Le tableau ainsi constitué aura une largeur calculée en fonction de la taille du plus gros des objets inclus entre les marqueurs <TD></TD>.

 

<TABLE>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

A l'intérieur d'une cellule, tout est possible, comme placer plusieurs lignes de texte (terminées par <BR> ou <P> ), choisir la couleur des caractères et du fond , créer des hyperliens, placer des images, d'autres tables, etc...

 

Pour ajouter une légende à cette table, nous pouvons utiliser le marqueur <CAPTION> qui accepte comme paramètres ALIGN=, et comme valeurs, TOP, BOTTOM, LEFT, RIGHT (haut, bas, gauche, droite) pour agir sur le placement de la légende.

 

<TABLE>

<CAPTION align="left">Legend</CAPTION>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

Les attributs pour la balise <TABLE> sont les suivants

 

<TABLE LANG="..." DIR=ltr|rtl ID="..." CLASS="..." ALIGN=left|right|center|justify|bleedleft|bleedright WIDTH="..." COLS=number BORDER="..." FRAME=void|above|below|hsides|lhs|rhs|vsides|box|border RULES=none|basic|rows|cols|all CELLSPACING="..." CELLPADDING="..." CLEAR=left|right|all|"..." NOFLOW UNITS=en|relative|pixels COLSPEC="..." DP="..." NOWRAP></TABLE>

 

Examinons les plus importants

 

WIDTH

 

Plutôt que d'être imposée par la taille des objets inclus dans ses cellules, un tableau peut avoir une largeur définie grâce à l'attribut <TABLE WIDTH="x"> avec x représentant une largeur absolue exprimée en pixels ou bien s'il est suivi d'un signe "%" d'une largeur exprimée en pourcentage de la largeur de la fenêtre de navigation.

 

Si l'attribut WIDTH n'est suivi d'aucune valeur, cela correspond à la valeur par défaut de 100% de la largeur de la fenêtre.

 

Pour les maniaques, il est même possible de définir la largeur d'un tableau en

 

Voici ce que donnera l'exemple de code suivant

<TABLE border ="1" width="80%">

<caption >80%</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

<p>

<TABLE border ="1" width="15cm">

<caption> 15 cm</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

<p>

<TABLE border ="1" width="150">

<caption> 150 pixels</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

<p>

<TABLE border ="1" width="150pi">

<caption> 150 picas</caption >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

ALIGN

 

L'attribut ALIGN permet de spécifier la position relative du tableau par rapport à la fenêtre du navigateur :

left

right

center

justify

 

COLS

 

L'attribut COLS spécifie le nombre total de colonnes de la table et aide le navigateur à afficher plus rapidement l'aspect initial du tableau puisque l'attribut COLS n'oblige plus le navigateur à compter tous les <TD> du tableau jusqu'au bout avant de pouvoir afficher le tableau. Il vous faut néanmoins rester logique et avoir une valeur pour COLS qui corresponde au nombre de <TD> de vos rangées.

 

BORDER

 

L'attribut BORDER permet de contrôler la taille du cadre entourant chaque cellule et le tableau. L'attribut BORDER avec comme valeur 0 affiche un tableau sans cadre. L'unité standard est le pixel mais peut être également exprimée en points, picas, cm, mm ou inches. Si l'unité est suffixée par le signe "%"

 

L'exemple

<TABLE border ="1" >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

<TABLE border ="10" >

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

</TABLE>

 

donnera ceci

 

RULES

 

L'attribut RULES permet d'opter pour la présence ou non des barres séparant lignes et colonnes du tableau. Il accepte les valeurs none, basic, rows, cols, all . Rules = none supprime donc toutes lignes entre cellules et colonnes, rules = rows n'affiche que les lignes horizontales etc.

 

<TABLE border ="1" rules=all>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

<TR>

<TD>Cell 3</TD>

<TD>Cell 4</TD>

</TR>

</TABLE>

<br>

<TABLE border ="1" rules=none>

<TR>

<TD>Cell 1</TD>

<TD>Cell 2</TD>

</TR>

<TR>

<TD>Cell 3</TD>

<TD>Cell 4</TD>

</TR>

</TABLE>

 

SUMMARY

N'oubliez pas qu'il existe aussi des navigateurs en mode texte pour mal voyants par exemple. Pour ces navigateurs non visuels, l'attribut SUMMARY= permet de laisser un commentaire alphanumérique descrivant contenu et structure de la table.

FRAME

Void [Do not render any borders]
Above [Border on top side only]
Below [Border on bottom side only]
HSides [Render horizontal borders only (top and bottom sides.)]
VSides [Render vertical borders only (left and right sides.)]
LHS [Border on left side only]
RHS [Border on right side only]
Box [Border on all four sides]
Border [Border on all four sides - just like BOX - DEFAULT

L'attribut RULES gère les séparateurs internes d'une table tandis que l'attribut FRAME s'occupe du cadre extérieur d'un tableau. La valeur FRAME=Below vous affichera par exemple un tableau dont suls les bords inférieurs sont visibles.

CELLSPACING

Espacement entre cellules. Défaut = 2

CELLPADDING

Espacement entre le cadre et le contenu de la cellule. Défaut = 1

BGColor

L'attribut BGColor pour Background Color permet d'allouer une couleur de fond à l'ensemble des cellules d'un tableau. Il faut lui passer comme valeur un triplet RGB ( Red, Green, Blue) en hexadécimal sous forme #RRGGBB ou le nom d'une couleur.

 

(Cfr notre tableau 1)

Background
 

L'attribut background permet de sélectionner une image de fond pour l'ensemble du tableau en précisant simplement son URL du type <table background="http://www.best.be/logo.gif">

TR Table Row

 

A l'intérieur d'un tableau, le couple <TR></TR> permet de délimiter les cellules inclues dans une même rangée.

Les attributs acceptés sont:

Align
L'attribut précise l'alignement horizontal global des cellules de la rangée avec comme valeurs acceptées : Left , Center , Right

BGColor

Définit la couleur de fond d'une rangée. Valeurs : triplet RGB ou nom de couleur

BorderColor

Définit la couleur du bord interne de chaque cellule de la rangée. Valeurs : triplet RGB ou nom de couleur

BorderColorDark

Modifie la couleur de l'effet 3D appliqué au coin supérieur gauche des cellules d'une rangée. Valeurs : triplet RGB ou nom de couleur

BorderColorLight

Modifie la couleur de l'effet 3D appliqué au coin inférieur droit des cellules d'une rangée. Valeurs : triplet RGB ou nom de couleur

Char

Désigne le caractère qui va permettre d'aligner le contenu d'une rangée lors de l'apparition de sa première occurrence. La valeur par défaut est le point

NOWRAP

Permet de désactiver le comportement standard de passage à la ligne automatique et d'augmenter automatiquement la taille des cellules pour contenir la totalité des données des cellules de la rangée:

VAlign

Décrit l'alignement vertical global des cellules de la rangée. Valeurs : Top Middle Bottom Baseline

TD Table Data TH Table Header

 

TD et TH s'utilisent de la même manière : ils définissent des cellules au sein d'une rangée elle même incluse dans une table

 

 

<table border="1" width="100%">

<tr>

<td width="50%">toto</td>

<td width="50%">tutu</td>

</tr>

<tr>

<th width="50%">titi</th>

<th width="50%">tata</th>

</tr>

</table>

 

donne ceci

 

 

Une cellule de type TH est donc une cellule ordinaire à la seule exception que les caractères sont gras au lieu d'ordinaire et que le contenu des cellules est centré au lieu d'être aligné à gauche.

Abbr

Spécifie un nom abrégé pour une cellule d'en-tête

Align

Alignement horizontal. Valeurs : Left Center Right

Background

Alloue une image de fond à une cellule

BGColor

Couleur de fond de la cellule

BorderColor

Couleur du cadre interne de la cellule

BorderColorDark

Couleur du bord supérieur

BorderColorLight

Couleur du bord inférieur droit

Char

Caractère servant à l'alignement des valeurs numériques

Colspan

Spécifie le nombre de colonnes occupées par une cellule

Dans l'exemple suivant, l'utilisation de colspan=2 pour la cellule de la deuxième rangée permet de doubler sa largeur

<table border="1" width="100%">

<tr>

<td width="50%">toto</td>

<td width="50%">tutu</td>

</tr>

<tr>

<td colspan="2">titi tata</td>

</tr>

</table>

Height

A n'utiliser qu'avec précaution car le résultat est fort variable d'un navigateur à l'autre. netscape supporte mal cet attribut qui permet de définir la hauteur d'une cellule et par conséquent la hauteur de toutes les autres cellules de la rangée.

NOWRAP

Permet de désactiver le comportement standard de passage à la ligne automatique et d'augmenter automatiquement la taille d'une cellule pour en contenir la totalité des données .

Rowspan

Précise le nombre de rangées occupées par une cellule

<table border="1" width="100">

<tr>

<td >1</td>

<td rowspan="2">2</td>

<td >3</td>

</tr>

<tr>

<td >4</td>

<td >5</td>

</tr>

</table>

VAlign

Alignement vertical du contenu de la cellule avec comme valeurs : Top Middle Bottom Baseline

Width

Largeur de la cellule exprimée en pixels ou en pourcentage de la largeur de la fenêtre du navigateur

TFOOT, TBODY

 

Tombés en désuétude, les balises TFOOT et TBODY s'utilisent comme suit

 

<table BORDER="1" COLS="4" >

<caption ALIGN="top">My caption</caption>

<thead>

<tr> <th>Header 1</th> <th>H2</th> <th>H3</th> <th>H4</th> </tr>

</thead>

<tfoot>

<tr> <th COLSPAN=4>My tfoot</th> </tr>

</tfoot>

<tbody>

<tr> <td>Beginning of my tbody</td> <td>5</td> <td>2</td> <td>5</td> </tr>

</tbody>

</table>

 

Tableau 1

 

Il existe différentes méthodes pour afficher ou représenter des couleurs bien précises sur ordinateur. Une d'elle est appelée la méthode RGB en anglais ou RVB pour Rouge vert Bleu en français. L'idée est d'utiliser de manière additive les couleurs fondamentales Rouge, Verte et Bleue pour créer toutes les autres couleurs du spectre. Vous pouvez imaginer ce monde RGB comme un monde orthogonal en trois dimensions avec une couleur associée à chacun des axes ou comme un ensemble de trois cercles avec intersection

100 % de rouge, 100 % de vert et 100 % de bleu donnent la couleur blanche.

0% de rouge, 0 % de vert et 0% de bleu donne le noir. Le noir n'est donc pas une couleur mais plutôt l'absence de couleur.

Pour un codage plus facile on représente 0% par la valeur 0 et 100% par la valeur 255 (codage sur 1 octet donc 8 bits => une couleur est codée sur 3 x 8bits = 24bits => 16,7 Million de couleurs)

 

Voyons maintenant une série de couleurs de base et leur découpage RGB

gris moyen 127 127 127

Rouge 255 0 0

Vert 0 255 0

Bleu 0 0 255

Jaune 255 255 0

Magenta 255 0 255

Cyan 0 255 255

A l'école primaire, l'instit vous a appris à compter en base 10. Après 1,2,3,4,5,6,7,8 et 9, vous passez à la dizaine en inscrivant 1 dans la case des dizaines et 0 dans la case des unités. Les ordinateurs et donc les informaticiens préfèrent eux travailler en base deux (binaire) avec uniquement des 0 et des 1, en base huit (octal) ou en base 16 (hexadécimal).

Et c'est justement en hexadécimal que le langage HTML représente les couleurs. En hexadécimal, on ne passe pas à la dizaine mais à la seizaine comme suit

 

Base 10 base 16

----------------

0 --> 0

1 --> 1

2 --> 2

3 --> 3

4 --> 4

5 --> 5

6 --> 6

7 --> 7

8 --> 8

9 --> 9

10 --> A

11 --> B

12 --> C

13 --> D

14 --> E

15 --> F

16 --> 10

32 -->20

48 --> 30

 
255 en décimal devient FF en hexadécimal.

Si vous devez calculer la valeur hexadécimale d'un nombre décimal par exemple 34, le travail consiste à faire des divisions entières par 16 et stocker les restes de ces divisions, jusqu'à temps que l'on trouve 0 comme résultat de division. Vous pouvez bien sûr également utiliser la calculette de Windows en mode scientifique !

Ex 34 / 16 = 2 reste 2 donc 34 en décimal devient 22 en hexa

Une fois que cette valeur est convertie en hexadécimal, on la préfixe du signe # pour signaler qu'on est en base 16. Bref, si vous voulez un fond gris dans vos tableaux, il vous faudra taper <table bgcolor="#C0C0C0">.

Heureusement, il est possible d'utiliser des noms un peu plus romantiques pour désigner les couleurs. Netscape et Internet Explorer devraient reconnaître les 140 noms suivants

aliceblue
lightseagreen
darkslategray
papayawhip
antiquewhite
lightskyblue
darkturquoise
peachpuff
aqua
lightslategray
darkviolet
peru
aquamarine
lightsteelblue
deeppink
pink
azure
lightyellow
deepskyblue
plum
beige
lime
dimgray
powderblue
bisque
limegreen
dodgerblue
purple
blackk
linen
firebrick
red
blanchedalmond
magenta
floralwhite

rosybrown
blue
maroon
forestgreen
royalblue
blueviolet
mediumaquamarine
fuchsia
saddlebrown
brown
mediumblue
gainsboro
salmon
burlywood
mediumorchid
ghostwhite
sandybrown
cadetblue
mediumpurple
gold
seagreen
chartreuse
mediumseagreen
goldenro
seashell
chocolate
mediumslateblue
gray
sienna
coral
mediumspringgreen
green
silver
cornflowerblue
mediumturquoise

greenyellow
skyblue
cornsilk
mediumvioletred
honeydew
slateblue
crimson
midnightblue
hotpink
slategray
cyan
mintcream
indianred
snow
darkblue
mistyrose
indigo
springgreen
darkcyan
moccasin
ivory
steelblue
darkgoldenrod
navajowhite
khaki
tan
darkgray
navy
lavender
teal
darkgreen
oldlace
lavenderblush
thistle
darkkhaki

olive
lawngreen
tomato
darkmagenta
olivedrab
lemonchiffon
turquoise
darkolivegreen
orange
lightblue
violet
darkorange
orangered
lightcoral
wheat
darkorchid
orchid
lightcyan
white
darkred
palegoldenrod
lightgoldenrodyellow
whitesmoke
darksalmon
palegreen
lightgreen
yellow
darkseagreen
paleturquoise
lightgrey
yellowgreen
darkslateblue
palevioletred
lightpink
lightsalmon

 

Cette page couleur est disponible sous color.htm

Soyez prudents dans le choix de vos couleurs. La plupart de vos utilisateurs n'ont à leur disposition qu'une palette de 256 couleurs dont Windows et Mac OS en ont déjà exploité 40. Il ne vous reste donc qu'une palette de 216 couleurs pour Netscape ou IExplorer. En respectant cette palette de base, vous éviterez l'effet de dithering où la couleur à afficher est simulée par une trame placée sur une couleur de base

Pour obtenir cette palette de base, il suffit de respecter la convention suivante : ne choisir que des valeurs RGB dans la série 00, 33, 66, 99, CC et FF. Vous obtiendrez ainsi des couleurs pures visibles même avec les palettes les plus réduites. Retrouvez cette palette de base à l'URL 216.HTM