prettytable

Simple Table CSS3

Posted

Premium Pixels is an excellent design resource run Orman Clarke. He publishes slick photoshop files every few days, including this Simple Table design.

For a little challenge I decided to turn his Photoshop file into actual code using CSS3 and a bit of JQuery. You can see a demo here or download the code (feel free to use in your own projects, no attribution necessary).


DEMO | DOWNLOAD

The goal was to have a cross browser compatible version that looked good in Chrome, Firefox, IE8, IE7, and IE6. Internet Explorer doesn’t support CSS3 rounded corners, gradients, or shadows, but it is still nice and functional. The zebra striping seemed essential for all browsers, so that was accomplished through jquery. Here’s what it looks like in IE6:

Firefox and Webkit browsers each have their own quirks when implementing CSS3 techniques. One that took a while to figure out is why the rounded corners looked fine in Firefox but were squared in Chrome.

This post explains how border radiuses are rendered differently and suggested the best solution was to round the interior elements that background colors were applied to in additional to the parent element. So that’s why you see rounded corner CSS applied the table and each of the corner td’s or th’s.

Internet Explorer (7,6) didn’t want to recognize background colors on row elements (tr) at all, so backgrounds were classed for the respective td’s and th’s instead.

JQuery

I used jquery to do the zebra striping. It applies the class “odd” to the odd numbered tr elements. I also used jquery to class the first column and the last column, so that I could have different text alignments and borders. Here’s what the code looks like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
		/* For zebra striping */
        $("table tr:nth-child(odd)").addClass("odd-row");
		/* For cell text alignment */
		$("table td:first-child, table th:first-child").addClass("first");
		/* For removing the last border */
		$("table td:last-child, table th:last-child").addClass("last");
});
</script>

The CSS

The CSS should be pretty straightforward, but be warned about CSS resets. I used a really basic one here- but most use border-collapse for table elements. When you do this, the border will disappear from table. Unfortunately, this means you need to go with an inline cellspacing=”0″ on the table instead. If anyone has a pure CSS solution, I’d love to see it.

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	margin:0;
	padding:0;
	font:12px/15px "Helvetica Neue",Arial, Helvetica, sans-serif;
	color: #555;
        background:#f5f5f5 url(bg.jpg);
}
a {color:#666;}
#content {width:65%; max-width:690px; margin:6% auto 0;}
/*
Pretty Table Styling
CSS Tricks also has a nice writeup: http://css-tricks.com/feature-table-design/
*/
table {
	overflow:hidden;
	border:1px solid #d3d3d3;
	background:#fefefe;
	width:70%;
	margin:5% auto 0;
	-moz-border-radius:5px; /* FF1+ */
	-webkit-border-radius:5px; /* Saf3-4 */
	border-radius:5px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {padding:18px 28px 18px; text-align:center; }
th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
tr.odd-row td {background:#f6f6f6;}
td.first, th.first {text-align:left}
td.last {border-right:none;}
/*
Background gradients are completely unnecessary but a neat effect.
*/
td {
	background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr.odd-row td {
	background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
th {
	background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
	background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
/*
I know this is annoying, but we need additional styling so webkit will recognize rounded corners on background elements.  Nice write up of this issue: http://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius
And, since we've applied the background colors to td/th element because of IE, Gecko browsers also need it.
*/
tr:first-child th.first {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px; /* Saf3-4 */
}
tr:first-child th.last {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px; /* Saf3-4 */
}
tr:last-child td.first {
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
tr:last-child td.last {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}

Markup

And, finally, the markup:

<div id="content">
    <table cellspacing="0">
    <tr><th>Task Details</th><th>Progress</th><th>Vital Task</th></tr>
    <tr><td>Look at Orman's <a href="http://www.premiumpixels.com/simple-little-table-psd/">simple table design</a></td><td>100%</td><td>No</td></tr>
    <tr><td>Turn table design into a web project</td><td>100%</td><td>Yes</td></tr>
    <tr><td>Drink another cup of coffee</td><td>50%</td><td>Yes</td></tr>
    <tr><td>Take a stretch break</td><td>0%</td><td>Yes</td></tr>
    <tr><td>Post this stuff on the interweb</td><td>100%</td><td>Yes</td></tr>
    </table>
</div>

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

8 thoughts on “Simple Table CSS3

    • Devin wrote:

      Nice. Probably should have googled that before embarking. Looks like our markup and CSS is very similar.

  1. J. Hendrix wrote:

    Looks great! Thanks for sharing.

  2. WP Ho wrote:

    Outstanding! I use quite a fair bit of tables, and currently insert the zebra stripes manually. I’ve to see how to integrate your codes into my existing tables. Thank you for sharing your work!

  3. Roman wrote:

    thanks was very useful!!

  4. apaunganhote wrote:

    Hello,

    Download link is broken, can you please re-up. Thanks and really appreciates it.

    With Regards,

    • Devin wrote:

      Thanks for letting me know. Should be fixed now.

  5. Peter wrote:

    Great looking table!
    How could I add an hover effect?
    Tried with jQuery and CSS and it didn’t work.

    Keep up the good work!

Leave a Reply

Your email address will not be published. Required fields are marked *

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