Les tableaux

Les balises

Définition de tableau selon HTML 3.2
TABLE -- Définit une table (CAPTION?, TR+)
align %Where; #IMPLIED
width %Length; #IMPLIED définit la largeur de la table
border %Pixels; #IMPLIED
cellspacing %Pixels #IMPLIED
cellpadding %Pixels #IMPLIED
CAPTION -- titre du tableau (%text;)*
align (top | bottom) #IMPLIED
TR -O Table-Row (TH | TD)*
%cell.halign;
%cell.valign;
(TH | TD) -O Table-Header Table-DATA %body.content;
nowrap (nowrap) #IMPLIED
rowspan NUMBER 1
colspan NUMBER 1
%cell.halign;
%cell.valign;
width %Pixels #IMPLIED
height %Pixels #IMPLIED
%Where "(left | center | right)"
%cell.halign; "align (left | center | right) #IMPLIED"
%cell.valign; "valign (top | middle | bottom) #IMPLIED"

<TABLE [...]> HTML 3.2
Insère un tableau. Les rangées et cellules doivent être inséré grâce aux balises TR et TD. Doit finir avec </TABLE>. Les paramètres suivants sont autorisés :

ALIGN=left|center|right HTML 3.2
Aligne la table à gauche (left), au centre (center) ou à droite (right) de la page.
WIDTH=n|n% HTML 3.2
Indique la largeur de la table en pixels ou en pourcentage de la largeur de la fenêtre. Si cet attribut n'est pas indiqué le navigateur adapte au mieux la largeur de la table.
BORDER=n HTML 3.2
Epaisseur des bordures du tableau en pixels. Pas de bordure par défaut. Les bordures ont généralement un effet 3D.
CELLSPACING=n HTML 3.2
Indique l'espacement entre les cellules du tableau en pixels. 2 par défaut.
CELLPADDING=n HTML 3.2
Indique l'espacement entre le contenu de la cellule et la bordure en pixels. 1 par défaut.
BGCOLOR=#RRVVBB|couleur IE 3.0, NS 3.0
Définit la couleur de fond de la table.
BACKGROUND=url IE 3.0
URL d'une image de fond pour la table. Elle est répété autant de fois que nécesssaire pour remplir le tableau. Cet attribut écrase le résultat de BGCOLOR.
BORDERCOLOR=#RRVVBB|couleur IE 3.0
Définit la couleur des bordures de la table. Il faut que BORDER ait une valeur supérieur à 0.
BORDERCOLORDARK=#RRVVBB|couleur IE 3.0
Définit la couleur foncé de l'ombre des bordures 3D de la table. Pour cela BORDER doit avoir une valeur supérieur à 0 et BORDERCOLOR ne doit pas être défini.
BORDERCOLORLIGHT=#RRVVBB|couleur IE 3.0
Définit la couleur clair de l'ombre des bordures 3D de la table. Pour cela BORDER doit avoir une valeur supérieur à 0 et BORDERCOLOR ne doit pas être défini.
FRAME=void|above|below|hsides|vsides|lhs|rhs|box IE 3.0
Définit quels contours de la bordure de la table doivent être tracés.
'VOID'. Pas de ligne de cadre extérieur. Par défaut.
'ABOVE'. Une seule ligne de cadre sur la bordure supérieur du tableau.
'BELOW'. Une seule ligne de cadre sur la bordure inférieur du tableau.
'HSIDES'. Une ligne avant et aprés le tableau
'LHS'. Une seule ligne de cadre sur la bordure gauche du tableau.
'RHS'. Une seule ligne de cadre sur la bordure gauche du tableau.
'VSIDES'. Une ligne à droite et à gauche du tableau.
'BOX'. Lignes de cadre sur les quatres bordures du tableau.
RULES=none|rows|cols|groups IE 3.0
Utilisé pour afficher les bordures horizontales ou verticales intérieurs d'un tableau.
'NONE'. Aucune ligne de séparation à l'intérieur du tableau. Par défaut.
'ROWS'. Trace une ligne horizontale entre chaque ligne.
'COLS'. Trace une ligne verticale entre chaque colonne.
'GROUPS'Pas de cadre intérieur séparant les différentes colonnes d'une ligne appartenet au même COLGROUP. Affichera les lignes entre les balises THEAD, TBODY et TFOOT.
[HSPACE=n] [VSPACE=n] NS 3.0
Taille en pixels de l'espace horizontal (gauche et droit) et vertical (haut et bas) entre le tableau et les éléments environnants.

