23rd March 2012 Keith@Blogfreakz · CSS3, Design, JQuery, Table · Comments Off

Create a CSS3 Table with jQuery Hover Effect

Tables are essential in representing organized data yet somehow they’re relatively left behind in the design department. That’s why it is always a welcome treat to come across tutorials like this one from Catalin Rosu.

Table Create a CSS3 Table with jQuery Hover EffectSample screenshot of end product

In this tutorial we’re going to use CSS3 to design the table and jQuery to create its cool hover effect. The hover effect helps highlight the rows for the user while adding a touch of color to the table; you could say that it serves both form and function.

CSS3

For the table and the rounded corners:

table {
*border-collapse: collapse;   /* IE7 and lower */
border-spacing: 0;
}
th:first-child {
-moz-border-radius: 6px 0 0   0;
-webkit-border-radius: 6px   0 0 0;
border-radius: 6px 0 0 0;
}
th:last-child {
-moz-border-radius: 0 6px 0   0;
-webkit-border-radius: 0   6px 0 0;
border-radius: 0 6px 0 0;
}

This part is for the hover effect:

.bordered tr:hover
{
background: #fbf8e9;
-o-transition: all 0.1s   ease-in-out;
-webkit-transition: all 0.1s   ease-in-out;
-moz-transition: all 0.1s   ease-in-out;
-ms-transition: all 0.1s   ease-in-out;
transition: all 0.1s   ease-in-out;
}

Since not all of this supports CSS3, you can use this jQuery alternative instead:

$('.bordered tr').mouseover(function(){
$(this).addClass('highlight');
}).mouseout(function(){
$(this).removeClass('highlight');
});

And here is the class, which is basically the .bordered tr:hover duplicate:

.highlight
{
background: #fbf8e9;
-o-transition: all 0.1s   ease-in-out;
-webkit-transition: all 0.1s   ease-in-out;
-moz-transition: all 0.1s   ease-in-out;
-ms-transition: all 0.1s   ease-in-out;
transition: all 0.1s ease-in-out;
}

Here’s the full and complete CSS code:

body {
width: 600px;
margin: 40px auto;
font-family: 'trebuchet   MS', 'Lucida sans', Arial;
font-size: 14px;
color: #444;
}
table {
*border-collapse: collapse;   /* IE7 and lower */
border-spacing: 0;
width: 100%;
}
.bordered {
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px   #ccc;
-moz-box-shadow: 0 1px 1px   #ccc;
box-shadow: 0 1px 1px   #ccc;
}
.bordered tr:hover {
background: #fbf8e9;
-o-transition: all 0.1s   ease-in-out;
-webkit-transition: all   0.1s ease-in-out;
-moz-transition: all 0.1s   ease-in-out;
-ms-transition: all 0.1s   ease-in-out;
transition: all 0.1s   ease-in-out;
}
.bordered td, .bordered th {
border-left: 1px solid   #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.bordered th {
background-color: #dce9f9;
background-image:   -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
background-image:   -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
background-image:    -moz-linear-gradient(top, #ebf3fc,   #dce9f9);
background-image:     -ms-linear-gradient(top, #ebf3fc,   #dce9f9);
background-image:      -o-linear-gradient(top, #ebf3fc,   #dce9f9);
background-image:         linear-gradient(top, #ebf3fc,   #dce9f9);
-webkit-box-shadow: 0 1px 0   rgba(255,255,255,.8) inset;
-moz-box-shadow:0 1px 0   rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0   rgba(255,255,255,.8) inset;
border-top: none;
text-shadow: 0 1px 0   rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
border-left: none;
}
.bordered th:first-child {
-moz-border-radius: 6px 0 0   0;
-webkit-border-radius: 6px   0 0 0;
border-radius: 6px 0 0 0;
}
.bordered th:last-child {
-moz-border-radius: 0 6px 0   0;
-webkit-border-radius: 0   6px 0 0;
border-radius: 0 6px 0 0;
}
.bordered tr:last-child td:first-child {
-moz-border-radius: 0 0 0   6px;
-webkit-border-radius: 0 0   0 6px;
border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px   0;
-webkit-border-radius: 0 0   6px 0;
border-radius: 0 0 6px 0;

So that covers both the CSS3 and jQuery portion of the tutorial. As for the HTML, all you have to do is use standard table tags in order to call the CSS styling, and you have to remember to do this:

<table>

Here’s a comparison of the table, with and without CSS3 support (notice the corners):

Table comparison Create a CSS3 Table with jQuery Hover Effect

And there you go!

Incoming search terms for the article:

About the author

Keith@Blogfreakz

Keith@Blogfreakz

Keith Frias sees himself as an artist whose talent is in a state of coma, and a tech gadget freak who also loves to dabble in photography.

Related Posts

How to Create a Clean and Colorful Web Layout

0 Comments

Create An Instagram Widget In Photoshop

0 Comments

How to Create an Appealing Coming Soon Page

1 Comment

How to Create Text with Flaming Meteor Effect

0 Comments

No comments