Blogging Tips

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

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>

Written by Chris Coyier from CSS-Tricks
Posted on February 1st, 2008 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

3 Responses to “Don’t Be Afraid To Use Tables For Quick Tabular Data”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

James Mann says:

February 2, 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 says:

February 2, 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 says:

February 2, 2008 at 10:18 pm

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