Optimiser les tableaux en HTML

Inhaltsverzeichnis

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.

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 21/07/2002, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/html-optimisation-tableaux.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.