8/28/2013

How To Create A Fancy HTML Table Styled With CSS Using The Basic Hover Selector Function

How To Create A Fancy HTML Table Styled With CSS Using The Basic Hover Selector Function

Overview:

In this tutorial, I will show you how to create a fancy HTML and CSS table! If you're new to coding and need to start with the basics, check out this project first: How To Create A Simple HTML Table. If you're interested in viewing calendars created in code, check out these calendar projects here. Otherwise let's check out the demo and code below!

The Demo:

Name Email Website
Joe joe@joe-example.com www.joe-example.com
Jim jim@jim-example.com www.jim-example.com
Ann ann@ann-example.com www.ann-example.com
© your website here.

Above I have the demo, use your mouse to interact and hover over the rows of the table. As you do you will notice the hovered over row highlights in gray, this is known as the hover sector function. This table and many like it are quite simple to make and the functionality is easy to learn. Copy and paste the HTML and CSS below to create your very own. Let me know your thoughts on it by leaving a comment below!

HTML:

<table align="center" id="fancytable1">

<tr>
<th>Name</th>
<th>Email</th>
<th>Website</th>
</tr>

<tr>
<td>Joe</td>
<td>joe@joe-example.com</td>
<td><a href="#" target="_blank" >www.joe-example.com</a></td>
</tr>

<tr class=alt>
<td>Jim</td>
<td>jim@jim-example.com</td>
<td><a href="#" target="_blank" >www.jim-example.com</a></td>
</tr>

<tr>
<td>Ann</td>
<td>ann@ann-example.com</td>
<td><a href="#" target="_blank" >www.ann-example.com</a></td>
</tr>

<tr class=alt2>
<td colspan="3"><center><a style="color:#81d50d;" href="http://www.justinwoodie.com" >© your website here.</a></center></td>
</tr>

</table>

CSS:

<style>

a:link {color:#000000;} /* unvisited link */
a:visited {color:#000000;} /* visited link */
a:hover {color:#81d50d;} /* mouse over link */
a:active {color:#81d50d;} /* selected link */

#fancytable1 {

background-color:;
width:500px;
border-top-left-radius:15px 15px;
-moz-border-radius-topleft:15px 15px;
border-radius-topleft:15px 15px;
border-top-right-radius:15px 15px;
-moz-border-radius-topright:15px 15px;
border-radius-topright:15px 15px;
font-family: Arial, Helvetica, sans-serif;
color: #222222;
border-collapse:collapse;

}

#fancytable1 th {

padding:5px;
border-top-left-radius:15px 15px;
-moz-border-radius-topleft:15px 15px;
border-radius-topleft:15px 15px;
border-top-right-radius:15px 15px;
-moz-border-radius-topright:15px 15px;
border-radius-topright:15px 15px;
font-size: 1.1em;
text-align: center;
background: -moz-linear-gradient(bottom, #666666, #222222);
background: -webkit-linear-gradient(top, #666666, #222222);
background: -o-linear-gradient(top, #666666,#222222);
background: linear-gradient(top, #666666, #222222);
color: #81d50d;
text-shadow: 2px 2px 2px #222222;

}

#fancytable1 tr.alt2 td {

padding:5px;
border-bottom-left-radius:15px 15px;
-moz-border-radius-bottomleft:15px 15px;
border-radius-bottomleft:15px 15px;
border-bottom-right-radius:15px 15px;
-moz-border-radius-bottomright:15px 15px;
border-radius-bottomright:15px 15px;
font-size: .75em;
text-align: center;
background: -moz-linear-gradient(bottom, #666666, #222222);
background: -webkit-linear-gradient(top, #666666, #222222);
background: -o-linear-gradient(top, #666666,#222222);
background: linear-gradient(top, #666666, #222222);
color: #81d50d;
text-shadow: 2px 2px 2px #222222;

}

#fancytable1 th {

font-size: 1em;

}

#fancytable1 td {

padding:5px;
background-color:#f0f0f0;
font-size: 1em;

}

#fancytable1 tr.alt td {

background-color: cccccc;

}

#fancytable1 tr:hover td {

background: -moz-linear-gradient(bottom, #666666, #222222) !important;
background: -webkit-linear-gradient(top, #666666, #222222);
background: -o-linear-gradient(top, #666666,#222222);
background: linear-gradient(top, #666666, #222222);
color:#81d50d;

}

</style>

Previous Post
Next Post

I'm a creative individual that makes a living from the dynamics of digital technology.

Related Posts

0 comments: