Sommaire
Le modèle de tableaux tel que le gère HTML permet aux utilisateurs d'organiser leurs données dans des structures tabulaires complexes. Les tableaux peuvent contenir des listes, des paragraphes, des formulaires, des images, du texte préformaté, ou d'autres tableaux.
Dans ce modèle de tableaux, des lignes ou des colonnes pourront être groupées ensembles. Ces groupements ajoutent de l'information structurelle aux tableaux et pourront être visualisées par les agents utilisateurs de telle sorte à mettre en valeur ces organisations.
Les groupes de lignes sont particulièrement utiles dans des tableaux très longs. Des agents utilisateurs visuels "intelligents" permettront de faire défiler un corps de table tout en préservant la position des en-têtes et pieds de tables à l'écran. De même, lorsque des tableaux longs sont visualisés, l'en-tête et le pied de table pourra être répété sur chaque page qui contient des données.
Note : Cette spécification inclue une information plus détaillée à propos des tableaux dans les sections traitant des règles et conseils de design des tableaux.
Un tableaux a la structure suivante en HTML :
<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> <!ATTLIST TABLE -- élément de tableau -- %attrs; -- %coreattrs, %i18n, %events -- align %TAlign; #IMPLIED -- position du tableau par rapport à la fenêtre -- bgcolor %Color #IMPLIED -- couleur de fond des cellules -- width CDATA #IMPLIED -- largeur de tableau par rapport à la fenêtre -- cols NUMBER #IMPLIED -- utilisé pour affichage par anticipation -- border CDATA #IMPLIED -- contrôle la largeur du cadre autour du tableau -- frame %TFrame; #IMPLIED -- which parts of table frame to include -- rules %TRules; #IMPLIED -- règles entre lignes et colonnes -- cellspacing CDATA #IMPLIED -- espacement entre cellules -- cellpadding CDATA #IMPLIED -- marge intérieure des cellules -- >
Balise de début : requise, Balise de fin : requise
Définition des attributs
Attributs définis par ailleurs
L'élément TABLE contient tous les autres éléments qui spécifient le titre, les lignes, le contenu, et le format.
Le nombre des lignes d'un tableau est égal au nombre d'éléments TR qu'il contient. Les agents utilisateurs ignoreront les lignes artificiellement induites par des étalement verticaux de cellules au delà de nombre.
La détermination du nombre de colonnes peut se faire par plusieurs méthodes :
Les agents utilisateur pourront déduire de l'exemple qui suit que la table a trois colonnes.
<TABLE cols="3"> ...le reste de la table... </TABLE>
Si le nombre de colonnes d'une table n'est pas spécifiée par l'attribut cols, il se pourrait qu'un agent utilisateur visuel dusse attendre le chargement de l'intégralité du tableau avant de commencer à le représenter. En général, l'attente de toutes les informations de la table permet de déterminer le nombre de colonnes et leur largeur sans avoir à redessiner le tout. La définition de l'attribut cols peut être considéré comme un "truc" qui permet aux agents utilisateurs visuels d'afficher la table au fur et à mesure de la réception des données de chacune des lignes. Il est conseillé aux auteurs d'utiliser les éléments COL et COLGROUP pour exprimer les propriétés des colonnes plutôt que spécifier l'attribut cols.
La directionnalité d'une table est spécifiée par l'attribut dir de l'élément TABLE. Pour une table déclarée de gauche à droite (par défaut), la première coonne se situe à gauche de la table et la première ligne est en haut. Pour une table définie de droite à gauche, la première colonne se situe à droite de la table, et la première ligne toujours en haut de la table.
Par la suite, pour les tables de gauche à droite (par défaut), les cellules de "bourrage" seront ajoutées par la droite, et par la gauche à contrario pour des tables de droite à gauche.
Lorsqu'il est défini pour l'élément TABLE, l'attribut dir affecte également la direction du texte à l'intérieur de chaque celule (du fait de l'héritage de la directionnalité des éléments de niveau "bloc").
Pour spécifier la directionnalité d'une table de droite à gauche, définissez l'attribut dir comme suit :
<TABLE dir="RTL"> ...le reste de la table... </TABLE>
La direction du texte dans les cellules individuelles pourra être commutée en définissant l'attribut dir dans l'élément qui définit la cellule. Consultez la section traitant du texte bidirectionnel pour plus d'informations sur ces problèmes de direction d'écriture de texte.
<!ELEMENT CAPTION - - (%inline;)+> <!ENTITY % CAlign "(top|bottom|left|right)"> <!ATTLIST CAPTION -- table caption -- %attrs; -- %coreattrs, %i18n, %events -- align %CAlign; #IMPLIED -- relative to table -- >
Balise de début : requise, Balise de fin : requise
Définition des attributs
Attributs définis par ailleurs
Lorsque présent, le texte de l'élément CAPTION décrira usuellement la nature du tableau. L'élément CAPTION doit venir immédiatement après la balise de début de l'élément TABLE.
Par exemple,
<TABLE cols="3"> <CAPTION>Tasses de café consommées par chaque parlementaire</CAPTION> ...le reste de la table... </TABLE>
<!ELEMENT THEAD - O (TR+)> <!ELEMENT TFOOT - O (TR+)>
Balise de début : requise, Balise de fin : optionelle
<!ELEMENT TBODY O O (TR+)>
Balise de début : optionnelle, Balise de fin : optionnelle
<!ATTLIST (THEAD|TBODY|TFOOT) -- table section -- %attrs; -- %coreattrs, %i18n, %events -- %cellhalign; -- alignement horizontal dans les cellules -- %cellvalign; -- alignement vertical dans les cellules -- >
Attributs définis par ailleurs
Un tableau doit contenir au moins un groupe de lignes. Chaque groupe de lignes est divisé en trois parties : en-tête, corps, et piétement. Les en-têtes et piétements de tableaux sont optionnels. L'élément THEAD définit l'en-tête, l'élément TFOOT définit le piétement, et l'élément TBODY définit le corp de tableau.
Lorsqu'il existe, chacun des instances d'éléments THEAD, TFOOT, et TBODY DOIT contenir au moins une ligne (voir TR).
L'exemple suivant illustre l'ordre et la structure des en-têtes, pieds et corps de tableaux.
<TABLE>
<THEAD>
<TR> ...information d'en-tête...
</THEAD>
<TFOOT>
<TR> ...information de piétement...
</TFOOT>
<TBODY>
<TR> ...première ligne du premier bloc de données...
<TR> ...deuxième ligne du premier bloc de données...
</TBODY>
<TBODY>
<TR> ...première ligne du deuxième bloc de données...
<TR> ...deuxième ligne du deuxième bloc de données...
<TR> ...troisième ligne du deuxième bloc de données...
</TBODY>
</TABLE>
La déclaration TFOOT DOIT apparaître avant TBODY dans une définition de TABLE de sorte queles agents utilisateurs puissent afficher le piétement de tableau avant d'avoir effectivement reçu toutes les (potentiellement nombreuses) lignes de données.
Les interpréteurs des agents utilisateurs conformes doivent se conformer à ces règles pour des raisons de compatibilité ascendante.
La définition du tableau de l'exemple précédent pourrait être raccourcie en enlevant certaines balises de fin.
<TABLE>
<THEAD>
<TR> ...en-tête...
<TFOOT>
<TR> ...piétement...
<TBODY>
<TR> ...première ligne du premier bloc...
<TR> ...seconde ligne du premier bloc...
<TBODY>
<TR> ...première ligne du deuxième bloc...
<TR> ...deuxième ligne du deuxième bloc...
<TR> ...troisième ligne du deuxième bloc...
</TABLE>
<!ELEMENT COLGROUP - O (col*)> <!ATTLIST COLGROUP %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- nombre de colonnes par défaut dans le groupe -- width CDATA #IMPLIED -- largeur par défaut des COL internes -- %cellhalign; -- alignement horizontal dans les cellules -- %cellvalign; -- alignement vertical dans les cellules -- >
Balise de début : requise, Balise de fin : optionnelle
Définition des attributs
Attributs définis par ailleurs
Un tableau doit contenir au moins un groupe de colonnes. En l'absence de toute définition de groupe de colonne, on considérera qu'il existe implicitement un groupe de colonnes incluant toutes les colonnes du tableau. L'élément COLGROUP crée explicitement un groupe de colonnes.
L'attribut width de l'élément COLGROUP spécifie une largeur par défaut pour toutes les colonnes du groupe de colonnes. La valeur spéciale "0*" indique aux agents utilisateurs d'utiliser pour chaque colonne sa taille minimale quilui permet d'afficher le contenu de la cellule la plus large. Ce comportement pourra être contrarié par la présence d'un élément COL.
Le tableau de l'exemple qui suit contient deux groupes de colonnes. Le premier groupe de colonnes contient 10 colonnes et le second 5. La largeur par défaut de chacune des colonnes du premier groupe vaut 50 pixels. La largeur des colonnes du second groupe est la largeur minimale utile pour l'affichage des colonnes.
<TABLE> <COLGROUP span="10" width="50"> <COLGROUP span="5" width="0*"> <THEAD> <TR> ... </TABLE>
<!ELEMENT COL - O EMPTY> <!ATTLIST COL -- groupe de colonnes et propriétés -- %attrs; -- %coreattrs, %i18n, %events -- span NUMBER 1 -- nombre de colonnes sur lequel le groupe s'étend -- width CDATA #IMPLIED -- spécification de largeur de colonne -- %cellhalign; -- alignement horizontal des cellules -- %cellvalign; -- alignement vertical des cellules -- >
Balise de début : requise, Balise de fin : interdite
Définition des attributs
Attributs définis par ailleurs
Chaque groupe de colonnes défini par une déclaration COLGROUP peut contenir un certain nombre d'éléments COL. Un élément COL ne définit pas un groupe de colonne de la même façon que l'élément COLGROUP; Il s'agit implement de la façon dont des attributs peuvent être partagés par plusieurs colonnes dans un grouped e colonnes. Notez que les éléments COL sont vides ; ils ne servent qu'à réunir des paramètres.
L'attribut span de l'élément COL a la signification suivante :
Comme pour l'élément COLGROUP, l'attribut width de l'élément COL affecte la largeur de toutes les colonnes rassemblées par l'élément. Si un élément COL affecte plusieurs colonnes, alors son attribut width définit la largeur de chacune des colonnes du regroupement, et non la largeur du groupe de colonnes pris comme un tout.
Le tableau du prochain exemple contient deux groupes de colonnes. Le premier contient trois colonnes, le second ne contient que deux colonnes. L'espace horizontal disponible sera découpé comme suit : L'agent utilisateur réservera 30 pixels à la première colonne. Puis, l'espace minimal nécessaire à la seconde colonne est calculé puis réservé. L'espace horizontal restant sera divisé en six portions égales. Deux de ces portions sont attribuées à la colonne trois, une à la colonne quatre, et enfin trois à la colonne cinq.
<TABLE> <COLGROUP> <COL width="30"> <COL width="0*"> <COL width="2*"> <COLGROUP align="center"> <COL width="1*"> <COL width="3*" align="char" char=":"> <THEAD> <TR> ... </TABLE>
Nous avons défini la valeur de l'attribut align du second groupe de colonnes à "center". Toutes les cellules de toutes les colonnes de ce groupe hériteront de cette valeur, maisz peuvent la surcharger. Le COL final procède à un alignement, en spécifiant que toutes les cellules des colonnes qu'il concerne seront alignées sur le caractère ":".
<!ELEMENT TR - O (TH|TD)+> <!ATTLIST TR -- ligne de tableau -- %attrs; -- %coreattrs, %i18n, %events -- %cellhalign; -- alignement horizontal des cellules -- %cellvalign; -- alignement vertical des cellules -- bgcolor %Color #IMPLIED -- couleur de fond de la ligne -- >
Balise de début : requise, Balise de fin : optionnelle
Attributs définis par ailleurs
L'élément TR agit comme un container accueillant des cellules d'une ligne d'un tableau.
L'échantillon de tableau ci-dessous contient trois lignes, chacune commençant par un élément TR :
<TABLE> <CAPTION>Tasses de café par parlementaire</CAPTION> <TR> ...Une ligne de données... <TR> ...Deuxième ligne de données... <TR> ...Troisième ligne de données... ...le reste du tableau... </TABLE>
<!ELEMENT (TH|TD) - O %block> <!ATTLIST (TH|TD) -- Titre de ligne ou cellule de données -- %attrs; -- %coreattrs, %i18n, %events -- axis CDATA #IMPLIED -- le contenu de la cellule, par défaut -- axes CDATA #IMPLIED -- liste des noms de l'axe -- nowrap (nowrap) #IMPLIED -- interdit le retour automatique de ligne -- bgcolor %Color #IMPLIED -- couleur de fond de la cellule -- rowspan NUMBER 1 -- nombre de lignes sur lequel s'étend la cellule -- colspan NUMBER 1 -- nombre de colonnes sur lequel s'étend la cellule -- %cellhalign; -- alignement horizontal des cellules -- %cellvalign; -- alignement vertical des cellules -- >
Balise de début : requise, Balise de fin : optionnelle
Définition des attributs
Attributs définis par ailleurs
Les éléments TH contiennent les en-têtes de colonnes (ou de ligne), tandis que les éléments TD définissent des cellules de données. Cette distinction permet aux agents utilisateurs de représenter différemment les en-têtes et les cellules de données, même en l'absence de feuilles de style.
Les cellules peuvent être vides (c-à-d, ne contenir aucune données).
Le tableau suivant contient quatre colonnes de données, chacune chapeautée par un titre de colonne.
<TABLE> <CAPTION>Tasses de café par parlementaire</CAPTION> <TR> <TH>Nom <TH>Tasses <TH>Type de Café <TH>Sucre? <TR> <TD> Jean-Paul Ixe<TD>10 <TD>Expresso <TD>Non <TR> <TD>Michèle Ygreque <TD>5 <TD>Décaféïné <TD>Oui ...reste du tableau... </TABLE>
Votre agent utilisateur affichera le début du tableau comme suit :
| Nom | Tasses | Type de Café | Sucre? |
|---|---|---|---|
| Jean-Paul Ixe | 10 | Expresso | Non |
| Michèle Ygreque | 5 | Décaféïné | Oui |
Pour aider à la distinction entre les "cases" du tableau, il sera possible de définir l'attribut border de l'élément TABLE :
<TABLE border="border"> ...reste du tableau... </TABLE>
Avec une bordure, votre agent utilisateur affichera le début du tableau de la manière suivante :
| Nom | Tasses | Type de Café | Sucre? |
|---|---|---|---|
| Jean-Paul Ixe | 10 | Expresso | Non |
| Michèle Ygreque | 5 | Décaféïné | Oui |
Les attributs axis et axes procurent une façon de référencer des cellules en définissant des "étiquettes".
Les agents utilisateurs vocaux pourront utiliser ces étiquettes pour identifier le contenu et la position d'une cellule dans un tableau. Les programmes de traitement pourront trouver dans ces étiquettes les noms de champs de base de données pour un transfert entre le document et la base ou vice-versa.
Dans l'exemple de tableau suivant, la valeur de l'attribut axis a été défini comme étant le nom de famille de chaque sénateur. La cellule est aussi étiquetée comme appartenant à la colonne des "Noms" column.
<TABLE border="border"> <CAPTION>Tasses de thé par sénator</CAPTION> <TR> <TH>Noms <TH>Tasses <TH>Type de Thé <TH>Sucre? <TR> <TD axis="Jie" axes="Noms">T. Jie <TD>10 <TD>Tilleul <TD>4 <TR> <TD axis="Kha" axes="Noms">J. Kha <TD>5 <TD>Daarjeling <TD>6 </TABLE>
Les cellules peuvent s'étaler sur plusieurs lignes et/ou colonnes. Le nombre de ligne ou colonnes "consommées" par une cellule sont définis par les attributs rowspan et colspan, et ce pour les deux éléments TH ou TD.
Dans la définition de table qui suit, la cellule de la quatrième ligne, deuxième colonne est prévue pour s'étaler sur trois colonnes, y compris la colonne courante.
<TABLE border="border"> <CAPTION>Tasses de thé par sénateur</CAPTION> <TR> <TH>Noms <TH>Tasses <TH>Type de thé <TH>Sucre? <TR> <TD>T. Jie <TD>10 <TD>Tilleul <TD>4 <TR> <TD>J. Kha <TD>5 <TD>Daarjeling <TD>6 <TR> <TD>A. Elle <TD colspan="3"><em>inconnu</em> </TABLE>
Cette table devrait être affichée ainsi par un agent utilisateur :
Tasses de thé par sénateur
--------------------------------------
| Noms |Tasses|Type de Thé |Sucre?|
--------------------------------------
|T. Jie |10 |Tilleul |4 |
--------------------------------------
|J. Kha |5 |Daarjeling |6 |
--------------------------------------
|A. Elle |inconnu |
--------------------------------------
Votre agent utilisateur affiche ce tableau comme suit :
| Noms | Tasses | Type de thé | Sucre? |
|---|---|---|---|
| T. Jie | 10 | Tilleul | 4 |
| J. Kha | 5 | Daarjeling | 6 |
| A. Elle | inconnu | ||
L'exemple suivant illustre comment des définitions qui étendent des cellules sur plusieurs plsueirus lignes ou colonnes affectent la définition des cellules suivantes. Considérez la définition de tableau suivante :
<TABLE border="border"> <TR><TD>1 <TD rowspan="2">2 <TD>3 <TR><TD>4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE>
Ce tableau devrait être affiché à peu près comme ça :
------------- | 1 | 2 | 3 | ----| |---- | 4 | | 6 | ----|---|---- | 7 | 8 | 9 | -------------
Du fait que la cellule marquée "2" s'étend sur deux lignes, elle affecte la position des cellules définies dans la deuxième ligne. Notez qu'en l'absence d'une définition effective de la cellule "6", les agents utilisateurs ajouteraient une cellule vide à sa place pour terminer la ligne.
De même, dans la définition de table suivante :
<TABLE border="border"> <TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9 </TABLE>
la cellule "4" prend deux colonnes, et la cellule "6" attérit en colonne trois.
------------- | 1 | 2 | 3 | --------|---- | 4 | 6 | --------|---- | 7 | 8 | 9 | -------------
L'exemple suivant illustre comment l'on pourrait créer des cellules superposées. Dans cette table, la cellule "5" s'étale sur deux lignes et la "7" sur deux colonnes, et il y aura recouvrement entre les cellules "7" et "9" :
<TABLE border="border"> <TR><TD>1 <TD>2 <TD>3 <TR><TD>4 <TD rowspan="2">5 <TD>6 <TR><TD colspan="2">7 <TD>9 </TABLE>
Ce tableau devrait être affiché ainsi, pour tenir compte du recouvrement :
------------- | 1 | 2 | 3 | ------------- | 4 | 5 | 6 | ----|...|---- | 7 : | 9 | -------------
Le résultat de cellules superposées est indéfini. Il peut varier d'un agent utilisateur à l'autre.
| NdA. Actuellemnt, et une fois les tests effectués, il apparaît que Internet Explorer 3.0 ne gère pas du tout la superposition. Netscape en version 3.2 réalise effectivement ue superposition correcte lors du réaffuchage d'un document précédemment chargé (redimentionnement de fenêtre ou démasquage). Au moment du chargement par contre, si l'on essaie de surimprimer du texte sur une image pour réaliser une mise en page de type "infographie", le texte apparaît masqué par l'image, même s'il est spécifié qu'elle soit chargée avant (la balise IMG précéde la déclaration de la cellule contenant le texte à surimprimer). En effet, le temps de chargement en mémoire de l'image est plus long que celui du dessin du texte, et si l'affichage de l'image commence effectivement AVANT la pose du texte, il termine bien après, en ayant recouvert le texte). |
La section qui suit décrit les attributs de tableaux HTML qui fournissent aux agents utilisateurs les informations leur permettant de mettre en forme visuellement le tableau. Les feuilles de style constitueront souvent une solution bien meilleure pour définir ce format. Au moment où cette spécification paraît, la [CSS1] ne fournit pas encore un mécanisme permettant le contrôle de TOUS les aspects visuels des tableaux.
Cette version de HTML inclue des mécanismes contrôlant :
Les attributs qui suivent peuventêtre définis pour les éléments constituant un tableau (se reporter à leurs définitions respectives).
<!-- attributs d'alignement horizontal du contenu de cellule --> <!ENTITY % cellhalign "align (left|center|right|justify|char) #IMPLIED char CDATA #IMPLIED -- alignment char, e.g. char=':' -- charoff CDATA #IMPLIED -- offset for alignment char --" > <!-- attributs d'alignement vertical du contenu de cellule --> <!ENTITY % cellvalign "valign (top|middle|bottom|baseline) #IMPLIED" >
Définition des attributs
| NdA. A noter que le mode Justify n'est pas reconnu par Netscape Navigator 3.x |
Lorsque charoff est utilisé pour définir le décalage relativement à un caractère d'alignement, la direction du décalage est déterminée par la direction d'écriture de texte courante (voir l'attribut dir). Dans les textes de gauche à droite (par défaut), ce décalage est naturellement compté par rapport à la marge gauche. Pour les textes de droite à gauche, il le sera à partir de la marge de droite.
Le tableau de l'exemple suivant aligne une rangée de valeurs monétaires sur la virgule décimale. Nous avaons ici explicitement défini cette virgule d'alignement comme étant ",".
<TABLE border="border"> <COLGROUP> <COL><COL align="char" char=","> <THEAD> <TR><TH>Légumes <TH>Prix au kilo <TBODY> <TR><TD>Laitue <TD>4 F. <TR><TD>Carottes primeur <TD>9,50 F. <TR><TD>Pommes Golden <TD>14,45 F. </TABLE>
Le tableau mis en forme devrait ressembler à ceci :
------------------------------- | Légumes |Prix au kilo| |----------------|------------| |Laitue | 4 F.| |----------------|------------| |Carottes primeur| 9,50 F.| |----------------|------------| |Pommes Golden | 14,45 F.| ------------------------------
L'alignement du contenu des cellules peut être spécifié cellule par cellule, ou bien hérité d'éléments "englobants", tels qu'une ligne, ou une colonne du tableau lui-même.
L'ordre de priorité (de la plus grande à la plus faible) pour les attributs align, char, et charoff est le suivant :
L'ordre de priorité (de la plus grande à la plus faible) pour les attributs valign (ainsi que celui des autres attributs hérités lang, dir, et style) est le suivant :
De plus, lors de l'affichage des cellules, l'alignement horizontal est déterminé en priorité par rapport aux colonnes plutôt qu'aux lignes, tandis que l'alignement vertical tient compte en priorité des lignes avant de prendre en considération les colonnes.
L'alignement par défaut des cellules dépend de l'agent utilisateur. Cependant, ces derniers devront substituer les valeurs par défaut en fonction de la directionnalité (c'est-à-dire., ne pas simplement induire un "left" dans toutes les cases).
Les agents utilisateurs qui ne supportent pas la valeur "justify" de l'attribut align pourront employer à la place la valeur "left".
Les attributs suivants affectent le cadre externe du tableau et les gouttières intérieures.
Définition des attributs
Dans le tableau suivant, des bordures de cinq pixels de large seront affichées à droite et à gauche du tableau et des gouttières seront présentes entre toutes les colonnes.
<TABLE border="5" frame="vsides" rules="cols"> <TR> <TD>1 <TD>2 <TD>3 <TR> <TD>4 <TD>5 <TD>6 <TR> <TD>7 <TD>8 <TD>9 </TABLE>
Les réglages suivants devront être compris par les agents utilisateurs pour des raisons de compatibilité ascendante.
Ainsi, par exemple:
<FRAME border="2"> <=> <FRAME border="2" frame="border" rules="all">
and
<FRAME border> <=> <FRAME frame="border" rules="all">
Note : L'attribut border définit aussi le comportement en termes de bordure des éléments OBJECT et IMG, bien qu'il accepte alors d'autres valeurs.
Deux attributs contrôlent l'espacement entre les cellules et la marge intérieure de celles-ci.
Définition des attributs
Dans le tableau qui suit, l'attribut cellspacing spécifie que les cellules seront séparées les unes des autres, et du cadre extérieur de 20 pixels. L'attribut cellpadding spécifie que la marge haute et la marge basse valent toutes deux 10% de la hauteur totale de la cellule (soit 20% d'espace vertical vide à elles deux). De même, les marges gauche et droite valent aussi 10% de la largeur de la cellule (soit 20% d'espace horizontal vide à elles deux).
<TABLE> <TR cellspacing="20"> <TD>Data1 <TD cellpadding="20%">Data2 <TD>Data3 </TABLE>
Si un tableau ou une colonne donnée a une largeur fixe, cellspacing et que l'attribut cellpadding spécifie un espace plus grand que celui alloué, il est conseillé aux agents utilisateurs de préférer ces attributs avant l'attribut width lorsque conflit il y a, mais il ne s'agit nullement d'une obligation.
Le tableau suivant illustre l'interaction de tous les éléments de tableaux.
Soit en "ascii art", le tableau suivant :
<TABLE border="border">
<CAPTION>Tableau test avec cellules jointes</CAPTION>
<TR><TH rowspan=2><TH colspan="2">Moyenne
<TH rowspan="2">Autres<BR>catégories<TH>Div
<TR><TH>taille<TH>poids
<TR><TH align="left">hommes<TD>1.9<TD>0.003
<TR><TH align="left" rowspan="2">femmes<TD>1.7<TD>0.002
</TABLE>
serait affiché peu ou prou ainsi :
Tableau test avec cellules jointes
/--------------------------------------------------\
| | Moyenne | Autres | Div |
| |-------------------|catégories|--------|
| | taille | poids | | |
|-----------------------------------------|--------|
| hommes | 1.9 | 0.003 | | |
|-----------------------------------------|--------|
| femmes | 1.7 | 0.002 | | |
\--------------------------------------------------/
Sur votre agent utilisateur, ce tableau s'affiche ainsi :
| Moyenne | Autres catégories | Div | ||
|---|---|---|---|---|
| taille | poids | |||
| males | 1.9 | 0.003 | ||
| femmes | 1.7 | 0.002 | ||
Cet exemple illustre des lignes et colonnes groupées. Cet exemple est adapté du "Developing International Software", de Nadine Kano.
En "ascii art", le tableau suivant :
<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/IEC-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>
qui apparaîtrait peu ou prou ainsi :
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 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
===============================================================================
Sur votre agent utilisateur, elle est affichée ainsi :
| Code-Page ID | Name | ACP | OEMCP | Windows NT 3.1 | Windows NT 3.51 | Windows 95 |
|---|---|---|---|---|---|---|
| 1200 | Unicode (BMP of ISO/IEC-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 |
Cet exemple illuste bien comment il est possible d'utiliser des COLGROUP pour grouper des colonnes et définir un alignement de colonne par défaut. De même, les éléments TBODY permettront de grouper des lignes. Les attributs frame et rules indiqueront auxc agents utilisateurs quelles bordures et gouttières afficher.
| NdA. Cet exemple illustre aussi parfaitement le problème de la compatibilité entre produits qui, s'ils sont leaders du marché, n'en sont pas moins pas complètement "conformes". On identifiera rapidement les forces et lacunes de chacun. |