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 n^os 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

Chapitre

11. Les tables

Auteurs

Raggett DAVE

Auteurs

Le Hors ARNAUD

Auteurs

Jacobs IAN

Editeur

W3C

Date

24 décembre 1999

Titre

CSS 2.1 Specification

Chapitre

17. Tables

Auteurs

Bos BERT

Auteurs

Çelik TANTEK

Auteurs

Hickson IAN

Auteurs

Wium Lie HÅKON

Editeur

W3C

Date

07 juin 2011