I've heard that Google uses tables for layout because tables load faster. I find it hard to believe that tables could decrease page load time when compared to a CSS based layout with more minimal/semantic markup.
The heftier ones markup is the slower the load time right? Could someone please explain, and/or provide an example of how tables load faster?
With current browsers there is not really a performance reason to use table instead of div tags.
For a long time HTML tables were noticeably faster then div+css tables, especial in IE6 with larger tables and large numbers of floating div tags. That is not to say a few floating divs were noticeable, usually pages had hundreds of floating divs before the difference was easily noted, but it was noticeable. In fact I remember one page which I use to frequent where the day they switch from tables to floating divs was quite noticeable. Of course it was a page I went to regularly (so I knew exactly how long it took to load) and had a listing of all the web safe colors and their values (so there were MANY floating divs). At the time this was explained by the fact that tables had custom code which ran faster then the equivalent div tags (and was easier to keep track of). Once floating div tags were fully implemented the difference was no longer noticeable (tables were slowed down by their new CSS implementations).
That being said, there are reasons to use tables instead of div+css.
I am not saying one is right or wrong in particular situation.
I will say it is best practice to use the most appropriate tag for the job.
It has been noted by some that
The W3C HTML5 standard clearly and explicitly states that tables are to be used for tabular data only.
This is of course, incorrect, but only due to the use of the word "only". The link from @Isaac Fife states
Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page. For example, the following document is non-conforming, despite being syntactically correct: [HTML for a page containing a table made of two rows with one cell each.]...because the data placed in the cells is clearly not tabular data ..." in reference to why a particular use of the table tag is wrong
While this is not the definitive rule, it is a good example of why improper use of tags can be a problem.
A more definitive answer can be found on the W3.org page for Tables (HTML4) which states:
The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.
...
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
For those wanting a little bit more (though not yet final) the W3.org page for Tabular data (HTML5) it states (NOTE: HTML5 is not standardized at the time of this writing, which is why their is the red box on the bottom of the page.):
The table element represents data with more than one dimension, in the form of a table.
...
Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.
Note: There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.
From this it becomes very clear the the standards writes want to discourage the use of tables for page layout. That being said, they do not say using tables for page layout is strictly prohibited, as the role attribute can be used to indicate the table is filling a "presentation" role.
From the standards it seems best practice is to use tables for presenting tabular data, not for layout. A fairly good rule of thumb for when to use tables can be found at about.com
NOTE: Please remember that a table tag does represent structure or layout of information on a page. The standards are not trying to remove the use of tables completely, but to discourage the use of tables for formatting a page. It is ok to place the information you pulled from a database into a table, but do not structure you page in a table with the top header in one row, the left options bar and main page contents in two cells on the second row, and the footer on the bottom row.
An example of proper table use might be an ASCII look up chart or a web safe color chart.
An example of improper table use can be found at w3schools.com
Update 2012/03/12: added additional information and valid standards references to clarify when to use tables.
I have not seen any data on tabular layouts vs. divs+css with regard to page performance; and honestly I believe that whatever difference there is would be a micro-optimization not worth your time unless you were a major player like Google. That being said, there are a couple scenarios where I can conceive of tabular layouts having better performance, and it has to do with the fact it doesn't require CSS for layout, and thus can reduce overall bandwidth consumption (this would only work if the removed bulk of css positioning code outweighs the added bulk required for table layouts). Additionally, if you can eliminate CSS altogether (and embed whatever's left) you can eliminate a single GET request (again, a micro-optimization that only someone like Google might care about).
However, just like the answers to your linked question from 2009, all I can do is speculate as to the real reason why Google used tabular layouts. Performance may not have even been a factor in their decision! You have to remember that back in 2009 the movement to divs+css was still in progress, there were a significant number of major sites that had not yet adapted, and not everyone was fully convinced that it was worth the effort due to numerous bugs and compatibility issues.
For all we know, Google's choice to use tables might have solely to preserve compatibility with ancient browsers which had a lot of problems with CSS (for instance IE5/6). That, not performance, seems much more likely to me. Remember, I never established empirically that tables are faster, just theoretically in certain situations.
Do not read it as
Why a fewer lines of code in CSS is slower than the large makeup in HTML such as table?
What is important is how a one line CSS can create a lot of work for browser than 10 lines of HTML can create very little work for the browser. So the work generated by the piece of code is important rather than the lengh of the code that is create the work.
As far loading, the loading time is about the same weather you use CSS or html tags. The difference is if you use external CSS, this will create another hit on the server (could cause perf issue on a very busy server like google). Plus we have seen often here on stackoverflow, the contents are loaded but the CSS styling is not. This type of issue can be avoided if inline css is used.
So I think it matters only on very busy server where optimization is name of the game. For our general use, separate CSS file is fine and more desirable since it enhances code readability and maintainability and there is no need to embedded everything in HTML.
