PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

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

Posted by on 1st Feb 2008 Design & Coding 3 comments

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>
Recommended Posts
Patterns Patterns 0
Five Secrets to Bad Search Engine Rankings Five Secrets to Bad Search Engine Rankings 16
7 Possible FriendFeed Replacements 7 Possible FriendFeed Replacements 2
3 comments - Leave a reply
  • Posted by James Mann on 2nd Feb 2008

    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.
  • Posted by Wogan May on 2nd Feb 2008

    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
  • Posted by Chris Coyier on 2nd Feb 2008

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