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

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>