Velocizzare il rendering delle tabelle con la proprietà table-layout

Pubblicato il 20/02/2008 da Matteo Moro in css, html, tabelle, w3c

Normalmente, nel momento in cui si utilizza una tabella, il browser calcola la larghezza delle colonne solo dopo aver analizzato tutto il contenuto della tabella stessa: questo è il comportamento di default, a meno che non si specifichino esplicitamente le dimensioni di ogni colonna. Nel caso in cui le tabelle siano particolarmente grandi, il calcolo può comportare un grosso lavoro per il browser, rallentando vistosamente il caricamento della pagina.

Tabella
In queste situazioni, ci viene in aiuto la proprietà CSS table-layout, che permette di scegliere l’algoritmo con cui il browser calcolerà la larghezza delle colonne. Se anziché lasciarne il valore su auto, lo impostiamo su fixed, il browser calcolerà la larghezza delle colonne non dimensionate esplicitamente dividendo lo spazio rimanente per il numero delle colonne e adattando il contenuto di conseguenza, dove possibile. Questo velocizza di molto il caricamento delle pagine e rende, se ben utilizzato, più armonico l’aspetto delle nostre tabelle.

Per maggiori dettagli sul significato della proprietà table-layout e per una spiegazione del funzionamento, si possono leggere la sezione relativa nelle specifiche CSS2 e l’ottimo articolo a riguardo di Eric Wendelin: “Use the table-layout CSS property to speed up table rendering“.

Conosci qualche altra buona regola di utilizzo delle tabelle? Hai letto, o scritto, un tutorial in proposito? Segnalamelo nei commenti!

CREDITS:

Commenti

4 commenti per “Velocizzare il rendering delle tabelle con la proprietà table-layout”

  1. Attilio Viscido (artgatt) il 20/02/2008 08:05

    Ottimo suggerimento. Appena vado in ufficio stamattina ci provo subito !! ;)

  2. ZicZac.it, clicca qui e vota questo articolo! il 20/02/2008 10:34

    Questo articolo è stato segnalato su ZicZac.it….

    …

  3. diggita.it il 20/02/2008 10:35

    Velocizzare il rendering delle tabelle con la proprietà table-layout…

    Normalmente, nel momento in cui si utilizza una tabella, il browser calcola la larghezza delle colonne solo dopo aver analizzato tutto il contenuto della tabella stessa: questo è il comportamento di default, a meno che non si specifichino esplicitamen…

  4. upnews.it il 20/02/2008 10:35

    Velocizzare il rendering delle tabelle con la proprietà table-layout…

    Normalmente, nel momento in cui si utilizza una tabella, il browser calcola la larghezza delle colonne solo dopo aver analizzato tutto il contenuto della tabella stessa: questo è il comportamento di default, a meno che non si specifichino esplicitamen…

Commenta il post