How to use table markup semanticly

[lilly54]

Hi all

What's the best use for table markup and why?
I don't know which to use.
Thanks

[Centauri]

Tables are for tabular data - any data or informaton that should be logically listed in related rows and columns. Examples would be Bus timetables, event schedules, employee listings, sports match results etc.

[Frank62]

That tables are only meant for tabular data is nonsense!!!!! Table markup was originally developed for both tabular data and layout purposes!!!!! Divs didn't even exist when table layout was developed!!!!!

That one has to use divs for layout is fundamentalistic crap from people who want to be worshipped because they know how to make layouts with divs and others don't!!!!!

[skywalker2208]

That tables are only meant for tabular data is nonsense!!!!! Table markup was originally developed for both tabular data and layout purposes!!!!! Divs didn't even exist when table layout was developed!!!!!

That one has to use divs for layout is fundamentalistic crap from people who want to be worshipped because they know how to make layouts with divs and others don't!!!!!
I can see that you don't like building sites with div's :)

[Jeff Mott]

It's true there are zealots—on both sides—who will try to "improve the truth," as Jack Kelly would say. But the consensus among professional developers is that tables for layout is bad practice, especially now that there's an alternative. This consensus is represented in the latest HTML spec: "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media."

The bottom line is that CSS with semantic markup is the better option.

[Frank62]

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media."

That's doesn't hold up, either. Modern search engines index table content just as well as divs content.

It's all a matter of what the layout requirements are. Most current layouts are easier with tables, some are easier with divs.

[Jeff Mott]

That's doesn't hold up, either. Modern search engines index table content just as well as divs content.Search engines aren't the only things that see pages in a non-visual way. And I don't think search engines are even what the W3C had in mind. They were actually trying to improve the Web for blind persons. It's been a big deal in the past decade to make webpages accessible to the blind. It has even become a legal matter (MSNBC (http://www.msnbc.msn.com/id/15419164/), Wikipedia (http://en.wikipedia.org/wiki/National_Federation_of_the_Blind_v._Target_Corporation)).

But even if you still don't care about accessible pages, CSS with semantic markup benefits the developer as well. When your markup is independent of the visual layout and design, then you can apply any layout without changing the markup. We could even call this a design pattern. The css Zen Garden (http://www.csszengarden.com/) is a very nice demonstration.

And there are other practical considerations. Sites built with CSS and semantic markup will use less bandwidth than the table-layout equivalent. When the whole site design is contained within a single CSS file, then that file need be downloaded only once. Every page request after that will use the cache. The markup of a table-layout, on the other hand, is repeated on every page, and it must be downloaded with every page request. On enterprise-scale sites, which get high traffic, this is a big deal.

So CSS with semantic markup benefits us, the developers, by making long-term maintenance easier, it benefits the client by easing the load on their servers, and it benefits the blind by making the site accessible. It's all-around goodness, which is why professional developers have embraced it.

[felgall]

Tables in HTML were not originally intended for layout, they were intended for tabular data.

The person who first thought to use tables for layout has recently apologised for ruining the web.

The latest generation of browsers are implementing the CCS3 commands that allow layout tables to be defined in the stylesheet where they belong.

Page layout should never be defined in the HTML because it is impossible to define a layout that works on a braille printer, handheld device and conventional printer that all use the same layout unless you go for an extremely simple layout where everything just appears sequentially.

[Centauri]

Table markup was originally developed for both tabular data and layout purposes!!!!!

That is complete nonsense... tables were only used for layout due to nothing elese being available atthe time when authors wanted more visual contol ofthe pages, and as felgall pointed out, the originator of that method has apologised.

Ever since css has been available for the purpose of styling elements (any elements, not just divs), there has been no need to use tables for layout. Personally I find table code difficult to write and read with all those nested <tr>, <th>, <td> tags....

[WebJoel]

I have learned to not argue the point with anyone whose mind is closed or at least unwilling to give nod to superior modern alternatives nor has done any testing with user-agents other than antiquated visual-only-based table-top computers.
Table-layout was created back when only scientists/scholars were using computers for communicating statistical data and the first customers were stoics like the Census Bureau, U.S. Air Force, AEC (atomic energy commission), U.S. Navy, insurance companies, etc. -Pretty sure that they weren't sending images and animated scripts back and forth to each other..
It was the advent of new technologies that required the advance of new methods of presenting infomation, and DIVisions were exactly what HTML needed.
And lest we forget, IBM scoffed at the idea of 'digital data' in lieu of forsaking the then-preferred UNIVAC paperboard punchcard system... Arguing that DIVs are better than TABLEs is arguing with a neo-Luddite... why bother upsetting them? :(

[Centauri]

It always amuses me how this argument usually degrades to tables vs divs when the two are completely different elements that cannot be interchanged. Unlike tables, you simply cannot set the size, colour, borders etc of a div through pure html - that can only be done through styling. It would be impossible to lay out a page using divs without using styling.

The argument should be between html table layouts and css styled layouts. Style can be applied to any element, not just divs, and it is possible to do a simple styled layout without using any divs or tables at all - a div is just another html element that can be used if required. Css styling allows authors to mark up html with semantics in mind for the benefit of assistive technologies (try listening to a screen reader read a typical html table layout page and see if it makes much sense - especially those with many nested tables). Once you are using style to layout a page, there is simply no point using tables for that purpose.

"why bother upsetting them?" - because its fun ! :D

[ray326]

There are lots of folks working in the development side of IT that refuse to believe that there really are "best practices." Eschewing table layout is indeed a best practice with practical benefits unrelated to the semantics of the mark up.

[tracknut]

The person who first thought to use tables for layout has recently apologised for ruining the web.
Stephen, I found this awfully funny... do they really know who it was that first thought of using tables for a web page layout? I imagine him sitting at a bar with the guy that invented the nuclear bomb, drowning their sorrows...

Dave

[Centauri]

The Web is Ruined and I Ruined it (http://www.xml.com/pub/a/w3j/s1.people.html)

[tracknut]

Thanks for the link, that's quite an interesting read for 1997.

Dave

[WebJoel]

I haven't read that in years... book-marked it this time. :) Thanks.