Don’t Be Afraid To Use Tables For Quick Tabular Data

Written by Chris Coyier from CSS-Tricks on February 1, 2008

Tables get more than their fair share of bashing by the web community. Before CSS really took hold, tables were required for web layout despite their obvious shortcomings for such a task. Now that the days of table-based layouts have faded, any lingering uses of tables is shot down and ridiculed by the web community.

But there is no reason to be a table-hater! Tables have one, distinct, incredibly purposeful use. Can you guess it?

Tables are for tabular data

Do you have a a table of information to display? Then a table is how you should display it. Using some kind of CSS positioning thing to create a table is just as egregious and ill-suited as using tables for web layout.

Here is a quick example:

Candidate	Spots	Spending	Candidate	Spots	Spending
BIDEN	3165	$1,800,000	GIULIANI	6856	$5,6000,000
CLINTON	25,562	18,7000,000	HUCKABEE	5831	2,600,000
DODD	4028	1,800,000	HUNTER	114	68,000
EDWARDS	14,732	8,300,000	MCCAIN	10,830	8,000,000
KUCINICH	27	7,000	PAUL	5215	2,800,000
OBAMA	29,866	22,700,000	ROMNEY	34,821	29,000,000
RICHARDSON	5936	4,200,000	THOMPSON	4032	2,200,000
			TANCREDO	99	160,000
DEM TOTAL	83,320	57,000,000	GOP TOTAL	67,798	50,000,000

Even completely un-styled, like this table, it still gets the job done.

Here is some basic table HTML syntax:

<table>
    <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
        <th>Table Header 3</th>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

Share and Enjoy:

Written by Chris Coyier from CSS-Tricks on February 1, 2008 | Filed Under Design & Coding

3 Responses so far | Have Your Say!

James Mann | February 2nd, 2008 at 9:59 am #

I have been using tables on web pages for a long time. I just find it so easy to line up columns and it sure beats those sites that use spaces to line things up. That almost always looks terrible.

I can create a table in my html editor and then just copy the code directly into the source code of my blog post.
Wogan May | February 2nd, 2008 at 4:58 pm #

You didn’t close the TR tag after the headers

I’ve read a lot in regards to “for the love of God don’t use tables!”, but I find that it’s more than practical in some situations.

And it’s not like tables are completely devoid of CSS, either. Basically, you can create overkill whether you use tables or CSS.

But what I’m still waiting for is HTML 5

~ Wogan
Chris Coyier (Post Author) | February 2nd, 2008 at 10:18 pm #

Thanks for noticing that Wogan, I fixed it in the article.