Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 31 down vote favorite
6

What are some clear and logical reasons for why we shouldn't be designing websites with tables? Where are the benefits, what has been driving this idea in the industry? When is it okay to use a table?

share|improve this question
Extensively discussed on SO [stackoverflow.com/questions/83073/… – Gaby Nov 29 '10 at 15:35
Should be closed as EXACT duplicate of stackoverflow.com/questions/83073/… – Marco Demaio Nov 30 '10 at 11:53
9  
@Marco - 'duplicates' are only specific to individual sites, not cross site. a) we can't close as duplicates cross-site, b) users may come here, not to stack overflow, so it belongs here too. – Mark Henderson Nov 30 '10 at 20:13
Google uses tables themselves, within adwords for example. With millions of advertisers logging and working with dynamic data it's much easier to code around a <table> then a CSS grid. I use datatables.net for a few applications and you can see a list of who uses that jquery plugin on their site. Lots of sites still use tables for good reasons. I only use tables though when working with a lot of dynamic data that needs to be sorted by column paginated etc, but not for page layouts that's what CSS is for. – Anagio Feb 28 '12 at 8:54

5 Answers

up vote 57 down vote accepted

1) Tables shouldn't be used for page layouts because they are:

  • Slow to render as the browser needs to download most, if not all of the table to render it properly

  • They require more HTML then non-table layouts which means slower loading and rendering as well as increased bandwidth usage

  • They can be a nightmare to maintain as they can get complex quickly

  • They can break text copying

  • They negatively affect screenreaders and may make your cone\tent inaccessible to some users

  • They are not as flexible as using proper semantic markup

  • They were never intended to be used for page layouts

2) Use a table for tabular data. That's what tables are for.

share|improve this answer
1  
Right, so if I have a section on contact details that is OK to have a table for, but the graphical layout of a page is in DIVs or something likewise to them. I've seen some designers avoid them all-together in areas that have tabular data and use DIVs. – Incognito Nov 29 '10 at 16:02
12  
Designers who avoid tables altogether don't know what they're doing. They've misunderstood what "don't use tables for page layouts" means. – John Conde♦ Nov 29 '10 at 16:17
1  
It's stupid to avoid tables altogether, but there are legitimate alternatives to tables for contact info. A definition list is a good alternative, particularly when implementing an hCard: cagintranet.com/archive/… – Lèse majesté Nov 30 '10 at 3:10
2  
@Litso: You should read the W3C's own specs on DL before you decide what it's good for or not good for. – Lèse majesté Dec 1 '10 at 9:37
1  
There is also a position:table CSS tag for creating table-based layouts without putting them in HTML. There are a few niche cases where tables are still the best/easiest option for layouts. Take a look @ css-tricks.com/fluid-width-equal-height-columns to see what I mean. – Evan Plaice Apr 8 '12 at 6:17
show 5 more comments
up vote 0 down vote

the real cause to not use tables is:

the default layout of a table is: table-layout:fixed

this tells the browser to analyze the table and fix the cells to contain the elements inside them, which takes some time. (this is why tables are so good for complex data)

bottom line: the table will render after all the content inside it is rendered, as opposed when using for example DIV elements.

share|improve this answer
up vote 5 down vote

Tables are for tabular data, not design. There is a commom misunderstanding by tableless buzzword.

It is wrong use tables to make your layout basis. You must count on other elements for layout (divs, lists, section, article, header, footer, aside...). Thus you can achieve great effects with little HTML/CSS (what is semantic, light-weight, easy to maintain...).

Of course, tabular data should be inside a table element. If you can, you can increase even tables semantic, adding thead, tfoot, tbody, th, caption... All those elements are intended to be used with tables, and believe, they can make your table much more richer.

So, thing is, don't go with design and use any HTML/CSS solution that fits. Start from HTML semantic markup, and then build up design with CSS. This should keep anyone safe. Use as rule of thumb.

share|improve this answer
Broken grammar makes this answer hard to read through. – Kzqai Dec 6 '12 at 5:56
up vote 3 down vote

Tables should only be used when displaying tabular data. Otherwise, they are usually a poor choice for display.

share|improve this answer
up vote 2 down vote

Tables are supposed to contain data, and not design elements.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.