Tabular Data and the Use of Tables in XHTML

Tabular data is simply the data contained in a table. In HTML, it is the content that lives in a table's cells—i.e., what is between the

or

tags. Table contents can be numbers, text,

, and a combination of these; and another table can even be nested inside a table cell.

The best use of a table, however, is for the display of data.

According to the W3C:

"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." Source: Introduction to tables from the HTML 4 specification.

The key word in that definition is data. Early in the history of web design, tables were adapted as tools to help layout and control how and where web page content would appear. This could sometimes result in poor display in different browsers, depending on how browsers handled tables, so it was not always an elegant method in design.

However, as web design has advanced and with the advent of cascading style sheets (CSS), the necessity of using tables to crudely manage page design elements fell away. 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. 

When to Use Tables to Display Content

If the content you want to place on a page is information that you would expect to see managed or tracked in a spreadsheet, then that content will almost certainly lend itself well to presentation in a table on a web page.

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 content 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.

When Not to Use Tables to Display Content

Avoid using tables in situations where the purpose is not to simply convey the data content itself.

Do not use tables if:

• The main purpose of the table is to position the contents on the page. 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. Tables are an important part of the XHTML specification, and learning to display tabular data well is an important part of creating web pages.