Solution 1 :

There is no reason to define layout to exclude tables so that tables aren’t used for layout. Those aren’t the same thing.

Like it or not, layout is the placing of elements on a page or screen. The term comes from when pieces of type, photos, rules (lines), and other elements were pasted into position on a layout sheet that was printed with grid lines. You literally laid out the page.

The reason to avoid tables is because there are better ways in HTML to arrange elements, namely, cascading style sheets, which include grid and flexbox.

Long ago, wax replaced rubber cement for laying out newspaper and magazine pages. Wax was was a lot less messy, easier to apply, and didn’t require thinner that made people high and gave them headaches. Using CSS is exactly the same. Tables are messy and give you headaches. They lock the content into a rigid layout that can’t adapt to changing screen sizes.

One of the primary rules of web design is don’t hard-code the styling into the HTML content — CSS separates style from content, and that’s why it’s the right thing to use.

Solution 2 :

I propose a definition of “layout” that cannot functionally include <table> elements:

“Layout” as it pertains to a web page is any visual element whose horizontal children can become vertical upon screen resizing, and vice versa (think responsive elements, i.e. Bootstrap).

<table> elements will never fit this definition, because table rows can never become horizontal, and table cells (of a given row) can never become vertical.

Problem :

I’ve been tasked with explaining to a few colleagues why you shouldn’t always use <table> elements for positioning things in HTML. There are a lot of places on the internet where it says you shouldn’t use <table> elements for layout but none actually provide a definition for what “layout” is. So, it’s easy to tell someone “don’t use tables for layout” but if we don’t actually provide a working definition of “layout” that cannot functionally include <table> elements, then what’s stopping that person from coming up with their own definition?

Here’s one definition of “layout” from (

Page layout is the part of graphic design that deals with the
arrangement of visual elements on a page.

The problem with this definition is that <table> elements can indeed be used to arrange visual elements on a page, so it is confusing to beginners when they’re told they shouldn’t use <table> elements–the definition itself doesn’t seem to exclude them, so why not?

Here’s another assertion from that you shouldn’t use <table> elements for layout, but it fails to define “layout” (

The <table> element was not designed to be a layout tool! The
purpose of the <table> element is to display tabular data. So, do not
use tables for your page layout!

Once again, what is “layout” to a beginner? Technically, everything on the page could be considered layout, even the tabular data parts, since tabular data can also be presented using <div> elements. Therefore, saying “don’t use tables for layout” means nothing and isn’t helpful, because layout is everything on the page (even tabular data is layout; it’s data displayed in a tabular layout).

In closing, I’m curious if there is a definition of “layout” that cannot be interpreted as being anything on a web page. If there is no definition, perhaps we can formulate one here.


Comment posted by Pershing

@Alohci you’re right–which is why I think it’s silly to say “don’t use tables for layout”–it means nothing because layout is everything on a page (tabular data is data presented in a tabular layout, etc)

Comment posted by CSS Tables spec

The real question here, “why shouldn’t we use tables for layout” is because CSS does not define how tables should be handled layout-wise. There

Comment posted by user8356

I don’t think it’s any one kind of problem. Accessibility is a concern, but It’s not the only one. Tables are a maintenance problem, troubleshooting problem, adaptability problem, editing problem, and styling problem.

Comment posted by Pershing

I think this is missing the point–in your example, wax replaced rubber cement. However, tables haven’t been replaced (there is still a use for them). Also you say tables and layout aren’t the same thing–regardless of whether you should or shouldn’t use tables, tables can in fact be used for layout so there is by definition no distinction. A div is layout, a span is layout, a footer is layout, etc

Comment posted by user8356

Yeah, a footer is not a layout. It’s an element that gets laid out. A layout is the whole thing. You lay out a page by putting all the elements in place. Yes, there are parts that have their own layouts, but don’t confuse a div with a layout, or a table within a page as “the” layout.

Comment posted by TylerH

This is a completely nonsensical definition of the term with no supporting evidence as to why it was chosen.

Comment posted by Pershing

@TylerH the evidence is in its logic; you can’t turn a 3×1 table into a 1×3 table using CSS, but you can with 3 inline divs, making the statement “don’t use tables for layout” easier to understand, since you

Comment posted by TylerH

There is no logic in defining the word ‘layout’ in terms of whether an arbitrary object within can be rotated 90 degrees. Also, you can turn a 3×1 table into a 1×3 table with a little effort and some media queries.