Le langage HTML/Tableaux
Avant toute chose, il est nécessaire de rappeler que l'utilisation de tableaux doit se limiter au classement et à la présentation des données. Ce n'est donc pas un outil de mise en page même s'il est souvent employé, par erreur, à cet effet. Car par sa rigueur voire sa rigidité, il empêche et complexifie, à l'usage, la mise en page d'un site internet.
En revanche, pour la présentation de données statistiques par exemple, il ne possède aucune concurrence.
Balises de bases.
La déclaration d'un tableau se fait grâce à la balise codice_1 ;
 <table> border="1">
 <caption>Table simple</caption>
 <tr> <!-- ligne 1 -->
 <th> a1 </th> <!-- case 1 -->
 <th> a2 </th> <!-- case 2 -->
 </tr>
 <tr> <!-- ligne 2 -->
 <td> b1 </td> <!-- case 1 -->
 <td> b2 </td> <!-- case 2 -->
 </tr>
 </table>
Attributs de la balise codice_1.
Comme toutes les balises, la balise codice_1 peut avoir des attributs. On peut bien sûr utiliser les attributs habituels (codice_10, codice_11, codice_12, codice_13, codice_14…).
Attributs de mise en forme.
Parmi les attributs spécifiques, nous avons des attributs de mise en forme.
 <table
 lang="en"
 title="Statistics for 2000"
 border="1"
 rules="all"
 frames="border"
 width="30%">
 <caption>Statistics for 2000</caption>
 </table>
Notons que ces attributs de mise en forme peuvent être remplacés par du CSS.
Attribut d'accessibilité.
Le plus grand problème des tableaux est l'accessibilité aux malvoyants. L'attribut codice_38 permet de fournir une explication longue du tableau ; son contenu ne sera pas affiché par les navigateurs graphiques, mais interprété par les navigateurs en Braille ou les lecteurs vocaux.
Balises de groupement.
Les balises de groupement permettent comme leur nom l'indique de grouper des cellules entre elles suivant leur nature. Il est possible de créer des groupes de lignes ou de colonnes. La définition correcte de ces groupes permet entre autres une définition plus aisée des styles, comme par exemple séparer les groupes par des traits.
Séparation des groupes.
Si l'on a défini une bordure (attribut codice_15 ayant une valeur non nulle), on peut choisir de ne pas séparer les cellules du tableau par des traits, mais uniquement les groupes de lignes ou de colonnes. Pour cela, on indique l'attribut codice_52 dans la balise d'ouverture codice_1 :
 <table border="1" rules="groups">
 </table>
Lignes.
La balise codice_54 "(table header)" permet de grouper les lignes d'entête. Elle est généralement utilisée avec la balise codice_6.
La balise codice_56 "(table body)" permet de grouper les lignes du « corps », c'est-à-dire de la partie principale du tableau.
La balise codice_57 "(table footer)" permet, à l'instar des deux précédentes, de grouper les lignes du pied de tableau. Elle est par exemple utilisée lorsque, dans le cas d'un tableau très long, les titres sont reproduits à la fin dans le but d'obtenir une meilleur lisibilité. Elle peut servir également pour la présentation d'une somme ou d'un résumé des colonnes en bas du tableau.
 <table border="1" frame="void" rules="all">
 <thead>
 <tr>
 <th> a1 </th>
 <th> a2 </th>
 </tr>
 </thead>
 <tfoot>
 <tr>
 <td> a1 </td>
 <td> a2 </td>
 </tr>
 </tfoot>
 <tbody>
 <tr>
 <td> b1 </td>
 <td> b2 </td>
 </tr>
 <tr>
 <td> c1 </td>
 <td> c2 </td>
 </tr>
 </tbody>
 </table>
Colonnes.
Les balises codice_58 et codice_59 permettent de définir un groupe de colonnes dans le but d'appliquer un style ou une taille précise à une ou plusieurs colonnes.
Le principal attribut de codice_59 est codice_61, qui indique le nombre de colonnes faisant partie du groupe. S'il est absent, la valeur par défaut est codice_62.
On peut utiliser tous les attributs spécifiques à codice_3, ils s'appliqueront alors à toutes les colonnes du groupe.
<table border="1" rules="groups">
 <colgroup span="2" width="40" align="left" />
 <colgroup span="2" width="10" align="center" />
 <tr>
 <th> a </th> <th> b </th> <th> c </th> <th> d </th> 
 </tr>
 <tr>
 <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> 
 </tr>
</table>
Au lieu de l'attribut codice_61, on peut utiliser des éléments codice_58 pour désigner chaque colonne ; cela permet d'individualiser les attributs pour chaque colonne.
<table border="1" rules="groups">
 <colgroup align="left">
 <col width="20" />
 <col width="40" />
 </colgroup>
 <colgroup span="2" align="center" width="10" />
 <tr>
 <th> a </th> <th> b </th> <th> c </th> <th> d </th> 
 </tr>
 <tr>
 <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> 
 </tr>
