Optimiser les tableaux

Il est préférable d'éviter l'utilisation massive de tableaux, en privilégiant les div et CSS2, mais ces dernières années, nous avons donc pu observer une utilisation de plus en plus importante des tableaux, car ils sont des moyens de mise en page utilisés principalement par les éditeurs WYSIWYG. La page est donc souvent constituée d'un tableau général qui comporte une multitude d'autres tableaux.
Le navigateur doit analyser les différents tableaux afin de calculer leurs tailles souvent dynamiques, en fonction du contenu des cellules, ou des rapports entre les tableaux eux-mêmes. Si les cellules comportent des images, chaque affichage nécessite une requête http.
Nous pouvons dès lors comprendre qu'ici aussi il est possible d'économiser la bande passante.

Principe général

Une manière de réduire les temps de calculs des affichages de tableaux est de fournir un maximum d'informations au navigateur.
Cette technique peut sembler contradictoire avec la chasse au moindre bit superflu, mais le gain de temps lors des nombreux calculs est plus important que la place occupée par les balises que nous emploierons pour définir nos tableaux.

Nous devrons donc nous efforcer de travailler avec des tableaux de tailles fixes afin que le navigateur puisse traiter le tableau en une seule passe.

Les goupes de lignes

• thead : définit un groupe de lignes d'en-tête.
• tfoot : définit un groupe de lignes de pied de page. Nous devons veiller à ce que le groupe tfoot se situe avant les tbody, pour que le navigateur puisse traiter le pied de page avant même d'avoir terminé de traiter les différents tbody.
• tbody : groupe de lignes. Nous pouvons déterminer plusieurs tbody pour un même tableau.

<table frame="border" rules="groups">
<thead>
	<tr>...Informations d'en-tête...</tr>
<tfoot>
	<tr>...Informations de pied de page...</tr>
</tfoot>
<tbody>
	<tr>...ligne 1 du bloc 1...</tr>
	<tr>...ligne 2 du bloc 1...</tr>
<tbody>
	<tr>...ligne 1 du bloc 2...</tr>
	<tr>...ligne 2 du bloc 2...</tr>
</table>

Les goupes de colonnes

• colgroup : définit un groupe de colonnes (HTML 4.0) pour lequel nous pouvons renseigner la largeur (width) et le nombre (span).
• col : définit une colonne individuelle (HTML 3.2). Cette définition annule la définition de groupe pour cette colonne.

Au fond de la cellule...

Il est possible d'insérer une image dans une cellule, ou comme élément de fond.
Nous pouvons travailler avec des fonds colorés au lieu d'utiliser une image, soit en déclarant la couleur de fond en attribut de la cellule, ou mieux encore, en utilisant une feuille de style.

Structure du document