Create CSS Tables Styles Zebra Stripes Hover Effect

Share:

Tutorial : Create CSS Tables Styles with Zebra Stripes Hover Effect. In the previous post we had discussed about how to create rowspan and colspan using basic html code. As with the previous post, tables are made using only the html code may be less interesting to look at because that’s in this post we will review how to make the table more attractive stylis and using some css property which would support for all browsers.
Create CSS Tables Styles with Zebra Stripes Hover Effect Create CSS Tables Styles with Zebra Stripes Hover Effect
Especially for this time, we will try to create a stylish table with zebra stripe effect hover. So, when the cursor is directed at each row of the table then the row will show a different color. You wonder how to create a css table style with zebra stripe hover effect ? Read this tutorial below.

Download Now Create CSS Tables Styles Zebra Stripes Hover Effect

Create CSS Tables Styles with Zebra Stripes Hover Effect

Create HTML Table

First, we created a framework of html table. The basic html table like this :

<table>
					<thead>
						<tr>
							<th>Header Title1</th>
							<th>Header Title2</th>
							<th>Header Title3</th>
							<th>Header Title4</th>
							</tr>
					</thead>
					<tbody>
						<tr>
							<td></td>
							<td class=""></td>
							<td class=""></td>
							<td class=""></td>
						</tr>
                                    </tbody>
</table>

From the framework table above, we divide the table into two parts, the table header (thead) as a place to put the title of each row of data. Preceded by th tag. The second part is the table body (tbody) as a place to put the data into the table. Data is loaded in the td tag.

Create CSS Table

As already presented in the first paragraph, in beautifying the table we would need some kind of css properties, especially the hover effect to create zebra stripe when the cursor leads to a table row. This is a piece of script that will call the hover effect on the body line table :

table tr:hover td { 
background-color:#htmlcolorcode;
}

For td tag that has class tag are as follows :

table tr td.classname {
background:url(url-image) no-repeat center center;
text-indent: -9999em;
}

Please fill #htmlcolorcode, classname and url-image to your liking.
Here is an example table style, with zebra stripe hover effect using css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Create CSS Tables Styles with Zebra Stripes Hover Effect  | Tutorial.World.Edu </title>
<style>
.content{padding-bottom:40px; width:800px;margin-left:350px;}
.content h3 {font-size:2.0em; text-align:center; margin:0; line-height:1em;}
table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1.3em;
    line-height: 1.6em;
    margin: 6px 0;
    width: 100%;
}
table tr td {border: 1px solid #E2E2E2;padding: 10px; text-align:center}
table tr:hover td { background-color:#FF9;}
table tr td.included {background:url(http://1.bp.blogspot.com/-TcPRbTj8-VU/UdvhFgSgkgI/AAAAAAAAA1Y/War30NMLy14/s1600/Create+CSS+Tables+Styles+with+Zebra+Stripes+Hover+Effect+-+Green+Tutorial+World+Edu.png) no-repeat center center;text-indent: -9999em;}
table tr:hover td.included {background:url(http://1.bp.blogspot.com/-TcPRbTj8-VU/UdvhFgSgkgI/AAAAAAAAA1Y/War30NMLy14/s1600/Create+CSS+Tables+Styles+with+Zebra+Stripes+Hover+Effect+-+Green+Tutorial+World+Edu.png) no-repeat center center #FF9;}
table tr td.notincluded {background:url(http://3.bp.blogspot.com/-GHfpk9F3b-Y/UdvhJdBDICI/AAAAAAAAA1g/hYN1Io9CjGY/s1600/Create+CSS+Tables+Styles+with+Zebra+Stripes+Hover+Effect+-+Red+Tutorial+World+Edu.png) no-repeat center center; text-indent: -9999em;}
table tr:hover td.notincluded {background:url(http://3.bp.blogspot.com/-GHfpk9F3b-Y/UdvhJdBDICI/AAAAAAAAA1g/hYN1Io9CjGY/s1600/Create+CSS+Tables+Styles+with+Zebra+Stripes+Hover+Effect+-+Red+Tutorial+World+Edu.png) no-repeat center center #FF9;}
table tr td:first-child { text-align:left;}
table thead tr th {background: none repeat scroll 0 0 #F4F4F4; font-size: 1.3em; line-height: 1.4em; border: 1px solid #E2E2E2; padding: 10px; font-weight:400;}
td {vertical-align: top;}
td sup {color: #C82B72; }
</style>
 <link href="http://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic,900,900italic" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
				<h3>Create CSS Table Styles with Zebra Stripes Hover Effect Tutorial.World.Edu</h3>
				<table>
					<thead>
						<tr>
							<th></th>
							<th>Standart</th>
							<th>Business</th>
							<th>Premium</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Space</td>
							<td class="">100 GB</td>
							<td class="">500 GB</td>
							<td class="">1000 GB</td>
						</tr>
 						<tr>
							<td>Bandwidth</td>
							<td class="">10 TB</td>
							<td class="">50 TB</td>
							<td class="">100 TB</td>
						</tr>                                           
						<tr>
							<td>100% Uptime SLA</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>24x7x365 Monitoring</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Unlimited SMS and Email alerts</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Unlimited IPv4 and IPv6 IPs</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Fully Dedicated network connections</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Choice of OS and control panel</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Full backup options</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Anti-virus</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>KVM Access</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Full Admin / Root access</td>
							<td class="included"> included</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>SAS Drive Support</td>
							<td class="notincluded">notincluded</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Up to 32GB DDR3 ECC RAM</td>
							<td class="notincluded">notincluded</td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Permanent KVM</td>
							<td class="notincluded"></td>
							<td class="included">included</td>
							<td class="included">included</td>
						</tr>
						<tr>
							<td>Virtualisation Support</td>
							<td class="notincluded">notincluded</td>
							<td class="notincluded">notincluded</td>
							<td class="included">included</td>
						</tr>
					</tbody>
				</table>
	</div>		
</body>
</html>

Result is ..
Create CSS Tables Styles with Zebra Stripes Hover Effect Create CSS Tables Styles with Zebra Stripes Hover Effect
Not difficult to create a table style with css code. You can be creative according to what you want. Good luck …
Thank you for reading Tutorial : Create CSS Tables Styles with Zebra Stripes Hover Effect

[Tutorial.World.Edu]

4 thoughts on “Create CSS Tables Styles Zebra Stripes Hover Effect

Leave a Reply

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