HTML5 Allows Tables for Layout

If Someone Tells You That is Invalid, They are Incorrect

I’ve been writing HTML since 1995, and in that time various techniques and tools have come in and out of style. But one that has been especially troublesome is the idea of using tables for web page layout.

Back in the late 1990s, there weren’t a lot of ways to lay out your web designs. You could use the single-pixel GIF trick to add spaces, and you could ignore layout and hope the browser displayed your content in a legible way. So when tables became available in HTML, many designers (including myself) leapt upon them as a gift from the heavens. Finally there was a way to create layouts with fixed widths, specific placement of elements, and more. Web page editors made them really easy to create—even if you used tons of embedded tables to get exactly the look you wanted.

Soon, nearly every web page with any attempt at design was built with a <table>.

But HTML4 came out and said:

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

And nearly every web designer who used tables for layout let out a scream of frustration. While I believe that CSS isn’t terribly hard to learn, many people have found it very difficult. And layout is particularly challenging. But for several years, we struggled and strained to learn CSS for layout and stop using tables for that purpose.

HTML5 Changed the Rules

According to the HTML5 specification, while tables for layout is not recommended, it is a valid way to design web pages. You just have to make sure that you indicate that the table is a “presentation” table, not a data table. Specifically:

“If a table is to be used for layout it must be marked with the attribute role=”presentation” for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.”

How to Use a Table for Layout in HTML5

In order to indicate that your tables are layout or presentation tables, rather than data tables, you can add one of two attributes:

  • role="presentation"This is the most compliant method, and is what the W3C recommends. But it requires that you change every web page you have written to include this attribute.
  • border="0"This attribute also indicates that the table is a presentation table, because most data tables include borders. Plus, most layout tables do not use borders, so you shouldn’t have to change anything on your pages.

There are other ways to indicate a presentation or data table:

Table Feature Type of Table
<table role="presentation"> Presentation
<table border="0"> Presentation
<table cellpadding="0"> Presentation
<table cellspacing="0"> Presentation
Use of the CAPTION, THEAD, or TH elements Data
Use of the headers and scope attributes on the TH element Data
<table border=""> Data
<table border="1"> Data
Visible borders set with CSS Data

I Don’t Recommend Tables for Layout

Tables cause problems for web pages. They can be slower to load. They can be difficult for search engines to parse. And they mix the content and design, which is more effective when it’s separated.

I would recommend using tables for layout for your older pages, but as you redesign and rework pages, you should consider converting to CSS layout.

3 thoughts on “HTML5 Allows Tables for Layout

    1. Hi Dave,

      That’s a great question, and deserves more than just a comment answer, so I’m working on a post that discusses this in detail. But in the meantime, here are some of my favorite tools:
      – WordPress – I use this for most of the sites I build and maintain because it’s easy to use and lends itself to many different types of sites.
      – Komodo Edit – this is a free text editor that I use to write all my articles, blog posts, and more. I often have to then convert the documents into something more formal like a Word Document or blog post, but Komodo Edit is where I start most projects.
      – Macaw – this is a web design tool that I love to use for working on new responsive designs.
      – Dreamweaver – I also use Dreamweaver for RWD, but not as often as I used to.
      – Chrome – I test everything in Chrome first and then move from there to other, less standards-compliant browsers
      – Photoshop – I edit most of my images in Photoshop to keep them as small as possible.

  1. I agree, there are far too many people dogmatically saying you must never use HTML tables for presentation rather than tabular data.

    In an ideal world, all browsers would support CSS3 flexible boxes, but in the real world, they don’t. And we have to design for the real world, so we have to design for the browsers that are actually being used, not the ones we would like to be out there. And the reality is that IE8 is going to be with us for some time yet, so designers of websites for the real world are stuck with not using CSS3 flex boxes for the foreseeable future. The very fact that CSS3 introduced flex boxes is an obvious indication that CSS2 specifications were lacking a good alternative to HTML tables.

    I have seen many methods to make CSS2 imitate tables, but they can often end up being no better than the hacks we used to use for IE6, etc. For example, the CSS text-align: justify is often used to align css divs, when the text-align is semantically intended only to apply to text.

    I do always try to avoid HTML tables for presentation if I can do it easily with CSS2. And I have used the text-align: justify to align divs. But if trying to emulate a table ends up with anything more than a few simple HTML and CSS workarounds, then I have to face the fact that it is coming to the point where the attempt to emulate a table is becoming counter productive, and instead, I use a HTMl table with role=”presentation”. Otherwise the claimed benefits of separation of semantics and content, and ease of alteration by CSS disappear, and the “don’t use tables for presentation” becomes a mantra without logical justification.

    As a case in point, I don’t think that there is any sensible alternative to using tables when, within a div that contains content, you want to include content that consists of three elements where the two side elements are fixed sizes and the central element expands to fit the remainder – and it contains a single line of text that you want centered. And where it degrades gracefully if the central element becomes very small. With a table it’s simple. Try doing that in CSS without using CSS3 and you end up with a big bunch of unwieldy code.

    Until the vast majority of browsers actually being used are CSS3 compliant, the reality is that there is no reason not to use HTML tables with the attribute role=”presentation” if there is is no sensible CSS2 alternative.

Leave a Reply

Your email address will not be published.