What is Tabular Data

Monday, June 9th, 2008

If you have looked on any site about design in the past couple years you will hear the cries from the purists who shout ‘Tables are Evil. Do not use tables for design! Everything must be in positioned divs.

This, however, is not entirely true. Ok, it’s not true at all. Tables are great. They have uses. The only proof I need for this is that tables as of HTML 5.0 are not deprecated. Well, not entirely deprecated.

The deal is this. In web design the common practice is to put your design in a table. It’s easy, simple, and gets the job done. A common two column site would look like this.

<table width=”770″ height=”100%” cellpadding=5 cellspacing=0 bgcolor=”#FFF”>
<tr>
<td colspan=2><h1>My site’s name</h1></td>
</tr>
<tr>
<td width=”140″>
<br><a href=”LINK”>Link Text</a><!– the rest of this is the side column
</td>
<td width=”*”>
<p>This is my content. I talk here and put my ad copy and stuff here.
</td>
</tr>
</table>

Now, there are a few things wrong with that code right off the bat without it even being a table.

  1. There is, and never has been, a height attribute for a table. If I’m wrong and once upon a time there was a height attribute for tables it has been long gone ages ago. Internet explorer will parse it as if there were, but any HTML compliant browser will say ‘uh, what are you doing?‘. You simply can’t put height in a table.
  2. While on the subject of the height attribute, it has been deprecated for all tags that did at one time support it. So no matter what, anywhere, in any design it is now considered bad form to put a height attribute in the tag. You are supposed to put it in the CSS.
  3. The same applies to the width. Tables did at one time support width but this is deprecated now. It works fine, as any designer will tell you. Deprecation simply means you are no longer supposed to do it. That goes for the width attribute in the TD tag as well as in the TABLE.
  4. If this is an XHTML document the 2 in the colspan must be in quotation marks (“). It won’t be compliant without them.
  5. Cellspacing, Cellpadding, and Bgcolor all all deprecated. The idea behind all this deprecation is that you are now supposed to use CSS to do the bulk of your designing. They all work fine, as browsers are meant to be backwards compatible, but if you are looking to maintain standards then don’t use them.

Those all aside, this table, as a whole, is deprecated. Not the tags, the tags are fine. It’s using tables to layout your website that is deprecated. In the defining for HTML 5.0 there is a note.

HTML RFC

we need some editorial text on how layout tables are bad practice and non-conforming

W3, the organisation that developes and maintains the HTML standards, has adopted DIV tags as the standard for marking up a website. Why? Standards, accessibility, and above all else – Design. It’s what the div was created for.

The proper use for DIV is a block element designed for containing elements. According the the HTML 5.0 RFC.

The div element represents nothing at all. It can be used with the class, lang/xml:lang, and title attributes to mark up semantics common to a group of consecutive elements.

Basically, DIV does what a table cell used to do. By use of CSS it can be positioned where it is meant to be and because it is free of a table’s framing it can be easily repositioned and placed elsewhere, changed, or removed.

However the freedom of a DIV, unfortunately, also leaves the it open for massive abuse. Many designers have replaced masses of nested TABLES wit
h masses of nested DIVs. Bad design is not changed simply by using a different tag.

The overall skope of this though is that TABLE is not to be used for laying out content in a website. That isn’t the table’s purpose. There are other uses for tables and I want you to know that you don’t have to be afraid to use a TABLE. The only thing you need to know is when to use it.

Purists will cry ‘do not use tables,’ and so many fledgling designers will take this and run with it to the point that the meaning is lost. If you hear someone say that, they’re wrong. The correct saying that you will hear experienced designers say is more simple, accurate, and to the point.

Tables are used for tabular data.

It’s that simple. The hard part is figuring out what tabular data is. Do I use a table for this, or that? To determine this you have to ask youself what data you are printing and how that data is to be represented. For instance, a list of people would be best placed in a list.

  • SuperMan
  • SpiderMan
  • BatMan

<ul>
<li>SuperMan</li>
<li>SpiderMan</li>
<li>BatMan</li>
</ul>

But what about a list with corresponding data? That, ultimately, would be best for a table.

Superhero Powers
Superman X-Ray Vision, Flight, Super Strength
SpiderMan Shoots Webs, Climbs Walls, Can sense danger.
BatMan Awesome gadgets, super rich, has a butler

<table style=”border: 1px #000 solid; padding: 1px;”>
<tr style=”text-align: center; font-weight: bold;”>
<td>Superhero</td>
<td>Powers</td>
<tr style=”text-align: center; font-weight: normal;”>
<td style=”border: 1px #AAA dashed; padding: 2px;”>Superman</td>
<td style=”border: 1px #AAA dashed; padding: 2px;”>X-Ray Vision, Flight, Super Strength</td>
</tr>
<tr style=”text-align: center; font-weight: normal;”>
<td style=”border: 1px #AAA dashed; padding: 2px;”>SpiderMan</td>
<td style=”border: 1px #AAA dashed; padding: 2px;”>Shoots Webs, Climbs Walls, Can sense danger.</td>
</tr>
<tr style=”text-align: center; font-weight: normal;”>
<td style=”border: 1px #AAA dashed; padding: 2px;”>BatMan</td>
<td style=”border: 1px #AAA dashed; padding: 2px;”>Awesome gadgets, super rich, has a butler</td>
</tr>
</table>

The same holds true for something like a calendar. The HTML code for the calendar here at Foponet is in a table. A calendar is clearly tabular data. Always.

Now for the reason I write this post. Antonio Lupetti of Woork wrote recently about how to layout a form using CSS rather than tables. In his post he stated he usually used tables for this but some readers of his blog wanted to know how to use CSS.

Article: Clean and pure CSS FORM design

Now, I have to hand it to Antonio, his code for the CSS Form is clean and beautiful. Its a real piece of art, and I recommend you check it out, but forms are also tabular data. You can use them there without fear, although I might take a note from Woork and try out a CSS version is some designs.

A table is basically a box with rows and columns. The general rule is this. If your data is a row then use a block element like a P (paragraph) or a BLOCKQUOTE (blockquote). If your data is a column then use a list like UL or OL. But if you’re trying to lay out data in a way that resembles a table – with rows and columns – then use a table. Just don’t use a table to layout your entire site. It’s bad form.

Whitespace Graphic
Quick Buttons Navigation
Tabbed Buttons Navigation
Subscribe to Four Points Cardinal's RSS Feeds Foponet Services F.A.Q. Traffic Exchange Mods Open Source Contact Me About Me FopoNet Blog