Using Tables in HTML

Posted by: william in Site Design on Oct 04, 2009

Before we talk about tables, let's dispel the common answer that people will give you when you mention tables. That answer is "Tables are not for content, they are for tabular data. That sounds like a really good reason not to use them then, doesn't it. I mean they are for tabular data and not for content. But that answer just isn't enough.

The ultimate authority in web design/development standards is the W3C. (http://www.w3.org) This is what they have to say. "The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells." Did you see that "Tables allow authors to arrange text" So, what about "tables are only for tabular data". First, what is tabular data? It is "Data maintained in a tabular form" The key word in that definition is data. The table model is not developed as a way for Web authors to manipulate the layout of a Web page or change how it will look with either cells, borders, or background colors. A good definition of data for our purposes is: "Factual information, especially information organized for analysis or used to reason or make decisions."

However, that definition is more than we really need for Web page development. I like to think of it in this way:

Your Contents Are Tabular Data If:

• If what you're going to place on the page is information that would make sense to record or track in a spreadsheet, it is almost certainly tabular data.
• If you're going to have header fields at the top of columns of data or to the left of rows of data, then it is tabular and a table should be used.
• If the contents makes sense in a database, especially a very simple database, and you just want to display the data, and not "make it pretty", then a table is acceptable.

You Should Not Use a Table If:

• The main purpose of the table is to position the contents on the page in some way. For example, to add spacing around an image, to place "bullet" icons on a list, or to force a block of text to act like a pull quote.
• You want to use the background colors or images simply to augment the page, rather than to call out the data. For example, highlighting every other row of a table is fine, but changing only the upper right cells because that makes them match the background of the page is not.
• You are cutting up an image and then placing the image pieces back together on the page using the table. This was very common a few years ago, but is no longer considered correct.

Don't Be Afraid of Tables

It is quite possible to create a Web page that uses very creative looking tables for tabular data and still remain valid and standards-based XHTML. Tables are an important part of the XHTML specification, and learning to display tabular data well is an important part of creating Web pages.

---