Tuesday, January 29, 2013

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.

big think

Big Think is a knowledge forum.

Blogs, Articles and Videos from the World's Top Thinkers and Leaders | Big Think:
"WE ARE BIG IDEA HUNTERS…
We live in a time of information abundance, which far too many of us see as information overload.
With the sum total of human knowledge, past and present, at our fingertips,
we’re faced with a crisis of attention: which ideas should we engage with, and why?
Big Think is an evolving roadmap to the best thinking on the planet
— the ideas that can help you think flexibly and act decisively in a multivariate world."

Certainty in an Uncertain World

How to Find Certainty in an Uncertain World | Daniel Burrus | Big Think:
"Daniel Burrus says there are clear ways to predict the future in an uncertain world. You need to unplug yourself from the present and look at examples of linear change -- things that will not go backward and will definitely happen in the future."


Google Flu Map Visualization

Google - Google+ - Google Flu Trends, which estimates flu levels based on what…



Besides a useful and apparently quite accurate "big data" service,
Google engineers created a nice visualization, too...

www.google.org/flutrends/us/