Dimensions des tableaux HTML

Nous prendrons comme exemple de travail un tableau à 3 colonnes et 5 lignes :

<table>
    <tbody>
        <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
        <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
        <tr><td>Cell 3.1</td><td>Cell 3.2</td><td>Cell 3.3</td></tr>
        <tr><td>Cell 4.1</td><td>Cell 4.2</td><td>Cell 4.3</td></tr>
        <tr><td>Cell 5.1</td><td>Cell 5.2</td><td>Cell 5.3</td></tr>
    </tbody>
</table>

1. Adaptation du tableau à son contenu

Nous souhaitons fixer sa taille à 100px de largeur et 100px de hauteur. Intuitivement, nous aurions à déclarer les règles suivantes dans notre feuille de style associée :

table {
    width: 100px;
    height: 100px;
}

Le tableau ainsi présenté devrait occuper un carré comme suit :

Cependant, un tableau avec 3 colonnes et 5 lignes donne le résultat suivant :

Bien. Vous pouvez prendre votre règle pour vérifier ou me croire sur parole : si ce tableau à bien 100px de large, sa hauteur est par contre bien plus grande que celle définie dans la feuille de styles. Pourquoi ? Parce que le tableau prend simplement la place qui lui est nécessaire pour afficher son contenu.

Vous voulez une preuve supplémentaire ?! Regardez pourquoi la largeur a été respectée : parce que le texte a pu être « encapsulé » dans les cellules. Imaginons un contenu où il n'y aurait pas d'espaces :

Bingo ! Maintenant, ni la largeur ni la hauteur du tableau n'obéissent aux dimensions définies dans la feuille de styles.

2. Retrouver les dimensions spécifiées

2.1. Table-layout de la table et overflow des cellules pour récupérer la largeur

Certaines propriétés de présentation des tableaux HTML sont contrôlées par la propriété table-layout, qui définie en gros de quelle manière l'élément doit s'étendre dans le flux du document auquel il appartient. Si on place cette propriété à fixed, on réussit à récupérer notre largeur car Avec cet algorithme (rapide), la disposition horizontale de la table ne dépend pas du contenu des cellules, mais seulement de la largeur de la table, de la largeur des colonnes, des bordures et de l'espacement entre les cellules (ref) :

table {
    width: 100px;
    height: 100px;
    table-layout: fixed;
}

Un autre problème apparaît ici : le contenu des cellules se chevauche (dans le cas où il n'y pas d'espace blanc, évidemment). On peut néanmoins supprimer ce chevauchement en masquant l'overflow des cellules :

table {
    width: 100px;
    height: 100px;
    table-layout: fixed;
}
table td {
    overflow: hidden;
}

2.2. Tbody et la hauteur du tableau

Dernier problème à résoudre : la hauteur. La propriété table-layout ne semble pas agir dessus. On peut cependant récupérer nos 100px en agissant sur le tbody du tableau, plus précisément sur sa hauteur et son overflow :

table {
    width: 100px;
    height: 100px;
    table-layout: fixed;
}
table tbody {
    height: 100%;
    overflow: auto;
}
table td {
    overflow: hidden;
}

Nous récupérons finalement notre tableau de 100px de large et de 100px de hauteur.

3. Ressources et références

Titre

Spécification HTML 4.01

Auteurs

Dave RAGGETT

Auteurs

Hors LE

Auteurs

Ian JACOBS

Editeur

W3C

Date

24 décembre 1999

Chapitre

11. Les tables

Titre

CSS 2.1 Specification

Auteurs

Bert BOS

Auteurs

Tantek ÇELIK

Auteurs

Ian HICKSON

Auteurs

Lie WIUM

Editeur

W3C

Date

07 juin 2011

Chapitre

17. Tables