Switch to full style
HTML code examples
Post a reply

table row hover

Sun Feb 26, 2012 11:45 pm

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>
 




Post a reply
  Related Posts  to : table row hover
 click,double click,focus,blur and hover actions in JQuery     -  
 row highlight of table     -  
 Creating table using div tag     -  
 Div Table with css row span     -  
 Using table in latex     -  
 table creation     -  
 Get table column flag in php     -  
 Table with marked cell     -  
 HTML Scrollable table     -  
 SQL COPY TABLE Command     -  

Topic Tags

HTML Table