URL: http://www.w3.org/TR/REC-CSS2/tables.html#width-layout

I've learnt something interesting today worth thinking more about. The "table-layout" selector in CSS2. Long story short... if you specify it like this:


<table style="table-layout:fixed">

then the whole table will be shown slightly faster because the browser doesn't have to load the whole table into memory and then use the "automatic table layout algorithm" where it needs to find out what widths to use on the table based on the content inside. With the fixed algorithm the widths are either defined by:

  • a width != auto on any of the columns
  • a width != auto on any of the columns found in the first row
  • the remainder width found from rendering the first row by also considering the tables margin to other side-elements such as the whole window

So the least lazy set up is to set table-layout:fixed and then define the width either in CSS or in the first row and the web browser will be able to show parts of the table whilst the page is still loading. The fact that the web browser can't show anything until fully computing was one of the reasons for using Web Standards to code layout. Web Standards for layout is still the best way forward, but tables are often useful too, such as the big tables on the issuetracker ListIssues so I better start looking at this more seriously. A caveat is that it's not easy to slow down an already fast setup (I only use broadband :) to see the effect with my bare eyes. I guess I have to roll up my sleeves and read the W3C specs and implement it correctly without having to trail-and-error it.

Comments

Sascha Welter

quote:
"A caveat is that it's not easy to slow down an already fast setup (I only use broadband :) to see the effect with my bare eyes"

Haha! Come visit me in Greece and I'll lend you a machine to test it here on our stone-age Interent connections :-) Seriously you could find an old modem somewhere or play around with GPRS to test it.

Your email will never ever be published.

Previous:
Dream: python bindings for squidclient October 11, 2005 This site, Python
Next:
Furious and deprived by 'rm *' October 15, 2005 Linux
Related by category:
Fastest way to find out if a file exists in S3 (with boto3) June 16, 2017 Web development
Be very careful with your add_header in Nginx! You might make your site insecure February 11, 2018 Web development
<datalist> looks great on mobile devices August 28, 2020 Web development
How to have default/initial values in a Django form that is bound and rendered January 10, 2020 Web development
Related by keyword:
Select all relations in PostgreSQL December 10, 2015 PostgreSQL
10 reasons for web standards June 6, 2004 Web development