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?

  • Extensively discussed on SO stackoverflow.com/questions/83073/… Nov 29, 2010 at 15:35
  • 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, 2012 at 8:54

7 Answers 7


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?

  • 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, 2010 at 16:02
  • 20
    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, 2010 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/… Nov 30, 2010 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. Dec 1, 2010 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. Apr 8, 2012 at 6:17

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.


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


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


My recent experience is Google de-prioritize images in tables.

I've been slowly rewriting pages, among other things replacing tables with grid containers. Both the old and new pages are indexed by Google. If the TD element contains only an image, searching for it using the alt text doesn't bring them up. For images in TD element that also contains text, I have to make a more specific query, e.g. the alt text and my domain name. No such problem with images in grid containers.

Seems logical to me Google algorithms assume people are more interested in content appearing in, say, a paragraph or a figure than in a table cell. Sad side effect is pages not updated for a long time (deprioritized compared to new pages) would take a negative hit due to using tables for layout. Its like the red queen quote from Through the Looking Glass - in the land of Google search results, it takes running just to stay in place.


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.


I use tables for web design structure in liquid mixed with fixed and I know many says tables are for noobs others says they are for old school guys those always says DIVS are the best but the truth is that tables are better for some thing and DIVS for other thing.

What is better a <br> or a <p></p>? The same thing

Me and my old tables in my new 2015 web design can kick butts to anyone with my friendly mobile 100% width mixed with 2 side columns 200px each.

Obviously inside tables is ugly to put more and more tables, that's where DIVS comes handy. Tables can do things divs cannot and divs can do things tables cannot.

Those saying default table layout is fixed? I give you an example

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>

Do you see the potential now? Take a look to it on PC and cellphone. Ah yeah and I don't even need bootstrap.

Now to do the same with divs you have to write a lot of CSS code to display align float and crap. Who wrote less code? Me! What does customers need? A guy ending a page in 1 year or in 1 month ?

Now lets improve the design with divs

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

So beautiful a 5 columns design layout using divs and tables.

Your answer is: they both together work better and is faster and it will look good on any design even on TVs and small cellphones.

  • <p></p> is not the same as <br />. Try styling the content of a paragraph with <br />.... Tables are for Tabular Data.
    – davidgo
    Feb 12, 2023 at 23:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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