HTML/CSS

This is a table style inspired in Simple Little Table by Orman Clark, it’s made in CSS3, it doesn’t use images and it’s compatible with all major browsers.

Demo Download

Usage

Place this css style in your theme’s style.css, which you can find under Appearence> Editor (this refers to wordpress, but overall the instructions are equal for every usage).

table.table {
    margin: 20px;
    color: #666;
    font-size: 12px;
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    background: #eaebec;
    border: #ccc 1px solid;
    border-radius: 3px;
    box-shadow: 0 1px 2px #d1d1d1;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 1px 1px 0px #fff;
}

table.table tr.even td {
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}

table.table th {
    padding: 21px 25px 22px 25px;
    border-bottom: 1px solid #e0e0e0; border-top: 1px solid #fafafa;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top, #ededed, #ebebeb);
}

table.table th:first-child {
    padding-left: 20px;
    text-align: left
}

table.table a:visited {
    color: #999999;
    font-weight: bold;
    text-decoration: none
}

table.table a:active,
table.table a:hover {
    color: #bd5a35;
    text-decoration: underline
}

table.table a:link {
    color: #666;
    font-weight: bold;
    text-decoration: none
}

table.table tr {
    padding-left: 20px;
    text-align: center
}

table.table tr:first-child th:first-child {
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
}

table.table tr:first-child th:last-child {
    -moz-border-radius-topright: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
}

table.table tr:last-child td {    border-bottom: 0 }

table.table tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

table.table tr:last-child td:last-child {
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

table.table tr:hover td {
    background: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
    background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}

table.table tr td {
    padding: 18px;
    border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; border-top: 1px solid #ffffff;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}

table.table tr td:first-child {
    padding-left: 20px;
    border-left: 0;
    text-align: left
}

After, paste this code in your post HTML editor, in wordpress its here:

Change back to visual and edit the contents to suit your needs, if you need more rows, add:

<tr> <td>Create pretty table design</td> <td>100%</td> <td>Yes</td> </tr>

if you need more columns, you need to add a td in every tr, and a th in the table header.

<td>Create pretty table design</td>

<th>Task Details</th>

The table markup

(copy to the HTML editor in your platform)

<table class="table" cellspacing="0"> <!-- to create a darker table row, you must add the class even to a tr eg. <tr class="even">…</tr> --><!-- Table Header --> <tbody> <tr> <th>Task Details</th> <th>Progress</th> <th>Vital Task</th> </tr> <!-- Table Header --><!-- Table Row --> <tr> <td>Create pretty table design</td> <td>100%</td> <td>Yes</td> </tr> <!-- Table Row --><!-- Darker Table Row --> <tr class="even"> <td>Take the dog for a walk</td> <td>100%</td> <td>Yes</td> </tr> <!-- Darker Table Row --> <tr> <td>Waste half the day on Twitter</td> <td>20%</td> <td>No</td> </tr> <tr class="even"> <td>Feel inferior after viewing Dribble</td> <td>80%</td> <td>No</td> </tr> <tr> <td>Wince at "to do" list</td> <td>100%</td> <td>Yes</td> </tr> <tr class="even"> <td>Vow to complete personal project</td> <td>23%</td> <td>yes</td> </tr> <tr> <td>Procrastinate</td> <td>80%</td> <td>No</td> </tr> <tr class="even"> <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td> <td>80%</td> <td><a href="#inexistent-id">Another</a></td> </tr> </tbody> </table>