Chris CoyierDon’t Be Afraid To Use Tables For Quick Tabular Data

Written by Chris Coyier from CSS-Tricks

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>
Chris Coyier 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
  • Digg This Post
  • Tweet This Post
  • Stumble This Post
  • Submit This Post To Delicious
  • Submit This Post To Reddit
  • Submit This Post To Mixx
  • BloggingTips Uses Aweber

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

  1. James Mann says:

    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.

  2. Wogan May says:

    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

  3. Chris Coyier says:

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

Trackbacks

Comments are closed.

Comments are closed since this post is older than 30 days. However, you can continue this discussion in our popular Blogging Forums

Subscribe To BloggingTips Via RSS Subscribe To Blogging Tips Via Email Follow Us On Twitter Follow us on Facebook Find Out More About Our Newsletter

Sponsors

Blogging Tips Newsletter

Webmaster Corner

 

Our Free E-Books

Site Partners