Showcase of Excellent Tables and Best Practices

Tables are a rather unchallenged interface element. In most cases, they are a forgetten element, an undesired element and a seldom-used element. Too bad, because tables have amazing versatility and can be used for multiple purposes. For instance, they can be used to display complex data, pricing tables and calendars, as well as having many other uses.

Tables don’t have to look boring, flat and lifeless. In fact, they can be wonderful design enhancements for your website and pricing sheets. To prove this, I’ve collected some amazing table designs, showing you the endless possibilities they have to offer.

FormSpring

Showcase of Excellent Tables and best practices

Beanstalk

Showcase of Excellent Tables and best practices

Shopify

Showcase of Excellent Tables and best practices

Mailchimp

Showcase of Excellent Tables and best practices

Notable

Showcase of Excellent Tables and best practices

Wufoo

Showcase of Excellent Tables and best practices

BlinkCampaign

Showcase of Excellent Tables and best practices

Simplified Building

Showcase of Excellent Tables and best practices

OneHub

Showcase of Excellent Tables and best practices

eWedding

Showcase of Excellent Tables and best practices

Media Temple

Showcase of Excellent Tables and best practices

Domestika

Showcase of Excellent Tables and best practices

ExpressionEngine

Showcase of Excellent Tables and best practices

Litmus App

Showcase of Excellent Tables and best practices

Fetch App

Showcase of Excellent Tables and best practices

activeCollab

Showcase of Excellent Tables and best practices

Mollie

Showcase of Excellent Tables and best practices

Polldaddy

Showcase of Excellent Tables and best practices

Big Cartel

Showcase of Excellent Tables and best practices

Invoice Machine

Showcase of Excellent Tables and best practices

Best Practices

I did warned you that tables are great, that is, for showing of your tabular data. Let’s move on with a small collection of tutorials and resources to get you started.

Create the Basic Elements

To start, you should always define at least 3 elements; table, thead, and tbody. There is also tfoot, but is less commonly used. It should look like this.

<table cellspacing="10" cellpadding="10">
<thead>

                        <!-- Content --></thead>
<tbody>

                        <!-- Content --></tbody>
</table>

Then add some basic styling like you would any other element.

>table {
        width: 600px;
        font: 11px/14px helvetica, arial, sans-serif;
        text-shadow: 1px 1px 1px #fff;
}

thead {
        height: 60px;
        width: 600px;
        background: #000;
        color: #FFF;
        text-shadow: 1px 1px 1px #480e09;
}

Header Information

Next, we should create are areas of comparison by defining table headers; this will sort the information into columns to make it easily comparable. We do this by declaring table header elements inside a new table row. Then add some information on what the columns will hold.

Table elements


                        <span>Features</span>
<h3>Small</h3>
<span><em>$10.00</em> / Month</span>
<h3>Medium</h3>
<span><em>$25.00</em> / Month</span>
<h3>Large</h3>
<span><em>$50.00</em> / Month</span>
<h3>Extra</h3>
<span><em>$100.00</em> / Month</span>

CSS styling

.tableHeading th {
        height: 40px;
        width: 120px;
        padding: 10px 0;
        text-align: center;
}
.tableHeading th h3, .tableHeading th span {
        margin: 0;
        padding: 0;
}
.tableHeading th h3 {
        font-size: 13px;
        line-height: 18px;
        text-transform: uppercase;
        color: #fff;
        font-weight: 900;
}
.tableHeading th span {
        font-size: 10px;
        font: 11px/14px arial, sans-serif;
        color: #fff;
}
.tableHeading th em {
        font-size: 14px;
        color: #fff;
        letter-spacing: -2px;
        font-weight: 900;
}

Adding Content

Most likely the last thing you will have to do, add content to your table to compare. This is done by adding “td” elements in new table rows.

Table elements

Feature Description
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />

Feature Description
<img src="cross.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />

Feature Description
<img src="check.png" alt="" width="16" height="16" />
<img src="cross.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />

Feature Description
<img src="cross.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />
<img src="check.png" alt="" width="16" height="16" />

css styling

th.column1 {
        border-left: 1px solid rgb(224, 224, 224);
        border-bottom: 1px solid rgb(224, 224, 224);
        color: #000;
        text-align: right;
        vertical-align: middle;
        width: 200px;
        text-shadow: 1px 1px 1px #fff;
}
tbody td {
        border-bottom: 1px solid rgb(224, 224, 224);
        border-left: 1px solid rgb(224, 224, 224);
        text-align: center;
}
tbody tr td:last-child {
        border-right: 1px solid rgb(224, 224, 224);
}
tbody tr:nth-child(even), tbody tr td:nth-child(even){
        background: rgb(241, 241, 241);
}
.first {
        width: 200px;
}
.first span {
        position: absolute;
        left: -9999px;
}

Your Done!

You’re finally done. You can download the source files below and checkout the live preview if you please!

Our Testking 1z0-051 online training is the best place to learn about latest trends and tools in web designing. Learn the best designing practices with help of using Testking 642-566 tutorials and Testking JN0-522 resources.

This entry was posted on Thursday, March 11th, 2010 at 17:41 and is filed under Inspiration. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Hi , I’m a dutch freelance graphic/web designer designs, I also write tutorials, blog posts and maintain a few cool sites. You can follow me on twitter here. You may also view my portfolio here.

About the author Published by Hein

12 Responses »

  1. Yeah, I know some of them. You forgot the awesome 37signals’ tables in Basecamp/Backpack/Campfire etc.

  2. Why showcase this, yes they are good looking. But tables are for tabular content, css just for styling but not for structure of said tabular content.

    Pointless in my eyes, especially when they aren’t anything “special” in there, just standard you could of seen a few years back.

  3. Despite some of these not being actual tables (like Notable’s [oh, the irony!] “table”), this is a really nice showcase.

    It’s good to see people reinforcing the whole “tables are NOT bad” idea. Unfortunately, styling tables in the way some of these have (specially the “highlighted column” effect) requires a LOT of time, patience, sometimes not-so-semantic markup and/or some javascript. A small warning or even better, a tutorial for such effects would be really good.

  4. Styling tables in the way some of these have (specially the �highlighted column� effect) requires a LOT of time, patience, sometimes not-so-semantic markup and/or some javascript!!!

Trackbacks

  1. designfloat.com
  2. Showcase of Excellent Tables and best practices | Design Newz
  3. Weekly DesignLove #9 | DesignLovr
  4. Showcase of Excellent Tables and best practices | Dev Loom
  5. Tables in HTML kunnen ook mooi zijn « Huub blogt..
  6. Widmann Martin Blog
  7. dropjack.com
  8. DesignerLinks

Leave a Response

We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.