HTML 4 : Tableaux

Attributs de TABLE

attribut rôle
border="x" épaisseur du cadre (par défaut 1)
bgcolor=couleur couleur des cellules
frame cadre du tableau
rules lignes de séparation dans le tableau
height taille en hauteur
width="80%" taille en pourcentage par rapport à la largeur de la fenêtre
align left, right, center
cellpadding="y" espace situé entre les bordures du tableau et le contenu des cellules
cellspacing="y" taille de la bordure entre les cellules
summary résumé du tableau pour les navigateurs non graphiques

NB : l'attribut align est déclassé au profit des feuilles de style.

Attributs cellpadding et cellspacing

aucun attribut cellpadding="15" cellspacing="15"
cellule 1 cellule 2
cellule 3 cellule 4
cellule 1 cellule 2
cellule 3 cellule 4
cellule 1 cellule 2
cellule 3 cellule 4

Valeurs pour l'attribut frame

Uniquement en HTML 4.0, les anciennes versions des navigateurs ne connaissent pas cet attribut.

Exemples :
illustration frame a void illustration frame a above illustration frame a below illustration frame a hsides illustration frame a lhs illustration frame a rhs illustration frame a vsides illustration frame a border

NB : <TABLE frame="border" border="5"> de HTML 4.0 a pour équivalent : <TABLE border="5"> (dans les exemples ci-dessous nous donnons la syntaxe en HTML 4.0 mais il vaut mieux pour conserver la compatibilité avec les anciens navigateurs utiliser border pour indiquer qu'il faut dessiner le cadre et border=n pour donner une épaisseur de n pixels au cadre, i.e. utiliser <TABLE border="1"> à la place des <TABLE frame="border" border="1">).

Valeurs pour l'attribut rules

Uniquement en HTML 4.0, les anciennes versions des navigateurs ne connaissent pas cet attribut.

Exemples :
illustration rules a alls illustration rules a none illustration rules a cols illustration rules a rows

Une cellule

Syntaxe : <TD> contenu de la cellule </TD>
Table Data

Attributs de TD

align="letf / center / right / justify / char"alignement horizontal
valign="top / bottom / middle / baseline" alignement vertical,
width="x" largeur de la cellule,
height="y" hauteur de la cellule,
colspan="x" définit une cellule dont la largeur est x fois celle de la colonne de base (fusion des x colonnes adjacentes),
rowspan="y" définit une cellule dont la hauteur est y fois celle de la ligne (fusion des y lignes adjacentes),
bgcolor="couleur" définit la couleur de fond,
background="url" image de fond.
nowrap force le navigateur à écrire le texte de la cellule sans saut de ligne
abbr="texte" contenu abrégé de la cellule
axis="texte"attribue une catégorie à la cellule (par exemple <TD axis="lieu">Marseille</TD>
headers=ref référence des cellules de l'en-tête qui fournissent une information d'en-tête pour la cellule courante

Tableau HTML
Voici un tableau avec une seule cellule grise.
<TABLE border="1">
  <TD bgcolor="#CCCCCC">
  Voici un tableau avec une seule 
  cellule grise.
  </TD>
</TABLE>

Une ligne de cellules

Tableau HTML
cellule 1 cellule 2
<TABLE border="1" >
  <TD> cellule 1 </TD>
  <TD> cellule 2 </TD>
</TABLE>

Plusieurs lignes

Syntaxe : <TR> ... </TR>
Table Row

Attributs de TR

valign = "top / bottom / baseline / middle"alignement vertical
align = "right / center / left "alignement horizontal
bgcolor="couleur"couleur de fond de la cellule

Les attributs sont appliqués pour toutes les cellules de la ligne sauf si un attribut de <TD> donne un autre ordre.

Tableau HTML
cellule 1.1 cellule 1.2
cellule 2.1 cellule 2.2
 <TABLE frame="border" cellpadding="2">
  <TR>
   <TD> cellule 1.1 </TD>
   <TD> cellule 1.2 </TD>
  </TR>
  <TR>
   <TD> cellule 2.1 </TD>
   <TD> cellule 2.2 </TD>
  </TR>
 </TABLE>

Cellule en-tête

Utiliser <TH> (Table Header) à la place de <TD>, les attributs sont les mêmes que ceux de TD.

Tableau HTML
titre 1 titre 2
contenu 1 contenu 2
<TABLE frame="border" cellpadding="2">
  <TR>
   <TH align="center"> titre 1</TH>
   <TH align="center"> titre 2 </TH>
  </TR>
  <TR>
   <TD> contenu 1</TD>
   <TD> contenu 2</TD>
  </TR>
</TABLE>

Tableaux complexes

Légende

Regroupement de cellules en lignes ou colonnes

Tableau HTML
titre
Script Exécution
CGI par le serveur
javascript client
<TABLE frame="border" cellpadding="2">
<CAPTION align="bottom">
titre
</CAPTION>
<TR>
  <TH align="left">Script</TH> 
  <TH align="left" colspan="2">
        Ex&eacute;cution</TH>
</TR>
<TR>
  <TD>CGI</TD> 
  <TD rowspan="2">par le</TD> 
  <TD>serveur</TD> 
</TR>
<TR>
  <TD>javascript</TD> 
  <TD>client</TD>
</TR>
</TABLE>

Nouveaux éléments (HTML 4.0) de groupement dans les tableaux

groupement sémantique de lignes

Le groupement peut permettre aux navigateurs de laisser afficher l'en-tête du tableau quand on fait défiler la page parce que le tableau est trop long, il permet également d'aider les navigateurs non graphiques à interpréter le tableau. Des styles peuvent être attribués aux différentes parties par l'intermédiaire des attributs align, valign et style (que nous détaillerons dans le cours sur les feuilles de style).

Structure :

<TABLE>
    <THEAD>
        <TR>...</TR>
        ...
        <TR>...</TR>
    </THEAD>
    <TBODY>
        <TR>...</TR>
        ...
        <TR>...</TR>
    </TBODY>
    <TFOOT>
        <TR>...</TR>
        ...
        <TR>...</TR>
    </TFOOT>
</TABLE>	

Exemple :
illustration des regroupements de lignes

<TABLE border="5" width="70%">
    <THEAD align="right" style="font-family:monaco; color:blue">
    <TR>
        <TD>en tete 1.1</TD>
        <TD>en tete 1.2</TD>
        <TD>en tete 1.3</TD>
    </TR>
    </THEAD>
    <TBODY align="center" style="font-family:courier">
    <TR>
        <TD>corps 1.1</TD>
        <TD>corps 1.2</TD>
        <TD>corps 1.3</TD>
    </TR>
    <TR>
        <TD>corps 2.1</TD>
        <TD>corps 2.2</TD>
        <TD>corps 2.3</TD>
    </TR>
    </TBODY>
    <TFOOT align="left" style="font-style:italic; color:red">
    <TR>
        <TD>pied 1.1</TD>
        <TD>pied 1.2</TD>
        <TD>pied 1.3</TD>
    </TR>
    </TFOOT>
</TABLE>

Lorsqu'il n'y a pas d'en-tête ni de pied de tableau TBODY est optionnel.

Groupement d'attributs pour des colonnes

Pour regrouper des attributs de style (align, valign, style), de taille (width, height) pour plusieurs colonnes (le nombre est donné par span).

COLGROUP

syntaxe : <COLGROUP width="t" valign="a" align="a" span="n">

<COLGROUP width="75px" align=left span="3"> 
<COLGROUP width="50px" align="right" span="3">
<COLGROUP width="100%" align="char" char="." span="3"> 

donne 75 pixels de large aux trois premières colonnes et les cadre à gauche, donne 50 pixels de large aux trois colonnes suivantes et les cadre à droite, et laisse le reste de l'écran à la dernière colonne qui cadre les caractères sur le point décimal.

COL

Les éléments COLGROUP peuvent contenir des éléments COL.

Exemple :

<TABLE border="5"  bgcolor="#FFCCCC" width="50%>
    <COLGROUP style="font-weight:bold" align="left">
        <COL span="3">
        <COL span="2" style="color:red" align="center">
        <COL span="3" style="color:blue">
    </COLGROUP>
    <TR>
        <TD>1.1</TD>
        <TD>1.2</TD>
        ...
    </TR>
    ...
</TABLE>

illustration de colgroup et col