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.
  1. <table frame="border" rules="groups">
  2. <tr>...Informations d'en-tête...</tr>
  3. <tr>...Informations de pied de page...</tr>
  4. <tr>...ligne 1 du bloc 1...</tr>
  5. <tr>...ligne 2 du bloc 1...</tr>
  6. <tr>...ligne 1 du bloc 2...</tr>
  7. <tr>...ligne 2 du bloc 2...</tr>

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.

Réseaux sociaux

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher les interactions avec les réseaux sociaux sur ces pages.

 

Nuage de mots clés

12 mots clés dont 0 définis manuellement (plus d'information...).

Avertissement

Cette page ne possède pas encore de mots clés manuels, ceci est donc un exemple automatique (les niveaux de pertinence sont fictifs, mais les liens sont valables). Pour tester le nuage avec une page qui contient des mots définis manuellement, vous pouvez cliquer ici.

Vous pouvez modifier vos préférences dans votre profil pour ne plus afficher le nuage de mots clés.

 

Astuce pour imprimer les couleurs des cellules de tableaux : http://www.gaudry.be/ast-rf-450.html
Aucun commentaire pour cette page

© Ce document issu de l′infobrol est enregistré sous le certificat Cyber PrInterDeposit Digital Numbertection. Enregistrement IDDN n° 5329-329
Document créé le 10/12/03 01:00, dernière modification le Mercredi 28 Juin 2017, 15:26
Source du document imprimé : http:///www.gaudry.be/html-optimisation-tableaux.html
St.Gaudry©07.01.02
Outils (masquer)
||
Recherche (afficher)
Recherche :

Utilisateur (masquer)
Apparence (afficher)
Stats (afficher)
15838 documents
455 astuces.
550 niouzes.
3107 definitions.
447 membres.
8121 messages.

Document genere en :
0,10 seconde

Mises à jour :
Mises à jour du site
Citation (masquer)
Jesus Christ est né en 1940 avant Chuck Norris.

Anonyme [Chuck Norris fact]
 
l'infobrol
Nous sommes le Vendredi 18 Août 2017, 08:56, toutes les heures sont au format GMT+1.00 Heure, heure d'été (+1)