Le modèle de la table de HTML permet aux auteurs d'arranger des données en rangées et colonnes de cellules.

L'élément TABLE contient tous les autres éléments qui spécifient la légende, les rangées, le contenu et la mise en forme.

Le modèle de table HTML a été conçu de telle sorte que les navigateurs, avec l'assistance de l'auteur, puissent restituer les tables progressivement (i.e., au fur et à mesure que les rangées arrivent) plutôt que de devoir attendre la totalité des données avant de commencer la restitution.

Pour ce faire, les largeurs de colonne devront être spécifiées à l'aide d'une combinaison d'éléments COLGROUP et COL. Si éventuellement l'une des colonnes est spécifiée en termes relatif ou de pourcentage, l'auteur doit aussi spécifier la largeur de la table en question.

Exemple d'une table simple à 3 colonnes :

<table width="310" height="300" border="1" align="center">
  <caption>Exemple avec GOLGROUP / COL </caption>
  <colgroup>
    <col width="10" />
    <col width="100" />
    <col width="200" />

  </colgroup>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
    <td>Cellule 3</td>

  </tr>
  <tr>
</table>

L'attribut WIDTH permet de spécifier la largeur de la table en pixel ou en pourcentage (ex : 50%).

L'attribut HEIGHT permet de spécifier la hauteur de la table en pixel ou en pourcentage (ex : 50%).

L'attribut BORDER permet de tracer une bordure autour de la table ou des cellules. Notez que l'usage de'une feuille de styles est conseillé. Rarement utilisé, il existe aussi deux attributs permettant un grand contrôle des bordures, soit frame et rules.

L'élément CAPTION permet de donner une légende de la table.

L'attribut ALIGN [left|center|right|justify|char] spécifie l'alignement des données et la justification du texte dans une cellule. Les valeurs possibles sont :

• left : données repoussées à gauche/texte justifié à gauche. C'est la valeur par défaut ;
• center : données au centre/texte centré. C'est la valeur par défaut pour les rubriques de tables ;
• right : données repoussées à droite/texte justifié à droite ;
• justify : texte justifié ;

L'attribut valign [top|middle|bottom|baseline] spécifie la position verticale des données dans une cellule. Les valeurs possibles sont :

• top : les données de la cellule sont repoussées en haut de la cellule ;
• middle : les données de la cellule sont centrées verticalement dans la cellule. C'est la valeur par défaut ;
• bottom : les données de la cellule sont repoussées en bas de la cellule ;
• baseline : toutes les cellules, qui se trouvent dans la même rangée qu'une cellule dont l'attribut valign a cette valeur, devraient avoir leurs données textuelles positionnées de telle sorte que la première ligne de texte apparaisse sur une ligne de base commune à toutes les cellules de cette rangée. Cette contrainte ne s'applique pas aux lignes de texte suivantes dans ces cellules.

L'attribut cellspacing spécifie la quantité d'espacement que l'agent utilisateur devrait laisser entre le côté gauche de la table et le côté gauche de la colonne la plus à gauche, le côté supérieur de la table et le côté supérieur de la rangée la plus haute, et ainsi de suite pour le côté droit et le côté inférieur de la table. L'attribut spécifie également la quantié d'espacement à laisser entre les cellules.

L'attribut cellpadding spécifie la quantité d'espacement entre la bordure de la cellule et son contenu. Si la valeur de cet attribut est une longueur en pixels, alors les quatre marges devraient toutes se trouver à cette distance du contenu. Si la valeur de l'attribut est une longueur en pourcentage, les marges supérieure et inférieure devraient se trouver à égale distance du contenu, en fonction d'un pourcentage de l'espacement vertical disponible, et les marges gauche et droite se trouver à égale distance du contenu, en fonction d'un pourcentage de l'espacement horizontal disponible.

L'élément TR se comporte comme un conteneur pour une rangée de cellules (TD)de la table.

Il y a deux types de cellules, l'en-tête (header) définit par l'élément TH et la cellule de données définit par l'élément TD. L'élément TH est généralement centré et affiché avec un style de caractères gras.

L'attribut COLSPAN et l'attribut ROWSPAN. Les cellules peuvent occuper plusieurs rangées ou colonnes. Le nombre des rangées ou des colonnes occupées par une cellule est fixé par les attributs rowspan et colspan des éléments TH et TD.

Dans la définition de cette table, nous spécifions que la cellule en rangée 4 et colonne 2 devrait occuper un total de trois colonnes.

<table width="100%" border="1" cellspacing="2"  cellpadding="2">
  <tr>
    <th>Nom</th>
    <th>Tasses</th>
    <th>Type de café</th>
    <th>Sucre ?</th>
  </tr>
  <tr>
    <td>T. Sexton</td>
    <td>10</td>
    <td>Espresso</td>
    <td>Non</td>
  </tr>
  <tr>
    <td>J. Dinnen</td>
    <td>5</td>
    <td>Déca.</td>
    <td>Oui</td>
  </tr>
  <tr>
    <td>A. Soria</td>
    <td colspan="3">Non disponible</td>
  </tr>
</table>

Résultat :

Exemple 2 :

NOTE : Les tables ne devraient pas représenter simplement un moyen de disposer le contenu d'un document car cela peut entraîner des problèmes de restitution sur les médias non-visuels. En outre, quand on les utilise avec des graphiques, ces tables peuvent forcer l'utilisateur à effectuer un défilement horizontal pour voir une table qui aura été conçue sur un système avec une surface d'affichage plus grande. Afin de minimiser ces problèmes, les auteurs devraient employer des feuilles de style pour le contrôle de la disposition plutôt que des tables.