Faster HTML Tables with CSS table-layout

Using HTML tables nowdays is "so passe",
"real" web designers are now using only CSS :)
Anyway, here is a simple "trick" to make rendering good old HTML tables faster:

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

CSS Table-layout: "

Cell Contents	Cell Contents
Cell Contents	Cell Contents

"
When you set the table-layout algorithm to fixed, it only needs
to look at the first row before rendering the whole table.
This means that your table will need to have fixed column widths and row heights.


Ok, but how to simulate HTML table without using actual <table element anyway?

Here is the explanation how it works
by using CSS display:table and classes table, table-row, and table-cell

And here is explanation way that may not be such a good idea :)

Conclusion: if data are tabular, real table element makes sense.
If objective is to create layout of web page, div + css is better.
Right tool for the job. Keep it simple.

Most recent version of jQuery Mobile (1.3 beta) has introduced fancy new "responsive web" tables that take a "classic" html table and adjust as needed for smaller screens on mobile devices. In fact it works well on desktop web browsers, too.