Table rendering and table–layout Feb11 '05

"Table Rendering" from the IEBlog brings up an interesting discussion on how browsers render tables, and a brief foresight of the "soon to be" CSS star – table–layout.

In the entry, it is mentioned that IE and Firefox both render HTML tables in different ways – what Dave calls "progressive" rendering (Firefox), and simply just "non–progressive" rendering (IE).

I’d prefer to call it "progressive," and "moderate."

Progressive rendering

"Progressive" rendering is a table that is displayed "step by step," as the page is being loaded. In other words, the table displays as much as it can, each step of the way, until the entire table (and page) has been loaded.

Pros: Since partial elements of the table are being displayed as the page loads, this means the user can "get at" some of the content they need immediately, rather than waiting for the entire page to load, before they can see any content.

Cons: Since partial elements of the table are being displayed as the page loads, this can result in a "haphazard" appearance, at least until the table has completed loading, which it’s then OK.

Moderate rendering

"Moderate" rendering is a table that "ceases to exist" until the entire page has been loaded.

Pros: Since the table waits for the entire page to be loaded before it displays itself, the user is presented with a "complete result," rather than haphazard elements floating about.

Cons: Since the table waits for the entire page to be loaded before it displays itself, the user has to wait for however long it takes the page to load before seeing any table content.

What’s better?

So, with two options – which one is better? There really is no simple answer. There are tradeoffs to both approaches.

One sacrafices quality, and the other sacrafices time.

Until we discover a better "all around" solution to rendering tables, there will always be the distinction between browsers.

A better, "all around" choice

We’re in luck. There is a better, "all around" choice already.

That choice is called table–layout.

It’s a CSS property, which let’s the page author (not the browser author) determine how a table is rendered.

If you have a table that is simply text content, then you’d probably use the fixed value for the table-layout property. The value of fixed means that the cell widths and heights are considered first, then the content is added.

(Rather interestingly, ALL tables should be text content, more or less. This is a table’s intended use, and I highly recommend my next example NOT be considered frequently.)

If you have a table that is nested (cringing) within another table, or a table that is being used strictly for layout purposes (cringing more), then you’d probably use the auto value for the table-layout property. This means your (highly inaccesible) table will attempt to load content "on the fly," as the page is loading.

Pros: The benefits of utilizing the table-layout property in CSS are more than obvious.

Cons: The table-layout property is a CSS 2 property, meaning many browsers do not yet support it, but they will soon, with future upgrades.

The bottom line

The bottom line is.. if you use tables for their intended purpose, you won’t have to worry too much about how your tables are rendered. The rest will take care of itself.

Categories: Web Development

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

I'd love to use CSS table-layout, but until they add rowspan and colspan, it's just too limited to be of much use. ... Read more.

I thought colspan and rowspan were added as "presentational hooks" anyway. I’ve never come across a ... Read more.

Nope, in CSS tables, there is no equivalent of colspan and rowspan. This confuses me, as there are doze ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Contact Matt

Similar Entries

Stats

365 unique visits since August 2008

Syndicate

Advertisements