</table>
La balise codice_58 peut contenir un attribut codice_61, c'est-à-dire qu'elle peut désigner plusieurs colonnes. Les mêmes attributs s'appliquent alors à ces colonnes, mais cela ne constitue pas un groupe au sens du HTML ; notamment, l'attribut codice_52 de la balise codice_1 n'agit qu'entre les éléments codice_59 et pas entre les éléments codice_58.
Fusionner des cellules.
Il est possible de fusionner des cellules entre elles en utilisant des attributs de la balise codice_3.
La fusion de plusieurs cellules d'une même ligne, c'est-à-dire de plusieurs colonnes, se fait grâce à l'option codice_73 et la fusion de plusieurs cellules appartenant à une même colonne, c'est-à-dire de plusieurs lignes, avec l'option codice_74. Ces deux attributs prennent la valeur correspondant aux nombres de cellules que l'on souhaite fusionner.
<table>
 <tr>
 <td colspan="3">triple cellule</td>
 </tr>
 <tr>
 <td>cellule simple</td>
 <td>deuxième cellule simple</td>
 <td>troisième cellule simple</td>
 </tr>
</table>
La fusion des cellules d'une colonne est un peu plus complexe, en raison de la construction linéaire des tableaux. En effet, lorsqu'une cellule occupe plusieurs lignes, elle est définie dans la première ligne et pas dans les lignes suivantes ; celles-ci contiennents donc un élément codice_3 de moins.
<table>
 <tr>
<!-- La première cellule des trois prochaines lignes seront fusionnées avec la suivante -->
 <td rowspan="3">cellule 1</td>
 <td>cellule simple</td>
 <td>cellule simple</td>
 <td>cellule simple</td>
 </tr>
 <tr>
<!-- La première cellule de cette ligne étant fusionnée avec la précédente,
elle ne doit pas être définie -->
 <td>cellule simple</td>
 <td>cellule simple</td>
 <td>cellule simple</td>
 </tr>
 <tr>
<!-- La première cellule de cette ligne étant fusionnée avec la précédente,
elle ne doit pas être définie -->
 <td>cellule simple</td>
 <td>cellule simple</td>
 <td>cellule simple</td>
 </tr>
</table>
Accessibilité aux malvoyants.
Nous avons déjà vu ci-dessus comment mettre une description de la table à l'attention des malvoyants.
L'autre problème est celui de la lecture de la table. En effet, la table est lue linéairement, ligne par ligne et colonne par colonne. Ainsi, il est difficile de faire le lien entre le contenu d'une cellule et les en-têtes qui s'y rattachent (nom de la ligne et de la colonne), alors que c'est ce lien qui distingue la table d'une simple liste.
Pour contourner ce problème, on met un identifiant à chaque en-tête avec l'attribut codice_10, et pour chaque cellule on indique l'identifiant des en-têtes qui s'y rattachent avec l'attribut codice_79.
 <table
 border="1"
 summary="La table indique, pour chaque mois de l'année,
 la longueur de ce mois
 en jours et en heures" >
 <caption> Longueur des mois </caption>
 <tr>
 <td> </td>
 <th id="col2"> Janvier </th>
 <th id="col3"> Février </th>
 <th id="col4"> Mars </th>
 </tr>
 <tr>
 <th> Durée en jours </th>
 <td headers="col2"> 31 </td>
 <th headers="col3"> 28 ou 29 </td>
 <th headers="col4"> 31 </td>
 </tr>
 <tr>
 <th> Durée en heures </th>
 <td headers="col2"> 744 </td>
 <td headers="col3"> 672 ou 696 </td>
 <td headers="col4"> 744 </td>
 </tr>
 </table>
Notons que l'en-tête peut aussi bien se trouver sur la première colonne de la ligne, mais cela ne pose en général pas de problème : puisque les données suivent l'en-tête, on associe facilement l'en-tête aux données, l'utilisation de codice_10 et codice_79 est superflue.
S'il n'y a pas d'ambiguïté, et notamment pas de fusion de cellule, on peut utiliser l'attribut codice_82 dans la balise.
Dans le cas d'un en-tête de colonne, on utilisera codice_83 et pour un en-tête de ligne, on utilisera codice_84 dans la balise codice_3 de la première cellule.
Si la personne veut lire directement le contenu d'une cellule, alors la ligne n'est plus lue en entier, on perd l'information de l'en-tête de ligne. Il peut donc être intéressant d'utiliser codice_83 et codice_84 conjointement.
codice_6, on ne définit alors pas d'identifiant :
 <table
 border="1"
 summary="La table indique, pour chaque mois de l'année,
 la longueur de ce mois
 en jours et en heures" >
 <caption> Longueur des mois </caption>
 <tr>
 <td> </td>
 <th scope="col"> Janvier </th>
 <th scope="col"> Février </th>
 <th scope="col"> Mars </th>
 </tr>
 <tr>
 <th scope="row" abbr="jours"> Durée en jours </th>
 <td> 31 </td>
 <td> 28 ou 29 </td>
 <td> 31 </td>
 </tr>
 <tr>
 <th scope="row" abbr="heures"> Durée en heures </th>
 <td> 744 </td>
 <td> 672 ou 696 </td>
 <td> 744 </td>
 </tr>
 </table>
L'attribut codice_89 utilisé ci-dessus permet de raccourcir le texte lu par la suite.