Optimiser les tableaux en HTML

Table des matières

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.

Les balises de tableaux en HTML

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 tbody, thead et tfoot

  • 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.

Code source du tableau HTML

  1. <table frame="border" rules="groups">
  2. <thead>
  3. 	<tr><td>...Informations d'en-tête...</td></tr>
  4. <tfoot>
  5. 	<tr><td>...Informations de pied de page...</td></tr>
  6. </tfoot>
  7. <tbody>
  8. 	<tr><td>...ligne 1 du bloc 1...</td></tr>
  9. 	<tr><td>...ligne 2 du bloc 1...</td></tr>
  10. <tbody>
  11. 	<tr><td>...ligne 1 du bloc 2...</td></tr>
  12. 	<tr><td>...ligne 2 du bloc 2...</td></tr>
  13. </table>

Résultat

...Informations d'en-tête...
...Informations de pied de page...
...ligne 1 du bloc 1...
...ligne 2 du bloc 1...
...ligne 1 du bloc 2...
...ligne 2 du bloc 2...

Les goupes de colonnes: colgroup

  • 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.

Pseudo tables HTML

Bien que généralement utilisés pour disposer les éléments sur la page (layout), les tableaux sont normalement réservés à un usage où la sémantique correspond à l'affichage de données comme dans Lotus 1-2-3, ou Microsoft Excel.

Il est tout à fait possible de déléguer la présentation aux feuilles de style afin de reproduire un effet de tableau si les données ne nécessitent pas une réelle utilisation de tableur.

test de tableau sans balise <table> 
C0 | C1 | C2 | C3 | C4 | C5 |
R1C0 | R1C1 | R1C2 | R1C3 | R1C4 | R1C5 |
R2C0 | R2C1 | R2C2 | R2C3 | R2C4 | R2C5 |
R3C0 | R3C1 | R3C2 | R3C3 | R3C4 | R3C5 |
R4C0 | | R4C2 | R4C3 | | R4C5 |
R5C0 | | R5C2 | R5C3 | | R5C5 |
R6C0 | | R6C2 | R6C3 | | R6C5 |
R7C0 | R7C1 | R7C2 | R7C3 | | R7C5 |
R8C0 | R8C1 | | R8C3 | R8C4 | R8C5 |
R9C0 | R9C1 | R9C2 | R9C3 | R9C4 | R9C5 |
C0 | C1 | C2 | C3 | C4 | C5 |

Génération de Pseudo tables HTML

Modification du 31/07/2003

Le code utilisé dans l'exemple ci-dessus est à présent généré depuis une classe PHP.
Pour ceux qui désirent en savoir plus sur la génération des tableaux sur l'infobrol, voici le code que j'utilise…
  1. $pseudoTable = new PseudoTable('testPseudoTable1', 'test de tableau sans balise <table>');
  2. $pseudoTable->setHeaderByFormat('C$0', array('getColId'));
  3. //
  4. for($rowCnt=0; $rowCnt<10; $rowCnt++){
  5.     //fill all cells with a given format, calling methods given as array parameter
  6.     $pseudoTable->addRowByFormat('R$0C$1', array('getRowId', 'getColId'));
  7. }
  8. //collapse from row 2 column 1, to row 5 column 1  (0 based index) keeping the first cell value, and apply 'hi' class
  9. $pseudoTable->collapse(2, 1, 5, 1, 'hi');
  10. //collapse from row 2 column 4, to row 6 column 4
  11. $pseudoTable->collapse(2, 4, 6, 4);
  12. //collapse from row 7 column 1, to row 7 column 2
  13. $pseudoTable->collapse(7, 1, 7, 2);
  14. //use alternate color between odd and even rows
  15. $pseudoTable->setAlternate(true);
  16. //
  17. echo $pseudoTable;

Ce qui produit donc le code suivant :

  1. <div class="brol-pseudotable-wrapper brol-fullwidth"><div class="brol-caption" style="min-width:41em;"><span>test de tableau sans balise &lt;table&gt;</span><span class="tabEnd">&nbsp;</span></div><div class="brol-pseudotable brol-fullwidth" id="testPseudoTable1"><div class="brol-pseudotgroup"><div class="brol-pseudorow td2"><span class="brol-pseudocell-th ta-c">C0 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C1 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C2 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C3 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C4 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td"><span class="brol-pseudocell ta-l">R1C0 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R1C1 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R1C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R1C3 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R1C4 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R1C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td2"><span class="brol-pseudocell ta-l">R2C0 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R2C1 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R2C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R2C3 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R2C4 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R2C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td"><span class="brol-pseudocell ta-l">R3C0 <span class="noDisp">| </span></span><span class="brol-pseudocell brol-rowcollapsed hi">R3C1 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R3C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R3C3 <span class="noDisp">| </span></span><span class="brol-pseudocell brol-rowcollapsed td">R3C4 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R3C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td2"><span class="brol-pseudocell ta-l">R4C0 <span class="noDisp">| </span></span><span class="brol-pseudocell hi brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R4C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R4C3 <span class="noDisp">| </span></span><span class="brol-pseudocell td brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R4C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td"><span class="brol-pseudocell ta-l">R5C0 <span class="noDisp">| </span></span><span class="brol-pseudocell hi brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R5C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R5C3 <span class="noDisp">| </span></span><span class="brol-pseudocell td brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R5C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td2"><span class="brol-pseudocell ta-l">R6C0 <span class="noDisp">| </span></span><span class="brol-pseudocell hi brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R6C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R6C3 <span class="noDisp">| </span></span><span class="brol-pseudocell td brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R6C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td"><span class="brol-pseudocell ta-l">R7C0 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R7C1 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R7C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R7C3 <span class="noDisp">| </span></span><span class="brol-pseudocell td brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R7C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td2"><span class="brol-pseudocell ta-l">R8C0 <span class="noDisp">| </span></span><span class="brol-pseudocell brol-colcollapsed ta-l">R8C1 <span class="noDisp">| </span></span><span class="brol-pseudocell brol-empty"> <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R8C3 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R8C4 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R8C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td"><span class="brol-pseudocell ta-l">R9C0 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R9C1 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R9C2 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R9C3 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R9C4 <span class="noDisp">| </span></span><span class="brol-pseudocell ta-l">R9C5 <span class="noDisp">| </span></span></div><div class="brol-pseudorow td2"><span class="brol-pseudocell-th ta-c">C0 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C1 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C2 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C3 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C4 <span class="noDisp">| </span></span><span class="brol-pseudocell-th ta-c">C5 <span class="noDisp">| </span></span></div></div></div></div>

Nous pouvons remarquer que ce code n'est pas du tout optimisé au niveau de la quantité de caractère qu'il génère, mais il a le mérite de ne pas laisser la responsabilité de la présentation à la page elle-même. Il suffit de modifier la classe PseudoTable pour adapter toutes les pages.

Document créé le 21/07/2002, dernière modification le 26/10/2018
Source du document imprimé : https://www.gaudry.be/html-optimisation-tableaux.html

L'infobrol est un site personnel dont le contenu n'engage que moi. Le texte est mis à disposition sous licence CreativeCommons(BY-NC-SA). Plus d'info sur les conditions d'utilisation et sur l'auteur.