Categories
css html

Why not use tables for layout in HTML? [closed]

665
votes

It seems to be the general opinion that tables should not be used for layout in HTML.

Why?

I have never (or rarely to be honest) seen good arguments for this. The usual answers are:

  • It’s good to separate content from layout
    But this is a fallacious argument; Cliche Thinking. I guess it’s true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?

    Perhaps me or my fellow developers who have to maintain a web page care… Is a table less maintainable? I think using a table is easier than using divs and CSS.

    By the way… why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs.

  • Readability of the code
    I think it’s the other way around. Most people understand HTML, few understand CSS.

  • It’s better for SEO not to use tables
    Why? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective?

  • Tables are slower.
    An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page.

  • A layout overhaul is easier without tables, see css Zen Garden.
    Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its misuse of CSS.

I am really interested in good arguments to use divs + CSS instead of tables.

8

  • Agreed, tables are fine when presenting tabular data. They should be avoided when using it purely for layout. Then again, sometimes, you have to take the easy road now and improve it later. Just view source and you’ll see what I mean.

    – Haacked

    Sep 17, 2008 at 16:07

  • There is a duplicate Q and A at stackoverflow.com/questions/30251/tables-instead-of-divs

    Sep 17, 2008 at 18:30

  • 11

    The answer is simple: it depends. If tables are used to solve a specific problem that current CSS versions can’t, they are well used. If you start getting tables inside tables, inside millions of tables then you’re doing it wrong. If it’s the ocasional table just to layout some 2 columns or something like that, I don’t disallow it on my team: it’s faster and easier to do it. (Myself, I always try to use CSS, but at the end of the day, delivery is more important than correct semantic HTML)

    – AlfaTeK

    Jan 21, 2010 at 14:48

  • 1

    @Camilo SO still lives in the 20th century. Jeff apparently does not know how to use the ul tag. Have a look at all of the lists on this site (badges, related questions, recent tags). They’re all either single columns or long paragraphs separated with br.

    – Yi Jiang

    Sep 20, 2010 at 12:50

  • 2

    @Brad: Depending on some specific details (that’s my get out for any clever comebacks 😉 that usage of DIVs is STILL better than abusing tables. Two parts of a document that happen to be laid out alongside each other can legitimately be contained in DIV elements, but they’re certainly NOT tabular data. It doesn’t matter what one specific styling happens to be; the content is either tabular or not. Note: I am NOT advocating DIVitis either 🙂

    Nov 1, 2010 at 18:20

495
votes

I’m going to go through your arguments one after another and try to show the errors in them.

It’s good to separate content from layout
But this is a fallacious argument; Cliché Thinking.

It’s not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.

So what? Does my boss care? Do my users care?

Depends. Is your boss pointy-haired? Then he might not care. If she’s competent, then she will care, because the users will.

Perhaps me or my fellow developers who have to maintain a web page care… Is a table less maintainable? I think using a table is easier than using divs and css.

The majority of professional web developers seem to oppose you[citation needed]. That tables are in fact less maintainable should be obvious. Using tables for layout means that changing the corporate layout will in fact mean changing every single page. This can be very expensive. On the other hand, judicious use of semantically meaningful HTML combined with CSS might confine such changes to the CSS and the pictures used.

By the way… why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs.

Deeply nested <div>s are an anti-pattern just as table layouts. Good web designers don’t need many of them. On the other hand, even such deep-nested divs don’t have many of the problems of table layouts. In fact, they can even contribute to a semantic structure by logically dividing the content in parts.

Readability of the code
I think it’s the other way around. Most people understand html, little understand css. It’s simpler.

“Most people” don’t matter. Professionals matter. For professionals, table layouts create many more problems than HTML + CSS. This is like saying I shouldn’t use GVim or Emacs because Notepad is simpler for most people. Or that I shouldn’t use LaTeX because MS Word is simpler for most people.

It’s better for SEO not to use tables

I don’t know if this is true and wouldn’t use this as an argument but it would be logical. Search engines search for relevant data. While tabular data could of course be relevant, it’s rarely what users search for. Users search for terms used in the page title or similarly prominent positions. It would therefore be logical to exclude tabular content from filtering and thus cutting the processing time (and costs!) by a large factor.

Tables are slower.
An extra tbody element has to be inserted. This is peanuts for modern web browsers.

The extra element has got nothing to do with tables being slower. On the other hand, the layout algorithm for tables is much harder, the browser often has to wait for the whole table to load before it can begin to layout the content. Additionally, caching of the layout won’t work (CSS can easily be cached). All this has been mentioned before.

Show me some benchmarks where the use of a table significantly slows down a page.

Unfortunately, I don’t have any benchmark data. I would be interested in it myself because it’s right that this argument lacks a certain scientific rigour.

Most web sites that need an upgrade need new content (html) as well. Scenarios where a new version of a web site only needs a new css file are not very likely.

Not at all. I’ve worked on several cases where changing the design was simplified by a separation of content and design. It’s often still necessary to change some HTML code but the changes will always be much more confined. Additionally, design changes must on occasion be made dynamically. Consider template engines such as the one used by the WordPress blogging system. Table layouts would literally kill this system. I’ve worked on a similar case for a commercial software. Being able to change the design without changing the HTML code was one of the business requirements.

Another thing. Table layout makes automated parsing of websites (screen scraping) much harder. This might sound trivial because, after all, who does it? I was surprised myself. Screen scraping can help a lot if the service in question doesn’t offer a WebService alternative to access its data. I’m working in bioinformatics where this is a sad reality. Modern web techniques and WebServices have not reached most developers and often, screen scraping is the only way to automate the process of getting data. No wonder that many biologists still perform such tasks manually. For thousands of data sets.

12

  • 139

    “changing the corporate layout will in fact mean changing every single page” – Do people still actually duplicate the corporate layout on every page? It’s so easy to resolve with master pages or user controls in .net, include files in php or classic asp, etc … Anybody who copies the company layout like this deserves an a** kicking! 😉

    May 20, 2009 at 14:30

  • 43

    Sorry but this is really “pie int he sky” wishful thinking. Users care? No. Noone cares except a small number of misguided revisionists. HTML (including tables) is far older than the relatively new notion of “semantics vs layout”. Oh and source please for “the majority of professional web developers oppose you”.

    – cletus

    Jun 17, 2009 at 21:48

  • 20

    Typo above: semantics were implied from the beginning. <table> in HTML was always only meant for tabular data, never for layouting (back in the early years you couldn’t change the table looks anyway, thus preventing its use as a layout anchor). In fact, early drafts of HTML had no notion of layout at all, and HTML was never meant for layout, but for structuring text. Even more: the very first proposal of HTML repeatedly warns against abusing tags to influence the layout, and cautions to use logical over physical markup.

    Jun 18, 2009 at 9:11

  • 109

    Get a screen reader and have it read a page with a table layout. that is all.

    Jul 26, 2009 at 16:42

  • 8

    @Sergio: please do not edit out relevant information. This is an unsourced dubious claim I’m using there and I want to make that quite clear. Your edit put a claim in my mouth that I can’t back up, effectively making me a liar if this turns out to be false.

    Aug 1, 2010 at 18:49

289
votes

Here’s my programmer’s answer from a simliar thread

Semantics 101

First take a look at this code and think about what’s wrong here…

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

The problem, of course, is that a bike is not a car. The car class is an inappropriate class for the bike instance. The code is error-free, but is semantically incorrect. It reflects poorly on the programmer.

Semantics 102

Now apply this to document markup. If your document needs to present tabular data, then the appropriate tag would be <table>. If you place navigation into a table however, then you’re misusing the intended purpose of the <table> element. In the second case, you’re not presenting tabular data — you’re (mis)using the <table> element to achieve a presentational goal.

Conclusion

Will visitors notice? No. Does your boss care? Maybe. Do we sometimes cut corners as programmers? Sure. But should we? No. Who benefits if you use semantic markup? You — and your professional reputation. Now go and do the right thing.

17

  • 39

    Sorry, that doesn’t hold water. You don’t use car for mybike because you would define a “bike” class instead. You can’t define something else for “<table>” because it is more than a simple semantic tag — it tells the browser how to render its content as well.

    – Jimmy

    Sep 17, 2008 at 20:40

  • 57

    Nice analogy, and great conclusion. Why should anyone have to be forced by one’s boss and/or users into doing the right thing? Doesn’t anyone take pride in their own work any more?

    Nov 13, 2008 at 9:10

  • 39

    I think this is quite an arrogant post which doesn’t explain anything but just repeats the same claims again without answering the question. I don’t understand why it got so many upvotes????

    – markus

    Nov 16, 2008 at 1:09

  • 10

    I agree with tharkum. This response is rather subjective, and does not actually answer the question posed. While I agree that DIVs should be used for page layout, I cannot imagine that any web designer would be confused by a table-based layout.

    Nov 27, 2008 at 11:33

  • 16

    @tharkun & Richard: How come “semantically incorrect” is subjective and does not explain anything?

    – Vinko Vrsalovic

    Dec 14, 2008 at 17:06

104
votes

Obvious answer: See CSS Zen Garden. If you tell me that you can easily do the same with a table-based layout (remember – the HTML isn’t changing) then by all means use tables for layout.

Two other important things are accessibility and SEO.

Both care about in what order information is presented. You cannot easily present your navigation at the top of the page if your table-based layout puts it in the 3rd cell of the 2nd row of the 2nd nested table on the page.

So your answers are maintainability, accessibility and SEO.

Don’t be lazy. Do things the right and proper way even if they are a bit harder to learn.

8

  • 24

    An often used trick in Zen Garden is replacing text by images, and define that in the CSS, thus making it invisible from HTML. Very, very wrong.

    – GvS

    Sep 17, 2008 at 14:25

  • 3

    I’m sorry but that’s not right. The text is still in the HTML – that’s one of the requirements of a CSSZG design. The HTML has to remain unchanged.

    – erlando

    Sep 17, 2008 at 14:41

  • 10

    If you look closely at some of the designs, the text in some headers is different from the text in the HTML. That’s because the HTML is made invisible, and instead an image is inserted. (Example: csszengarden.com/?cssfile=/212/212.css&page=0, The ?Path? to ?Achievement?)

    – GvS

    Sep 17, 2008 at 15:31

  • 6

    Sorry, there’s absolutely no evidence div layouts are better for SEO. Also, Google themselves have stated that HTML validation doesn’t matter to them – a slightly different issue but one aimed towards tables because they rarely validate.

    Jul 4, 2009 at 23:39

  • “Most of you are familiar with the virtues of a programmer. There are three, of course: laziness, impatience, and hubris.” – Larry Wall

    – inkredibl

    Dec 22, 2010 at 9:54