HTML5 and Tables for Layout

HTML5 Tables Can Be Used for Presentation or Layout

For years, I have been quoting the HTML 4 specification which states:

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 because of this, I have been recommending that web designers not use tables for layout.

But HTML5 Accommodates What is Really Happening, Not Just the Ideal

HTML5 comes along, and one of the goals of this specification is to codify what web developers are actually doing rather than just the ideals of an HTML specification.

And if you've followed any of the many many many comments I've received from webmasters over the years, you know that there are both a lot of people who still use tables for layout and that there are strong feelings on both sides.

The HTML5 specification still recommends that you don't use tables for layout, but if you do, you should differentiate those tables from tables that are used for tabular data. According to the HTML5 specification:

Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. 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.

In other words, while it's still not a good idea to use tables for layout (for accessibility, speed, and SEO reasons), if you want to you can and have it be valid HTML under the HTML5 specification. All you have to do is indicate to the browser that the table is a layout or presentation table, rather than a data table.

How to Indicate a Table is for Presentation or Layout

The easiest way to indicate a table is for layout is to use the border attribute on your table with a value that isn't technically conforming to HTML5:

<table border="0">

The HTML5 specification says that the border attribute can have two values: 1 and blank or "". By saying border="0" you are giving the border a non-conforming value that tells the browser that this table is not being used for tabular data, but for presentation.

You can also use the role attribute to say that the table is for presentation:

<table role="presentation">

There are other ways to indicate that a table is for layout as well, described in the (non-layout) table below.

This Doesn't Mean I Recommend Going Back to Tables for Layout

Tables still make web pages less accessible and more difficult for search engines to spider. They also tend to be larger than the same design done with CSS. But if you have legacy pages with tables for layout, you don't have to spend as much time converting them to CSS when you're doing your HTML5 conversion. Just add the role attribute and move on.

Features to Define Your Table as Layout or Non-Layout

Feature of TableIs a Layout Table?
<table role="presentation">It probably is a layout table
<table border="0">It probably is a layout table
<table cellpadding="0">It probably is a layout table
<table cellspacing="0">It probably is a layout table
Use of the CAPTION, THEAD, or TH elementsIt probably is not a layout table
Use of the headers and scope attributes on the TH elementIt probably is not a layout table
<table border="">It probably is not a layout table
<table border="1">It probably is not a layout table
Visible borders set with CSSIt probably is not a layout table