Usuellement un tableau est constitué de lignes et de colonnes. Ce n'est pas tout à fait le cas en HTML : Un tableau est un conteneur ]]> Un tableau est constitué de lignes ]]> (pour table row) Un tableau est constitué de cellules]]> (pour table data) Il est également possible de fournir une légende au tableau. Tous ces éléments se structurent globalement dans un entête, un pied de tableau, et un corps de tableau.

Un tableau se déclare grâce à la balise ]]>. Cette balise peut avoir plusieurs balises-enfants. La plupart sont facultatives, mais si elles sont présentes, elles doivent être utilisées dans cet ordre : ]]> ]]> ou ]]> ]]> ]]> ]]>

La notion de table étant complexe, le nombre d'attributs de cette balise est important. Attribut Effet Valeur summary donne un rapide résumé du contenu du tableau. Cela améliore l'accessbilité de la page. une chaîne de caractères width largeur du tableau une longueur, qui peut s'exprimer en nombre de pixels ou en pourcentage de la largeur de la fenêtre du navigateur border épaisseur de la bordure extérieure en pixel (par défaut, 0, sans bordure) frame (rien à voir avec la balise ]]>, que l'on verra dans le cours sur les cadres). Présence de l'encadrement extérieur void : aucune above : haut seulement below : bas seulement hsides : haut et bas vsides : gauche et droite lhs : gauche seulement rhs : droite seulement box : sur les 4 côtés border : sur les 4 côtés aussi rules comme l'attribut frame, mais pour l'encadrement intérieur none : aucun groups : seulement entre les groupes de lignes (]]>, ]]> et ]]>) et les groupes de colonnes (]]> et ]]>) rows : entre les lignes cols : entre les colonnes all : partout (valeur par défaut) cellspacing marge entre cellules consécutives en pixels cellpadding marge entre le bord et le contenu de la cellule en pixels align position du tableau dans la fenêtre. Cet attribut est obsolète en HTML 4.01 strict. center left right bgcolor couleur de fond du tableau. Cet attribut estobsolète en HTML 4.01 strict. nom de couleur ou triplet RGB Attributs de la balise ]]>. Certains de ces attributs sont liés ; ainsi si border="0", alors frame="void" et rules="none". Par défaut la taille du tableau s'ajuste à son contenu. C'est cette gestion particulière de la taille qui fait du tableau un moyen très utile de présentation.

Cette balise est facultative, et ne peut être présente qu'une seule fois dans le tableau. Son rôle est de lui donner une légende, plus complète que le court résumé de l'attribut summary. Elle possède un attribut align, qui gère son alignement relativement au tableau. Cet attribut est obsolète en HTML 4.01 strict. Exemple d'utilisation : Légende du tableau.

Le rôle fondamental de ces balises est de définir des groupements de colonnes. ]]> le fait de manière plus "structurelle". ]]> permet à plusieurs colonnes de partager les mêmes attributs. C'est un élément vide. ]]> permet de regrouper un ensemble de colonnes en une seule unité logique, et d'appliquer par exemple un style à cet ensemble de colonnes. Attribut Effet Valeur(s) span Nombre de colonnes à regrouper un nombre width Largeur de chaque colonne une longueur, qui peut s'exprimer en nombre de pixels, en pourcentage, ou bien par exemple width="0.5*", en proportion relative valign alignement vertical top : alignement en haut de la cellule middle : alignement au milieu de la cellule (valeur par défaut) bottom : alignement en bas de la cellule baseline : alignement sur la ligne du bas dela cellule align alignement horizontal left (valeur par défaut) right center justify char : l'alignement se fait sur un caractère particulier char spécifie quel caractère doit servir de base pour l'alignement un caractère. La valeur par défaut est celle du séparateur décimal défini par l'attribut de langage lang, à savoir le "." pour la langue par défaut, et le "," si l'attribut définit le français comme langue (lang="fr"). Il n'est pas demandé aux navigateurs de supporter cet attribut. charoff spécifie le décalage en position horizontale imposé aucaractère d'alignement. un nombre. Attributs communs à ]]> et ]]>. Par exemple, si on doit spécifier que quarante colonnes dans un tableau doivent être alignés à droite, au lieu d'écrire... 20 20 ... 40 éléments au total... ... on peut se contenter d'écrire... 4020 Quand il est nécessaire d'identifier une unique colonne sur ces quarante, par exemple la dernière, on peut regrouper sous la forme... 20 39 top

