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
Beanstalk
Shopify
Mailchimp
Notable
Wufoo
BlinkCampaign
Simplified Building
OneHub
eWedding
Media Temple
Domestika
ExpressionEngine
Litmus App
Fetch App
activeCollab
Mollie
Polldaddy
Big Cartel
Invoice Machine
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.
- Top 10 CSS Table Designs
- Basic Table Styling with CSS
- A CSS styled table
- A CSS styled calendar
- HTML, CSS and tables – the beauty of data
- Designing data part 1: Table Structure
- Designing data part 2: Table Structure
- Bring on the tables
- CSS-Based Tables: Modern Solutions
- Advanced HTML Tables and CSS Tutorial
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.
Yeah, I know some of them. You forgot the awesome 37signals’ tables in Basecamp/Backpack/Campfire etc.
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.
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.
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!!!