» Design & Coding » Don’t Be Afraid To Use Tables For Quick Tabular Data

Chris CoyierDon’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:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Bumpzee
  • E-mail this story to a friend!
  • Ma.gnolia
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati
  • TwitThis
Written by Chris Coyier from CSS-Tricks on February 1, 2008 | Filed Under Design & Coding
Unique Blog Designs

3 Responses so far | Have Your Say!

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

    James Mann - Gravatar

    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  |  February 2nd, 2008 at 4:58 pm #

    Wogan May - Gravatar

    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 (Post Author)   |  February 2nd, 2008 at 10:18 pm #

    Chris Coyier - Gravatar

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

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

Leave Feedback

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>