2

There are lots of people out there asking "why shouldn't we use tables for structuring our HTML" and while a lot of answers come in, I rarely see anyone being converted to the world of semantics. That said, I've yet to see any convincing rebuttals to support the rationale for why we should (or might) use tables.

Anyone care to offer a rationale for when tables are valid structural markup?


Nov 7, 2008

Considering that this question didn't go away like I thought it would, I suppose I'd better clarify my question and explain its existence.

Through frustration having read the "tables are easier" argument once too many times following the "DIVs vs. TABLEs" question I wanted to expose the question a little more and not let the table lovers get let off the hook so easily.

Each to their own others might say, but I'm forever being given some application to put on our sites that's been created by some 'tables are easier' developer that dumps a chunk of crappy HTML into my pages, and to be honest, I'm just not seeing enough of the table lovers listening to the arguments.

Anyone use Mambo back in the day? Anyone had to take a bash at putting a design on the top of Microsoft's Sharepoint? Having to fight your way through all that nested table crap was hell, and considering that it was written by some bloody good coders annoys the heck out of me. Reasonable semantic markup has been around for long enough that there should be no reason for developers to still be championing "tables are easier". Tables are not easier - they are lazy!

My question deserved the negative rep for the negative manner in which it was presented, but I'm still waiting for people to accept that the only reason they use tables is because THEY DON'T KNOW HTML. Because if they did, then they'd understand, as jjrv says, that tables are for tabular data.

3
  • 2
    Please ask questions that can be answered, not just discussed (from the Ask Question page) Commented Sep 18, 2008 at 19:45
  • I agree with @AviewAnew -- this question is weird, given your answer to this exact same topic yesterday.
    – delfuego
    Commented Sep 18, 2008 at 19:52
  • I've seen this a lot cruising the bottom-level questions: your question inspired great responses (some of which got up to +13), but got canned at -6. Please upvote this poor question! Commented Dec 27, 2008 at 20:57

9 Answers 9

16

Tables are valid when you have a table of data. I've seen interactive grid widgets where they go out of their way to use a bunch of divs to avoid the dreaded table tag. When it's tabular data, make it a table.

A more controversial view of mine is that when you have problems dealing with vertical layout issues in CSS, you can just use a table and often resolve it immediately. Not as pretty as it ought to be perhaps, mixing content with presentation, but it gets the job done and avoids CSS hacks to get around IE.

6

RE: Why tables?

Because some people are (still, after all these years) afraid of change. They've heard that using semantic HTML is a good thing (and don't usually fully grasp the concept). So they try to put together a layout using CSS having never done it before. They run into a few (well documented, and usually easy to solve) issues, throw their hands up, and go running back to tables.

They then decide that CSS is 'too time consuming' ("I'm not willing to spend the time to learn it") or 'not practical' ("I don't get it. It's too hard") and that tables are the only true way. Through stubbornness and ignorance, they believe their own bullsh!t and convince their clients and peers.

And their world remains happy and unchanged, fading further into the past and deeper into obsolescence*

And that's "why tables". The end.

(*except that they are well suited for coding HTML emails)

3

Tables are for developers who can't be bothered to fiddle for hours with CSS to get two adjacent columnesque divs to expand to 100% height and width regardless of content, and then get the hack to work in all browsers without adding extra div wrappers and then finally in absolute frustration they resort to the 5 second fix:

<table width="100%">
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr>
</table>

The hard truth is that most users (excluding those using screenreaders) really don't care how the page is marked up, as long as it loads quickly.

Developers have budget and time constraints and "good" CSS and markup takes time.

The fact that there are a multitude of resources on the web explaining in great laborious detail how you can line up two divs to replace that simple table, says quite plainly to me that this design is inherently as flawed as tables. How many tutorials are needed to explain how to add a table with two columns to a page?

HTML5 should bring us all some sanity with the new header, footer, section, nav and aside tags. Example taken from Nettuts+:

<div id="content">
    <div id="mainContent">
        <section>
            <!-- Blog post -->
        </section>
        <section id="comments">
            <!-- Comments -->
        </section>
        <form>
            <!-- Comment form -->
        </form>
    </div>
    <aside>
        <!-- Sidebar -->
    </aside>
</div>

and then this for the CSS:

#content {
    display: table;
}

    #mainContent {
        display: table-cell;
        width: 620px;
        padding-right: 22px;
    }

    aside {
        display: table-cell;
        width: 300px;
    }

Those of you with a keen eye will love the sense of irony, when you notice that the CSS has the properties: display: table; and display: table-cell;.

Tables are back baby! Snuck in through the HTML5 back door ;-)

1
  • display: table and display: table-cell are nothing to do with HTML5, and have been around for quite a while (though not well implemented).
    – Matt Sach
    Commented Aug 29, 2012 at 11:12
1

Using modern semantic markup is much easier when you're adding features or fixing bugs or changing the look of a data-driven web site. Adding AJAX features or any kind of interactive scripting will work much better with DIVs and CSS than with TABLEs.

Moving to a content manager like Drupal, Joomla, WordPress, or the like will be much easier if you're already organized with semantic markup, too.

The newer browser editions will also support modern markup more efficiently and your site will display faster. Rearranging all those tables can result in slow display times.

On the other hand, tables are here to stay. Some people will continue using them and browsers will continue displaying them. There is nothing inherently wrong with non-semantic markup if that's what you want. A completely static site that will never be changed can run as well with tables as with modern markup.

As for valid structural markup, there is this: Tables are a great way to display tabular data, like database or spreadsheet tables. They are not really valid markup for anything else.

1

DIV-based layouts suffer from limitations. Without tables it is essentially impossible to implement a two column layout that grows properly based on the height of the content.

1

An interesting note is related to highly complex JavaScript applications. If you pick apart Gmail or Google Calendar with Firebug, you'll see that tables are used extensively, even for layout. Granted, these are usually dynamically generated but this goes to show that in rare cases some very visually complex interactive user interfaces are extremely difficult to build using only DIVs.

0

Tables are supported even in crusty old HTML v1.0 browsers. If your target market includes people using embedded browsers in mobile phones from the 1990s, that might be a good reason to go with tables.

Lots of existing auto-generated HTML uses tables. If your code needs to interact with or include those tables, it'd be better to go for consistency.

2
  • Tables weren't added to HTML until HTML 3.2.
    – Jim
    Commented Sep 18, 2008 at 19:46
  • The whole point of semantic markup and CSS is that your page will still make sense, even in a crusty old HTML v1 browser. Tables will just give you inconsistencies and nightmares. Nice headings, paragraphs and such will give you a nice structured pae that makes perfect sense.
    – roryf
    Commented Sep 18, 2008 at 20:31
0

i would say jjrv is right in that tables are excellent for tabular data, going out of your way to make something "work" like a table instead of just using a table is borderline retarded.

if you care about standards, and moving toward a solid implementation across all browsers then most of your markup should be in table-less liquid layouts... and your tabular data is in.. you guessed it tables!

if you need to cater to really old browsers, that is before the dreaded ie6 then you will have lots of problems in css, and given current usage statistics its pretty safe to assume that everyone will have a "modern" browser that supports css layouts.

all this said and their are times when your banging your head against the wall on a layout and you want/do say f___ it through it in a table and it works. I would hope this is a deprecated practice, but in a clinch this does give predicable results.

0

Use tables for lowest-common denominator html or for tabular data where it makes sense to span across columns or rows. Otherwise css layouts are much less verbose and much easier to maintain once you get the hang of it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.