qt8gt0bxhw|20009F4EEE83|RyanMain|subtext_Content|Text|0xfbffd50000000000b800000001000400
Over the last year or so I've been trying to make by web UIs more CSS driven and not use tables as often as I do. But it is an ongoing battle. Who ever said that old-habits die hard wasn't kidding. The use of tables comes out so natually when I write my markup that it is second nature. It is the way I have always done web UI layout. Problem is that tables are inflexible, have a tendency to get messy fast as you get deeper and deeper nested tables, but worst of all they are slow for the browser to render. Milan Negovan made yet another great post today to share a great idea to speed up tables for those of us struggling to drop our excessive table habits.
The idea is to force column width so the browser does not have to calculate it and do all the resizing using the table-layout property. Doing so will drastically speed up table rendering (by a factor of 100 or so according to Milan)
<table style="table-layout:fixed;"... >
Milan explains that with the table-layout fixed that the browser computes the column widths in the following order:
- By using information in the
width property for the col or colGroup element.
- By using information in the
width property for the td elements in the first row.
- By dividing the table columns equally, regardless of the size of the content.
If the content of a cell exceeds the fixed width of the column, the content is wrapped or, if wrapping is not possible, it is clipped. However, what this will give you is faster rendering since the browser doesn't have to parse the entire table to calculate the column width. While it is still a better idea to use more semantic markup over table layouts, this at least gives a faster alternative for your tables - especially when you start looking at how most tables contain layers and layers of nested tables.
BTW, as long as we're on the subject, if you do any ASP.NET development at all, then you should be subscribing to Milan. It amazes me how much great content he cranks out. Non-stop useful information, he's definitly saved me a headache or two. Check out his site at AspNetResources.com. He's taking his part in making the web beautiful and practical, one post at a time.