table row hover

In this example we use table hover property for each row to take the change the background color on mouse over.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>table row hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 
 
table th{
   background-color: #0777E7;
}
tr.rowX td {
  background-color: #436789;
}
tr.rowX td:hover {
  background-color: #EE5412;
}
tr.rowY td {
  background-color: #790990;
}
tr.rowY td:hover {
  background-color: #43EE32;
}
</style>
</head>

<body>
<p>
 In this example we use hover property to take the 
 affect of mouse over.
</p>
<table>
 <tr class="rowY"> 
    <th>Header1</td>
    <th>Header2</td>

    <th>Header3</td>
  </tr>
 
  <tr class="rowX"> 
    <td>Row1 Cell Text1</td>
    <td>Row1 Cell Text2</td>
    <td>Row1 Cell Text3</td>
  </tr>
  <tr class="rowY"> 
    <td>Row2 Cell Text1</td>

    <td>Row2 Cell Text2</td>
    <td>Row2 Cell Text3</td>
  </tr>
 
</table>
</body>
</html>
 

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada

Author: DrRakha
Mastermind

Posts: 2715
Have thanks: 74 time

Page 1 of 1

[ 1 post ]

Related Posts to : table row hover
click,double click,focus,blur and hover actions in JQuery -
Div Table with css row span -
Using table in latex -
table creation -
row highlight of table -
Creating table using div tag -
single table inheritance -
Full scrollable table -
Select odd rows from table -
Table with colored background -

Topic Tags

HTML Table

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com