En HTML, la balise TABLE a deux utilisations distinctes :

• afficher des données organisées en tableau ;
• subdiviser la page en lignes et colonnes pour y placer, aux endroits voulus, des blocs de texte ou des images.

Cette deuxième fonction est désormais concurrencée par l’utilisation de calques (DIV) et de styles, qui seront décrits à la page suivante. Cependant, le tableau dépourvu de quadrillage reste un moyen simple et très utilisé de placement des différents composants d'une page.

<TABLE> … </TABLE>		1 2 3 4 crée un tableau sans quadrillage.
La disposition du quadrillage autour des cellules est paramétrée par les attributs : border=# rules=NONE, ALL, COLS, ROWS (ou GROUPS qui sera utilisé pour les regroupements de lignes ou de colonnes) frame=VOID, BOX, ABOVE, BELOW, LHS, RHS, HSIDES ou VSIDES ainsi que cellspacing=# qui fixe l’espace entre les cases (par défaut, 2 pixels). Choisissez le paramétrage, puis cliquez sur le bouton "Envoyer" pour tester les diverses combinaisons : border= 0 1 2 3 4 rules= ALL NONE COLS ROWS frame= BOX VOID ABOVE BELOW LHS (Left Hand Side) RHS (Right Hand Side) HSIDES VSIDES Lorsqu’aucun de ces trois attributs n’est précisé (ou border=0), le défaut est border=0 rules=NONE frame=VOID. Lorque seul l’attribut border est défini, avec une valeur supérieure à 0, le défaut est border=# rules=ALL frame=BOX. Le rendu peut varier d’un navigateur à l’autre.
<TABLE width="100%"> … </TABLE>		crée un tableau, qui s’étend sur toute la largeur de la page (par défaut, le tableau est limité à ce qui est nécessaire pour afficher son contenu).
<TABLE border=9> … </TABLE>		quadrillage de 9 pixels d’épaisseur (2 par défaut) (remarquez l’effet de relief)
<TABLE … style="border-color:red"> … </TABLE>		quadrillage rouge de 9 pixels d’épaisseur
<TABLE … bgcolor="green"> … </TABLE>		fond vert, quadrillage rouge de 9 pixels d’épaisseur
<TABLE … cellspacing=7> … </TABLE>		cellspacing (par défaut, 2 pixels) définit l’espace entre les cases.
<TABLE border=1 cellspacing=0 cellpadding=0> … </TABLE>		1 2 3 4 cellpadding (par défaut, 2 pixels) définit l’espace entre le texte et le bord d’une case.
<TABLE> <TR> … </TR> </TABLE>		Chaque ligne du tableau est définie par une balise TR (Table Row).
<TABLE> <TR> <TD> [contenu de la case] </TD> … </TR> </TABLE>		Chaque case d’une ligne est définie par une balise TD (Table Data). La variante TH (Table Header) est utilisée à la place de TD pour un entête, que les navigateurs rendent généralement en gras.
<TABLE> <TR><TD bgcolor="lime"> 1 </TD> … </TR> </TABLE>		1 2 3 4 définit une couleur de fond pour cette case.
<TD align=LEFT>		alignement du texte à gauche dans la case (le défaut)
<TD align=CENTER>		texte centré dans la case
<TD align=RIGHT>		alignement du texte à droite dans la case
<TD valign=MIDDLE>		texte centré verticalement dans la case (le défaut)
<TD valign=TOP>		texte placé à partir du haut de la case
<TD valign=BOTTOM>		texte affiché au bas de la case
<TD width="30%">		demande au navigateur[1] d’attribuer une largeur de 30% de la largeur totale du tableau (doit être compatible avec les autres colonnes). Cet attribut peut prendre aussi des valeurs absolues, en nombre de pixels.
<TH>		Table Header - variante de la balise TD pour indiquer au navigateur que le contenu de la case doit être mis en évidence, habituellement en caractères gras.
Propagation de propriétés à une ligne : La plupart des attributs de la balise TD peuvent s’appliquer à la balise TR, et affecter ainsi toutes les cases de la rangée, sans qu’il soit nécessaire de les répéter pour chaque case.
Propagation de propriétés à une colonne :
<COL …>		définit des attributs communs à toutes les cases d’une colonne. Les balises COL se placent entre la balise TABLE et les balises de description de lignes : TR, THEAD, etc. Cette balise ne se referme pas.
<TABLE> <COL> <COL style="background-color: lime"> <TR><TD> 1 </TD> … </TR> </TABLE>		1 2 3 4
<CAPTION>Titre</CAPTION>		Inscrit un titre au-dessus du tableau. Cette balise, si elle est présente, doit apparaître immédiatement après la balise TABLE.
Exemple : <TABLE border> <CAPTION>Liste des départements</CAPTION> <TR><TH>Département</TH><TH>Code</TH></TR> <TR><TD>Ain</TD><TD>01</TD></TR> <TR><TD align=CENTER>Aisne</TD> <TD>02</TD></TR> <TR><TD align=RIGHT>Allier</TD><TD>03</TD></TR> <TR><TD>Alpes de Haute-Provence</TD><TD>04</TD></TR> </TABLE> Produit : Liste des départements Département Code Ain 01 Aisne 02 Allier 03 Alpes de Haute-Provence 04
Regroupement de lignes :
<TABLE border rules=GROUPS frame=BOX>		rules=GROUPS indique que le quadrillage s’effectue d’après les groupes de données.
<THEAD> <TR> … </THEAD>		indique la (ou les) ligne(s) de l'entête du tableau
<TFOOT> <TR> … </TFOOT>		indique la (ou les) ligne(s) du pied du tableau (doit précéder la ou les balises TBODY)
<TBODY> <TR> … </TBODY>		indique les groupes de lignes
Exemple : <TABLE border=2 rules=GROUPS frame=BOX> <CAPTION>Formes du pronom possessif</CAPTION> <THEAD> <TR><TD rowspan=2></TD><TD colspan=2>Singulier</TD><TD colspan=2>Pluriel</TD></TR> <TR><TD>Masculin</TD><TD>Féminin</TD> <TD>Masculin</TD><TD>Féminin</TD></TR> </THEAD> <TBODY> <TR><TD rowspan=3>Un seul possesseur</TD> <TH>le mien</TH><TH>la mienne</TH> <TH>les miens</TH><TH>les miennes</TH></TR> <TR><TH>le tien</TH><TH>la tienne</TH> <TH>les tiens</TH><TH>les tiennes</TH></TR> <TR><TH>le sien</TH><TH>la sienne</TH> <TH>les siens</TH><TH>les siennes</TH></TR> </TBODY> <TBODY> <TR><TD rowspan=3>Plusieurs possesseurs </TD><TH>le nôtre</TH><TH>la nôtre</TH><TH colspan=2>les nôtres</TH></TR> <TR><TH>le vôtre</TH><TH>la vôtre</TH><TH colspan=2>les vôtres</TH></TR> <TR><TH>le leur</TH><TH>la leur</TH><TH colspan=2>les leurs</TH></TR> </TBODY> </TABLE> Produit : Formes du pronom possessif Singulier Pluriel Masculin Féminin Masculin Féminin Un seul possesseur le mien la mienne les miens les miennes le tien la tienne les tiens les tiennes le sien la sienne les siens les siennes Plusieurs possesseurs le nôtre la nôtre les nôtres le vôtre la vôtre les vôtres le leur la leur les leurs
Regroupement de colonnes :
<COLGROUP …></COLGROUP>		définit les colonnes à regrouper, ou des attributs communs aux groupes de colonnes. Les balises COLGROUP se placent entre la balise TABLE et les balises de description de lignes : TR, THEAD, etc. À la différence de la balise COL, chaque balise COLGROUP requiert une balise de fermeture </COLGROUP>.
Exemple : <TABLE border=2 rules=GROUPS frame=BOX> <CAPTION>Formes du pronom possessif</CAPTION> <COLGROUP style="background-color:aqua"></COLGROUP> <COLGROUP span=2></COLGROUP> <COLGROUP span=2></COLGROUP> <THEAD> etc. Produit : Formes du pronom possessif Singulier Pluriel Masculin Féminin Masculin Féminin Un seul possesseur le mien la mienne les miens les miennes le tien la tienne les tiens les tiennes le sien la sienne les siens les siennes Plusieurs possesseurs le nôtre la nôtre les nôtres le vôtre la vôtre les vôtres le leur la leur les leurs
Fusion de cases :
<TD colspan=#>		fusionner horizontalement # cases.
<TD rowspan=#>		fusionner verticalement # cases.
Exemple : <TABLE border> <TR><TD>A1</TD><TD … colspan=2>A2 & A3</TD></TR> <TR><TD>B1</TD><TD>B2</TD><TD … rowspan=2>B3 & C3</TD></TR> <TR><TD>C1</TD><TD>C2</TD></TR> </TABLE> Produit : A1 A2 & A3 B1 B2 B3 & C3 C1 C2