Le rôle de ces balises est de contenir les informations nécessaires à l'entête et au bas du tableau. Il s'agit essentiellement des titres de colonnes. Ces balises contiennent des lignes (voir le paragraphe consacré à la balise ]]> pour plus de détails). Il est possible, pour peu que l'on ait déclaré la balise ]]> (respectivement ]]>), de dupliquer l'entête (respectivement le bas) d'un tableau en cas de saut de page. Les attributs de ces balises sont les attributs d'alignement des cellules (valign, align, char et charoff). Son rôle est de définir le corps même d'un tableau. En dupliquant plusieurs ]]> au sein d'un même tableau, on peut définir plusieurs composantes structurelles d'apparences et de formats différents. Les attributs de cette balise sont les attributs d'alignement des cellules (valign, align, char et charoff).

Les attributs de cette balise sont les attributs d'alignement des cellules (valign, align, char et charoff), ainsi que l'attribut bgcolor, dont la fonction est de spécifier la couleur de fond de la ligne. Mais ce dernier attribut est obsolète en HTML 4.01 Strict. Cette balise permet de définir une ligne dans le tableau. Elle peut contenir une ou plusieurs balises ]]> ou ]]>. Ces balises acceptent les mêmes contenus, ainsi que les mêmes attributs. Cependant, ]]> doit être utilisé pour indiquer des cellules destinées à être des entêtes de colonnes (Table Header). Ces balises peuvent contenir à peu près tous les types d'éléments, y compris les ]]> et les ]]>. Attribut Effet Valeur(s) abbr fournit un abrégé du contenu de la cellule une chaîne de caractères axis indique à quelle catégorie appartient la cellule (voir sur le site du W3C pour plus d'informations sur l'utilisation de cet attribut dans la structuration du contenu d'un tableau). une chaîne de caractères headers renvoi à(aux) l'identifiant(s) de la cellule "header" associée. Cela permet à un agent vocal de présenter le type de contenu de la cellule avant le contenu proprement dit. une liste d'indentifiants (séparés par des espaces) scope indique quel est le jeu de cellules auquel la cellule "header" courante s'applique row : s'applique à la ligne courante col : s'applique à la colonne courante rowgroup : s'applique à l'ensemble du ]]>, ]]> ou ]]> courant colgroup : s'applique au groupe de colonnes courant (spécifié par les balises ]]> ou ]]>) rowspan nombre de lignes concernées par la balise courante. un nombre. La valeur par défaut est 1. Si rowspan="0", la cellule s'applique à l'ensemble des lignes, depuis la ligne courante jusqu'à la dernière dans le ]]>, ]]> ou ]]> courant. colspan nombre de colonnes concernées par la cellule courante. un nombre. La valeur par défaut est 1. Si rowspan="0", la cellule s'applique à l'ensemble des colonnes, depuis la ligne courante jusqu'à la dernière du ]]>. align alignement horizontal left (valeur par défaut) right center justify char : l'alignement se fait sur un caractère particulier char spécifie quel caractère doit servir de base pour l'alignement un caractère. La valeur par défaut est celle du séparateur décimal défini par l'attribut de langage attr, à savoir le "." pour la langue par défaut, et le "," si l'attribut définit le français comme langue (attr="fr"). Il n'est pas demandé aux navigateurs de supporter cet attribut. charoff spécifie le décalage en position horizontale imposé au caractère d'alignement. un nombre. valign alignement vertical top : alignement en haut de la cellule middle : alignement au milieu de la cellule (valeur par défaut) bottom : alignement en bas de la cellule baseline : alignement sur la ligne du bas de la cellule nowrap empêche le retour à la ligne automatique dans les cellules quand le bord de la fenêtre du navigateur est atteint. Obsolète en HTML 4.01 strict. valeur unique : nowrap bgcolor couleur de fond de la cellule. Cet attribut est obsolète en HTML 4.01 strict. nom de couleur ou triplet RGB width largeur de la cellule. Cet attribut est obsolète en HTML 4.01 strict. nombre de pixels ou pourcentage height hauteur de la cellule. Cet attribut est obsolète en HTML 4.01 strict. nombre de pixels ou pourcentage Attributs des balises ]]> et ]]>.

Si le nombre de cellules est différent d'une ligne à l'autre, les derniers emplacements sont vides. Par ailleurs, un conteneur vide ]]> crée un emplacement vide alors qu'un conteneur contenant un espace insécable crée une cellule vide.

Un tableau peut en contenir un autre qui peut en contenir un autre qui... Il n'y a pas de limitation.

Créés au départ pour présenter des tables de données, les tableaux sont très vite devenus un moyen efficace de présentation claire et ordonnée. Ils permettent, par exemple, de faire de manière souple du multicolonne. De nombreux sites les utilisent, comme... ... le site du Monde : http://www.lemonde.fr. ... le site de Yahoo : http://www.yahoo.fr. ... le site de l'Université Pierre et Marie Curie : http://www.upmc.fr. Néanmoins, les performances des navigateurs les plus récents dans le support des feuilles de style rendent cette utilisation des tableaux obsolète ; il vaut mieux maintenant lui préférer ue mise en page à base d'éléments div.