Why you shouldn’t use tables for layout. Ever.

HTML table code

I’m ashamed to say that when I first started creating websites, I used HTML tables for layout. But that was a long time ago before I realised how bad they are for accessibility, and the problems they cause for disabled users.

Why are tables bad?

Tables were intended to be used for holding tabular data, and never intended for the positioning of layout elements on your page. This alone doesn’t mean you shouldn’t use them, but indicates a reason that you should use something else. At the end of this article I’ll explain why CSS is a much better solution.

Accessibility

One of the main problems with using tables for layout is accessibility. Remember that not everyone will be viewing your website the way you are. Some people will be using different browsers, sometimes older browsers, sometimes more advanced browsers. If you’re not creating your webpage in a standard way, there’s no way to tell how it’s going to look on different computers.

Most different are blind or partially-sighted users. These might have a browser that reads out the information on the page to them (called a screen reader), and the information needs to be structured in a way that makes the most sense to them, or they might hear nonsense. The way you order content inside a table might look sensible to you, but imagine if the content for that table was being read out, would it still be in a sensible order? A screen reader would most likely read out content in a table the same as the tab order, try pressing tab while you’re in a table and see which cell it skips to next, it might not be a sensible order and could make your site unusable for a blind user.

Page load speed

Webpages using tables for layout take longer to load, it takes longer for the browser to work out where the table should sit on the page. This often leads to the table jumping about on your page or resizing itself while the page is still loading, especially if you’ve nested a table within another.

Tables don’t always print well

Depending on which browser you’re using, webpages using tabular data might not look quite right when you print them out. The best way to control what your page looks like when printed is to specify a print stylesheet.

Use CSS for a better solution

Instead of using tables for layout, using CSS will give you a lot more flexibility and control over the layout of your page. It’ll make your page faster to load and it’ll also make it much easier to update the style of your site in the future.

With CSS you can take a HTML document that has the content in the correct order for screen readers, and apply a stylesheet so that everyone with a normal browser can see your design. You also have the flexibility to provide different stylesheets for different browsers (if you need to), including showing a different stylesheet to mobile users who have a much smaller screen.

Tables still have their place

Of course, HTML tables were invented for a reason, which is to display tabular data. As long as you use tables for tabular data only, and never nest a table inside another table, you’re using them correctly and as intended.

Check your website with our website testing tool SiteBeam or our free tool Nibbler to check you’re using tables correctly.


Watch quick video tour of Sitebeam

Test your website with