<CAPTION [ALIGN=top|bottom]> HTML 3.2
Encadre un texte devant servir de légende pour le tableau. A utiliser juste aprés la balise <TABLE>, et pas à l'intérieur des lignes.
[ALIGN=top|bottom] affichera la légende sur 'TOP' ou sous 'BOTTOM' la table.

<TR [ALIGN=left|center|right] [VALIGN=top|middle|bottom|baseline] [BACKGROUND=url] [BGCOLOR=#RRVVBB|couleur] [HEIGHT=n|n%] [BORDERCOLOR=#RRVVBB|couleur] [BORDERCOLORLIGHT=#RRVVBB|couleur] [BORDERCOLORDARK=#RRVVBB|couleur]> HTML 3.2
'Table Row'. Insère une rangée de cellules dans la table.

[ALIGN=left|center|right] HTML 3.2
Définit l'alignement horizontal du texte à gauche 'LEFT', au centre 'CENTER' ou à droite 'RIGHT' des cellules de la rangée.
[VALIGN=top|middle|bottom|baseline] HTML 3.2
Définit l'alignement vertical du texte en haut 'TOP', au milieu 'MIDDLE' ou en bas 'BOTTOM' des cellules de la rangée.
'BASELINE'. Le texte est aligné avec les textes des cellules environnantes de son rang sur une ligne de base commune.
[HEIGHT=n|n%] IE 3.0
Définit la hauteur de la rangée en pixels ou en pourcentage de la hauteur de la table.
[BGCOLOR=#RRVVBB|couleur] NS 3.0, IE 3.0
Couleur de fond de la rangée.
[BACKGROUND=url] IE 3.0
URL d'une image de fond de la rangée. Cette image est prioritaire sur celle définit dans la balise TABLE.
[BORDERCOLOR=#RRVVBB|couleur] IE 3.0
Couleur des bordures des cellules de la rangée. BORDER doit être défini dans la balise TABLE.
[BORDERCOLORLIGHT=#RRVVBB|couleur] IE 3.0
Couleur clair de l'ombre des bordures 3D de la rangée. BORDERCOLOR ne doit pas avoir été défini et BORDER doit être supérieur à 0.
[BORDERCOLORDARK=#RRVVBB|couleur] IE 3.0
Couleur sombre de l'ombre des bordures 3D de la rangée. BORDERCOLOR ne doit pas avoir été défini et BORDER doit être supérieur à 0.

<TD|TH [NOWRAP] [ROWSPAN=n] [COLSPAN=n] [ALIGN=left|center|right] [VALIGN=top|middle|bottom|baseline] [WIDTH=n|n%] [HEIGHT=n|n%] [BGCOLOR=#RRVVBB|couleur] [BACKGROUND=url] [BORDERCOLOR=#RRVVBB|couleur] [BORDERCOLORDARK=#RRVVBB|couleur] [BORDERCOLORLIGHT=#RRVVBB|couleur]> HTML 3.2
'Table Data' et 'Table Header'. TD et TH insèrent une cellule. TH est une cellule d'en-tête et son contenu est affiché centré en gras.

[NOWRAP] HTML 3.2
Indique au browser de ne pas segmenter le contenu de la cellule. Le texte apparait sur une seule ligne.
[ROWSPAN=n] HTML 3.2
La cellule s'étale sur n rangées. 1 par défaut.
[COLSPAN=n] HTML 3.2
La cellule s'étale sur n colonnes. 1 par défaut.
[ALIGN=left|center|right] HTML 3.2
Définit l'alignement horizontal du texte à gauche 'LEFT', au centre 'CENTER' ou à droite 'RIGHT' de la cellule.
[VALIGN=top|middle|bottom|baseline] HTML 3.2
Définit l'alignement vertical du texte en haut 'TOP', au milieu 'MIDDLE' ou en bas 'BOTTOM' de la cellule.
[WIDTH=n|n%] HTML 3.2
Définit la largeur de la cellule en pixels ou en pourcentage de la largeur de la table.
[HEIGHT=n|n%] HTML 3.2
Définit la hauteur minimum de la cellule en pixels ou en pourcentage de la hauteur de la table.
[BGCOLOR=#RRVVBB|couleur] NS 3.0, IE 3.0
Couleur de fond de la cellule.
[BACKGROUND=url] IE 3.0
URL de l'image de fond de la cellule. Prioritaire par rapport à celle définit dans les balises TABLE et TR
[BORDERCOLOR=#RRVVBB|couleur] IE 3.0
Couleur des bordures de la cellule. BORDER doit avoir été défini supérieur à 0.
[BORDERCOLORDARK=#RRVVBB|couleur] IE 3.0
Couleur sombre de l'ombre des bordures 3D de la cellule. BORDERCOLOR ne doit pas avoir été défini et BORDER doit être supérieur à 0.
[BORDERCOLORLIGHT=#RRVVBB|couleur] IE 3.0
Couleur clair de l'ombre des bordures 3D de la cellule. BORDERCOLOR ne doit pas avoir été défini et BORDER doit être supérieur à 0.

Les extensions Internet Explorer suivantes sont le plus souvent utilisé avec l'attribut FRAME de la balise TABLE. Ils ne sont pas supporté par les autres browsers.

<THEAD> IE 3.0
'Table Head'. Englobe les cellules devant figurer dans l'en-tête du tableau et devant être mise en relief par rapport aux lignes de la partie principale. Agit en tant que contener acceuillant des tags TR et TD/TH de définition de rangées et cellules de tableau. Un seul container THEAD est autorisé par tableau. Si THEAD est utilisé, la partie principale doit être marquée par un container TBODY.

<TBODY> IE 3.0
'Table Body'. Marque la (les) partie (s) principale (s) d'un tableau lorsque les tags THEAD et TFOOT sont exploités pour appliquer un format particulier à l'en-tête et au pied du tableau. TBODY agit en tant que container acceuillant les tags TR et TD de toutes les cellules du tableau devant se trouver dans la partie principale.

<TFOOT> IE 3.0
'Table Footer'. TFOOT permet de marquer les lignes et cellules de tableau devant être affichées au pied du tableau et formatées en conséquence. Un seul container TFOOT est autorisé par tableau. Si TFOOT est utilisé, la partie principale du tableau doit être marquée par un container TBODY.

<COLGROUP [ALIGN=left|center|right] [SPAN=n]> IE 3.0
Définit l'alignement du texte pour un groupe de colonnes successives à l'intérieur d'une définition de tableau. Les colonnes sont simultanément sélectionnées en tant que groupe cohérent, ce qui concerne avant tout l'encadrement lorsque l'attribut RULES de la balise TABLE précédent a été configuré sur GROUPS et que BORDER n'est pas égal à 0. Dans les colonnes marquées par COLGROUP, les cerllules d'une même ligne ne sont pas séparées par différents cadres, mais dotées d'un cadre commun, sans séparation visuelle. Col ne prend pas ce fait en considération, mais il peut être utilisé à la suite d'un tag COLGROUP pour modifier l'alignement du texte de différentes colonnes. Le statut de groupe n'en est pas altéré. COLGROUP ne nécessite pas de tag de fin.

[ALIGN=left|center|right]
Alignement du texte à gauche 'LEFT', au centre 'CENTER' ou à droite 'RIGHT' des champs des colonnes concernées.
[SPAN=n]
Nombre de colonnes successives réunies en un groupe par COLGROUP. 1 par défaut.

<COL [ALIGN=left|center|right] [SPAN=n]> IE 3.0
La balise COL permet de définir les propriétés d'une ou plusieurs colonnes dans le cadre d'une définition de tableau 'TABLE'. Les attributs de la balise COLGROUP sont ici écrasés pour les colonnes concernées. Ce tag ne nécessite pas de tag de fin car il désigne lui même le nombre de colonnes concernées.

[ALIGN=left|center|right]
Alignement du texte à gauche 'LEFT', au centre 'CENTER' ou à droite 'RIGHT' des champs des colonnes concernées.
[SPAN=n]
Nombre de colonnes successives réunies en un groupe par COLGROUP. 1 par défaut.

Retour en haut

Exemple

Exemple 1

<TABLE BORDER=1>
<TR>
   <TH width=150 height=50>case TH (centr&eacute;)
   <TD>case TD
   <TD valign=top>top
<TR>
   <TD align=left>left
   <TD align=center>center H 
      <TABLE BORDER=1 >
      <TR>
         <TD>Table incrust&eacute;e
         <TD>dans la case
      </TABLE>
   <TD VALIGN=BOTTOM ROWSPAN="2">bottom
<TR align=right>
   <TD COLSPAN="2">right
</TABLE>
case TH (centré) case TD top
left center H
Table incrustée dans la case
bottom
right

Exemple 2


           A test table with merged cells
/--------------------------------------------------\
|          |      Average      |  other   |  Misc  |
|          |-------------------| category |--------|
|          |  height |  weight |          |        |
|-----------------------------------------|--------|
| males    | 1.9     | 0.003   |          |        |
|-----------------------------------------|--------|
| females  | 1.7     | 0.002   |          |        |
\--------------------------------------------------/

<TABLE BORDER>
<CAPTION>A test table with merged cells</CAPTION>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average
	<TH ROWSPAN=2>other<BR>category<TH>Misc
<TR><TH>height<TH>weight
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>
A test table with merged cells
Average other
category 		Misc
height weight
males 1.9 0.003
females 1.7 0.002

Exemple 3

L'exemple suivant n'est rendu convenablement que sous Microsoft Internet Explorer 3.0 et supérieur. 

                     CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
========================================================================
Code-Page| Name                      |ACP OEMCP| Windows Windows Windows
    ID   |                           |         |  NT 3.1 NT 3.51    95
------------------------------------------------------------------------
   1200  |Unicode (BMP of ISO 10646) |         |     X       X       *
   1250  |Windows 3.1 East. Europe   |  X      |     X       X       X
   1251  |Windows 3.1 Cyrillic       |  X      |     X       X       X
   1252  |Windows 3.1 US (ANSI)      |  X      |     X       X       X
   1253  |Windows 3.1 Greek          |  X      |     X       X       X
   1254  |Windows 3.1 Turkish        |  X      |     X       X       X
   1255  |Hebrew                     |  X      |                     X
   1256  |Arabic                     |  X      |                     X
   1257  |Baltic                     |  X      |                     X
   1361  |Korean (Johab)             |  X      |             **      X
------------------------------------------------------------------------
    437  |MS-DOS United States       |     X   |     X       X       X
    708  |Arabic (ASMO 708)          |     X   |                     X
    709  |Arabic (ASMO 449+, BCON V4)|     X   |                     X
    710  |Arabic (Transparent Arabic)|     X   |                     X
    720  |Arabic (Transparent ASMO)  |     X   |                     X
========================================================================

<table border=2 frame=hsides rules=groups>
<caption>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption>
   <colgroup align=center>
   <colgroup align=left>
   <colgroup align=center span=2>
   <colgroup align=center span=3>
<thead valign=top>
   <tr>
   <th>Code-Page<br>ID
   <th>Name
   <th>ACP
   <th>OEMCP
   <th>Windows<br>NT 3.1
   <th>Windows<br>NT 3.51
   <th>Windows<br>95
<tbody>
   <tr><td>1200<td>Unicode (BMP of ISO 10646)<td><td><td>X<td>X<TD>*
   <tr><td>1250<td>Windows 3.1 Eastern European<td>X<td><td>X<td>X<TD>X
   <tr><td>1251<td>Windows 3.1 Cyrillic<td>X<td><td>X<td>X<TD>X
   <tr><td>1252<td>Windows 3.1 US (ANSI)<td>X<td><td>X<td>X<TD>X
   <tr><td>1253<td>Windows 3.1 Greek<td>X<td><td>X<td>X<TD>X
   <tr><td>1254<td>Windows 3.1 Turkish<td>X<td><td>X<td>X<TD>X
   <tr><td>1255<td>Hebrew<td>X<td><td><td><td>X
   <tr><td>1256<td>Arabic<td>X<td><td><td><td>X
   <tr><td>1257<td>Baltic<td>X<td><td><td><td>X
   <tr><td>1361<td>Korean (Johab)<td>X<td><td><td>**<td>X
<tbody>
   <tr><td>437<td>MS-DOS United States<td><td>X<td>X<td>X<TD>X
   <tr><td>708<td>Arabic (ASMO 708)<td><td>X<td><td><td>X
   <tr><td>709<td>Arabic (ASMO 449+, BCON V4)<td><td>X<td><td><td>X
   <tr><td>710<td>Arabic (Transparent Arabic)<td><td>X<td><td><td>X
   <tr><td>720<td>Arabic (Transparent ASMO)<td><td>X<td><td><td>X
</table>
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
Code-Page
ID 		Name ACP OEMCP Windows
NT 3.1 		Windows
NT 3.51 		Windows
95
1200 Unicode (BMP of ISO 10646) X X *
1250 Windows 3.1 Eastern European X X X X
1251 Windows 3.1 Cyrillic X X X X
1252 Windows 3.1 US (ANSI) X X X X
1253 Windows 3.1 Greek X X X X
1254 Windows 3.1 Turkish X X X X
1255 Hebrew X X
1256 Arabic X X
1257 Baltic X X
1361 Korean (Johab) X ** X
437 MS-DOS United States X X X X
708 Arabic (ASMO 708) X X
709 Arabic (ASMO 449+, BCON V4) X X
710 Arabic (Transparent Arabic) X X
720 Arabic (Transparent ASMO) X X

Documents de référence

Retour en haut
Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservés
O5 mai 2000