Why aren't we supposed to use <table> in a design?
Solution 1
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 than non-table layouts which means slower loading and rendering, as well as an increased bandwidth usage
They can be a nightmare to maintain as they can quickly get complex
They can break text copying
They negatively affect screen readers and may make your content inaccessible to some users
They are not as flexible as using proper semantic markup
They were never intended to be used for page layouts
Making tables into a responsive layout is very difficult to control
2) Use a table for tabular data. That's what tables are for.
See also: Why are people making tables with divs?
Solution 2
Tables are for tabular data, not design. People often misunderstand the motivation behind making pages "tableless".
It is wrong to use tables to create your layout. You should use other elements for layout (divs, lists, sections, articles, headers, footers, asides, etc.). And you can achieve great effects with minimal HTML/CSS (leaving your code semantically meaningful, lightweight, and easy to maintain).
Of course, tabular data should be inside a table element. If you want, you can improve even the tables' semantics by adding thead, tfoot, tbody, th, caption etc. All those elements are intended to be used with tables, and believe me, they can make your table much more self-descriptive.
So, thing is, don't go with table-based 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 this as a rule of thumb.
Solution 3
Tables should only be used when displaying tabular data. Otherwise, they are usually a poor choice for display.
Solution 4
Tables are supposed to contain data, and not design elements.
Related videos on Youtube
Incognito
Updated on September 17, 2022Comments
-
Incognito over 1 year
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?
-
Admin over 13 yearsExtensively discussed on SO stackoverflow.com/questions/83073/…
-
Admin about 12 yearsGoogle 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.
-
-
Incognito over 13 yearsRight, 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.
-
John Conde over 13 yearsDesigners who avoid tables altogether don't know what they're doing. They've misunderstood what "don't use tables for page layouts" means.
-
t3mujin over 13 yearsTotlly agree, specially when people insist to implement inner tables or too many rowspan/colspan cells...
-
Trufa over 13 yearsExcellent answer sir! The answer is clear, usa a <table> when you need a table.
-
Django Reinhardt over 13 yearsThank god someone wrote a clear answer... Oh to go back to the days of tables *shudders*
-
Lèse majesté over 13 yearsIt'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/…
-
Stephan Muller over 13 yearsA definition list is NOT good for a contact card. A definition list is a definition list. Is 'Lèse majesté' the definiton of your name? Nope.
-
Lèse majesté over 13 years@Litso: You should read the W3C's own specs on
DL
before you decide what it's good for or not good for. -
Såm about 13 yearsSpot on John! I will never understand why and how I managed to use TABLEs as layout during 1996 ~ 2006... and now that I use DIV instead its an entire different (better) experience altogether! Wish I had read your answer back in 1996 :)
-
Evan Plaice about 12 yearsThere 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.
-
Forrest over 10 years@JohnConde See here: webmasters.stackexchange.com/questions/53695/…
-
Parthian Shot almost 10 yearsIn case anyone's still paying attention to this, contact info should go in
<address>
tags now. BecauseHTML5 == awesome.sauce
. -
Parthian Shot almost 10 years@Kzqai Well... Any contact info for the author so long as it's name and internet contact info and not a postal address.
-
Kzqai almost 10 years@ParthianShot Actually, <address> should only contain article author contact info or site owner contact info, but postal addresses matching those descriptions are actually fine. html5doctor.com/the-address-element (just take note that neither html5doctor.com nor the spec write the rules very understandably about using postal addresses)
-
Parthian Shot almost 10 years@Kzqai Ah... whoops. For correcting me, you get a +1. And, since the spec is short enough to just quote here for posterity, here it is:
The address element provides contact information for a document or part of a document. Information provided by address may include the names of the document’s maintainers, links to the maintainers’ Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The address element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.
-
I Capulet over 3 yearsAnd in terms of SEO, Google loves tables when it contains tabular data. Hell, they have an initiative for treating tables as datasets: blog.google/outreach-initiatives/google-news-initiative/… .