or see prices & plans
  • http://www.red-root.com Luke Williams

    It seems strange to me that this would still be an issue after so many years, but I guess clients may not know the difference.

    If a web developer was still using tables for layout, I’d seriously consider giving them a good smack

  • Ross Ewing

    I guess it depends on the size of the website. If a website receives a lot of visitors then accessibility may become a problem. If its a small website then its not much of a problem.

    CSS may seem daunting to someone new to web development, but its like everything else the more you practice the better you get.

  • http://www.vividwebdesignuk.co.uk Gareth Parkinson

    I have to agree with Luke here in every part of his comment. Yes, any designer or developer worth their salt shouldn’t be using Tables for Layout at all. Tables are for displaying data and nothing more. And I wouldn’t consider them for a smack, they would be instantly greeted with a palm to the chops without chance to explain. Its the year 2011 for Pete’s sake.

    What animal would develop/design a website using Tables for layout in 2011? That’s as criminal as not developing a website with W3C compliance and SEO in mind.

  • Joel

    Agreed Luke, they would need a good slap to the face! I started out with tables too, but quickly moved to CSS. The benefit of having all your content separated from the design and being able to change that design quickly by pointing to a new style sheet is paramount.

  • http://doubleyoursuccess.com Dee Kumar

    Tables has become a thing of the past, especially with open source solutions such as WordPress making website creation so much easier with the use of css.

    I remember a number of years ago where using tables was encouraged, but as with everything the tide changed some time ago.

    Blogging is now essential for both ranking and easy content creation and we encourage all entrepreneurs in our network to make use of css based content management systems within their business.

    • http://www.silktidestudios.com David Ball

      Hi Dee, remember that tables still have a purpose so they’re not a thing of the past. if you mean the practise of using tables for layout then yes, they should be banned to the stoneage!
      I’m not sure blogging is essential, obviously this depends on the purpose of your website and how you attract visitors. Obviously blogging is a great way but it’s not the only way. But if you mean adding regular quality content then yes, that’s a great way.

  • http://www.belmont.uk.com Murray Cowell

    I have only been designing websites for 18 months, but I found CSS very easy to learn. It’s valid code, it’s more elegant and it’s easier to change.

    There’s no excuse for using tables for website layout, they are only for tabulated data. Anything else is just plain lazy.

    • http://www.silktidestudios.com David Ball

      Absolutely agree!

  • JOKe

    the thing is that tables ROX… and every developer will tell this … this float left clear etc things are crap you spend so many time on them when you can just create a table for 30secs. Thats what most developer thing and thats what I think as wel.. common rendering this page will invoke many many sql queries it will generate so many things and it will invoke some jquery at the end really the rendering of the HTML layout is an issue ? :) really ?

  • http://www.silktidestudios.com David Ball

    Hi JOKe, unfortunately I doubt you’re qualified to speak for ‘every developer’ in the world, and if you actually started talking to developers some of them might tell you that tables might sometimes be easier and quicker, but like I’ve stated in the article, it’s not the right way to use them and there are many reasons why you shouldn’t.

    Using floats is now common practise and is a part of current web standards. If you’re not using web standards then I think you’ll find it extremely difficult to get a job as a professional web developer.

  • JOKe

    David : I agree that using CSS is better I agree that it gives more flexibility but it is slower, you agree right ? also sometimes it creates a mess lets say you have the best layout a form layout with labels and fields in 2 columns and submit on the right bottom part but not bellow the form instead starting from the second column and continues the all way to the third column (yes there is no third column) and then the PM came and say yeah we think in english the labels are usually small so in english we want 3 columns instead of 2 and the submit should start from 3th to 4th BAM BAM in table layout – 1min ? in css layout …. ? 1 hour ? more ?

    dont get me wrong I agree that everyone should use CSS but this is not happening because most people are “rushing” and most frontend developers dont care about the CSS we have too match Ajax, JavaScript, JQuery and Controllers stuff to thing about and we(ok I ) dont usually care about the layout.

  • http://jolene.sourceforge.net Dan Howard

    “Tables were intended to be used for holding tabular data, and never intended for the positioning of layout elements on your page”

    Wrong: http://www.ietf.org/rfc/rfc1942.txt

    BTW neither was CSS. Cascading STYLE Sheets != LAYOUT. Tell me how does a LAYOUT Cascade?

    “Page load speed” Tables generally render faster than CSS mainly due to all the script hacks still required to support various browsers.

    Tables are highly compatible across all browsers.

    Table layouts are easy to debug (border=1)

  • JOKe

    Dan Howard true true … (respect)

  • http://www.silktidestudios.com David Ball

    JOKe, creating CSS to layout your content properly might take some time agreed. But using a table is a quick and dirty solution. Using CSS as a solution has many benefits that outweigh the quickness of sticking a table in. Michelangelo didn’t paint the Sistine chapel with a big spray gun, he took his time and did it properly, and there were benefits to doing it properly.

    Dan you might have got me on a technicality, I haven’t read the original spec of HTML tables from 1996, but here’s what the WCAG guidelines have to say about the use of tables:

    “Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]
    Note. Once user agents support style sheet positioning, tables should not be used for layout.”

    You can read this for yourself here. http://www.w3.org/TR/WAI-WEBCONTENT/

    Also their guidelines on using tables specifies:

    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.

    You can see this here: http://www.w3.org/TR/html4/struct/tables.html

    One thing that is true though Dan, tables are highly compatible across all browsers. Because they’ve been around a long time they are very compatible with older browsers and I’ve never had problems with them displaying incorrectly. As browers mature though and they start to adopt better web standards, so will CSS and we’ll live in a golden age where all browsers render things correctly!

    Maybe I’m hoping for too much :-P

  • http://hz2.org/ Hui Zhou

    I second JOKe.

    Before this table banishment trend, the web was infested with table layers like onions and stinks badly. That has a lot to do with the burden of html syntax but mostly due to bad practice that populated by the same people that today banishes tables just because most others do.

    I have seen many beautiful clean design that uses a few tables that is easier to maintain than a pure CSS alternative.

    By the way, you can apply css to tables and you should.

    And since we are on it, what we really need to hate is the current restriction of web environment that forces you to use html and wrap every function under the http protocol and force the practice of less optimum as a norm upon us.

  • http://www.binaryfold4.com Jake Noble

    @David Ball – Good article, nothing new there for me but nice to see what I already know reinforced. The most important here for me is page speed, accessibility and print might be rarely noticed but page speed will affect us all at some point, especially on mobile devices.

    @Dan Howard, @JOKe – your way off the mark guys. Using tables for layout and even forms is lazy and unprofessional. It may be quicker but that doesn’t mean you should use it, especially when it can negatively influence user experience.

  • http://studiomagnolia.com Cesare

    Not too much trash on tables. I agree with everything written above, but in case of html newsletters tables are the only solution.

  • http://hz2.org/ Hui Zhou

    Reading some of the comments and see some new reasons for banishing tables: not to be “lazy” and “unprofessional”.

    Laziness is a virtue, it is what drives innovations. But it shouldn’t be confused with lowering goals.

    To be professional is what shapes the community. People learn and practice what to get jobs. Nothing wrong there, but it is not right to believe you are right because you meets the jobs. Only those who don’t worry about their jobs drives the front of technology.

  • http://www.silktidestudios.com David Ball

    Thanks Cesare, yes unfortunately email software still hasn’t has progressed to using Web Standards, so if you want to make interesting HTML newsletters you still have to use HTML tables for layout, and (heaven forbid!) even nest tables into other tables!

    I worked on a HTML email newsletter last week and had to use tables for layout. I felt a bit dirty doing it because I know how bad it is for accessibility. But it wasn’t so bad, because the campaign I was sending out had a plan text alternative, so I knew that if anyone receiving the email had accessibility problems they would choose to read the plain text version instead.

  • http://www.silktidestudios.com David Ball

    @Hui I think I understand what you mean to be that it doesn’t matter how you create it, as long as you get the job done right?

    That’s absolutely fine if you’re creating a website quickly and you know that none of the accessibility problems with using tables for layout are going to affect anyone.

    But when you’re a professional web designer your goal might be to create a website that is accessible to anyone, whether they’re an able-bodied person sat at a computer, or using a mobile phone, or a blind person using a screen reader, or an old person with a really old browser. These are the kind of things that you have to think about when creating websites and unfortunately html tables are simply not up to the job to satisfy this goal.

  • http://hz2.org/ Hui Zhou

    Accessibility:

    Ultimately we want to supply different layout and even content to different target, isn’t that what you mean by accessibility?

    If you can supply different content then you can supply different layouts including those use some tables. Of course, your content should be separate from your tables. Tables, even when it is used for data, is a layout. CSS, on the other hand, is a hack to render layout.

    Good content management is supposed to separate content from all layout. In practice, many “professional designer” have trouble to separate content from their table layouts, so they takes the hacks to use pure CSS due to the “laziness” in figuring out the optimum way.

    And take a look at all those CSS that used for layouts, it is full of hacks, and it is very ugly. When you want to express a table-like layout, the optimum way is to express it as a table rather than assign property to individual blocks and let them magically appear like a table. The latter way, is a hack; Clever and admiring, but ugly nevertheless. The html syntax and later xml is very cumbersome. It is a product of an era that sacrifices optimism for compatibility. Tables expressed in html or xml is ugly and difficult to maintain. One of the intermediate solutions is to invent your own succinct way of express your table layout, and then have a script or program translate/compile it into html or xml. It is not optimal, but at lease you get to work in a optimal source. With some good revision control system and make system or IDE, it is not that difficult either.

    Of course, most professional just want to get jobs done and are lazy to seek out the optimum solutions.

  • Dimitrios Menounos

    “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…”

    http://www.w3.org/TR/html401/struct/tables.html

    There you go “arranging forms and form fields” clearly means *layout*. The same could be argued about text, images, links, etc. W3C merely suggests using syle sheets, it does not however renounce tables as a method to apply layout.

    Now before you all crucify me understand, I am not arguing that layout should always be done with tables. I am trying to set straight inaccurate information spread unintentionally.

    Oh and yes there ARE a couple of layout cases that cannot be solved without tables and without extensive hacks. These are mainly columns WITH equal DYNAMIC heights AND vertical alignment. Use the best tool for the job. I rest my case.

  • http://andywaite.me Andrew Waite

    Dimitrios:

    You are citing a document from 24 December 1999. That’s well over 10 years ago. Don’t you think that’s a little bit out-of-date now?

    I challenge you to find anything from the past 24 months from the W3C (or any other reputable organisation) that advocates using tables in that way.

    One thing I do agree with you on is that you should select the best tool for the job. But I simply cannot see a situation where a table is the appropriate tool, except for tabular data.

    Everyone:

    Maybe using a table is quicker at first (although I’d argue an experienced developer could do a HTML/CSS layout in the same time or less) – but semantic HTML and CSS is much easier to maintain in the long run.

    Imagine you have a 2-column layout; with a main column on the left and a smaller column on the right. You decide you want to swap the columns round and have the main column on the right. If you’ve done it as a table, you have to edit the HTML for every single page. With CSS, it’s just a simple case of changing a couple of lines and the change will be reflected site-wide.

    I’m not sure why you’re all so adamant that tables are still appropriate for layout in 2011 – in my view you are just making yourselves look like amateurs.

  • Philip

    @Dan Howard, @Hui Zhou – excellent points.

    @Dave – A religion has been built around the use of just DIVs and the exclusion of tables – when both DIVs and tables have their place. Getting a multi-column layout to play nice using just DIVs still requires some initiation into the black arts.

    Example: Try getting a three column layout to always render all the columns to the exact same height when the length of content in any of these three columns cannot be predicted (that is, the data comes from a db). You will need to use a combination of strange and convoluted mechanism to achieve this. If you want to know how difficult this is, just search for this on the web and you will see a LOT of websites with writeups on how this could be done – because it isn’t trivial to figure this out.

    There is no ONE TRUE WAY of doing HTML design. Anyone who claims this is preaching a religion.

  • Philip

    To add – tables are very, very easy to use – easy to understand, works consistently well across browsers, quite often uses far less markup than the equivalent div-only markup, renders much faster than equivalent div-only markup, and is far easier to debug.

    Chances are that any complex website with a lot of content and design done without using tables can be made faster loading and lighter if a combination of divs and tables are used.

  • http://nasarik.com nasarik

    It confuses me how some web designers/developers are still using tables and insist they are easier to use. I began building sites with tables but found them to be poor for advanced layouts, this forced me to take the leap and learn CSS. The freedom CSS offers has not only made me a better designer, it has also made me more productive.

  • http://www.silktidestudios.com David Ball

    Yes @nasarik I agree that building pages using tables is far too restrictive.

    It’s all well and good people telling you that tables are great because they always look the same in every browser.

    But if this is the biggest advantage of tables, it’s also its biggest drawback. What if you don’t want it to always look the same in each browser? If you’ve got content displayed in two columns of a table it might look great on a computer monitor, but when you’re viewing it on a phone with a smaller screen you might have to scroll horizontally because the content is too wide to fit side by side. If you were styling your page’s layout using a stylesheet you could use a mobile stylesheet to make it drop the second column underneath, but in a table this isn’t possible.

  • http://www.binaryfold4.com Jake Noble

    You need a ‘Like’ button for the comments!

  • Philip

    @nasarik, @David – Try these for size:

    a) Try getting a two or more column layout to always render all the columns to the exact same height when the length of content in any of these columns cannot be predicted (that is, the data comes from a db). Do this without using javascript and using only CSS (no tables). This is a very, very common use case.

    b) @David – Give me a page which uses only CSS (again, no javascript or tables) and which renders a non-trival page (with images, text, lists etc spread across multiple multi-width columns) consistently well across desktop browsers and mobile browsers. Try a page like CNN’s site.

    For b, the approach I would use is to determine what sort of client browser is accessing a page using a backend script (example: php) and depending on that, I would generate the data using a completely different template (using smarty or similar technologies) – without relying on some CSS trickery which won’t work well in the first place and which would be far more restrictive.

    • silktide

      I know this comment was from 2 years ago, but there’s an easy way to solve this now by using the CSS property display: table-cell. It’s not a hack, and is perfect for creating columns with matching heights

  • http://andywaite.me Andrew Waite

    Philip -

    I rest my case: http://andywaite.me/css/columnlayout.html

    It took me about 10 minutes. Tried it in all major modern browsers on Linux, Mac and Windows.

    Yes, it’s a little bit of a hack to get them all the same height, but it works cross browser and is much easier to maintain or change at a later date. And my HTML is semantically correct.

  • http://www.binaryfold4.com Jake Noble

    @Andrew excellent, I can take this page off my bookmarks now you’ve put this to bed.

  • http://www.silktidestudios.com David Ball

    Thanks Andrew yes you’re right CSS can be used to create a columns just like a table.

    The great advantage of using CSS for this is that it gives you many more options later on. For example if you had 100 pages with tables on, and you wanted to swap the order of the columns around so the third became the first, it would be easy to do this in CSS as you can do it by editing one file – your CSS file. But if all 100 pages have the content ‘trapped’ in a table, you’ll have to edit each page individually.

  • Dimitrios Menounos

    @Andrew

    Dear friend, thats nothing but an hardcoded ugly hack, absolutely not dynamic. I would love to see an example with true fluent (dynamic) widths and heights and support for vertical alignment. Here is some help for your quest.

    Now philosophically speaking, it is ironic that absolute positioning and tables, either in html or css “display” form, are the only means designed for layout! Floats were not designed for they are being used today. Delve into any advanced layout manager implementation and you will see what I am saying.

    You might think that I haven’t studied CSS well enough. I assure you that is not the case! I cut my teeth every day with style sheets and I am a strong proponent of semantic design. However I try constrain myself from becoming dogmatic with this stuff and always use the best tools for the job at hand.

    Cheers

  • Philip

    @Andrew Waite

    You have used ugly hacks like this for the .column style:

    padding-bottom: 1000px;
    margin-bottom: -1000px;

    Also, how long did it take you to do this? At least an hour? I have the same thing done using tables – it took me about 5 minutes and didn’t require any hacks.

    If anything your page proves my point.

  • Philip

    By the way, I don’t believe that you did this in just 10 minutes unless you have a used a hack like setting the padding to 1000px and margin-bottom to -1000px earlier.

  • Philip

    @David – if you are going to be using DIVs and not tables for laying out lots of content in columns, you will need to set the DIVs to position themselves relative to each other and floating to the same side – that is all of them will need to be set to float: left (unless you want the columns starting from the right edge of the screen).

    So now if you have 4 or 5 DIVs floating relative to each other to form 4 or 5 columns, what mechanism are you going to be using to take the 2nd column and make it move to the 3rd column using just a CSS div? or for that matter, how are you going to move the 3rd column to the 2nd or the 4th?

    Or to make the question more general, what mechanism are you going to be using to change the order of any column without affecting the display of other columns? And how would you do this consistently across many pages with different designs?

    My guess is that you will need to edit each pages such that the divs come in the right order. How is that better than using tables in the first place?

  • Jason King

    Bullshit, tables are absolutely fine for layout, and they are consistent too and let you get on with designing your website without worrying about floats and divs…

    • silktide

      To create a fast and dirty design (possibly a mockup or a prototype) it’ll be fine. But tables should only be used for tabular data, the biggest reason I’d say is for accessibility reasons.

  • Pawel

    In this blog it’s mentioned that CSS is a better solution. This is quite vague. Should you be using tags or just wrap in tags.

    Interestingly the signup for sitebeam uses a table to create the form http://trial.sitebeam.net/signup/

    hmmm… :)

    • silktide

      True Pawel we don’t go into the specifics of the markup, because that’s up to each individual scenario. You’re right about the Sitebeam trial signup page being in a table, this is an unfortunate hangover from our old CMS. Fortunately though the table is fully accessible and we made sure screenreaders will read this in the correct order, although we admit it’s not ideal and we’ll be improving this asap!

      • Pawel

        Glad to hear that you will be updating your pages to match your suggestions.

        You mentioned that markup depends on the scenario, have you ever found yourself forced to use css tables (ie. display: table), if not how did you work around this? For example, if you had multiple values in a single row, how did you indent cleanly (just margin-left?).

        Well, I actually enjoyed reading this blog quite a bit as it is the first blog that has some arguments for not using tables that differ from the typical “it is good semantics to not use tables”, I know this post is back from 2011, but keep up the good work.

        Cheers

        • silktide

          Yes there are times when it’s useful to use the CSS property display:table-cell, for example when you want two divs to be equal in height.