table row hover : tr « Tags « HTML / CSS

table row hover

    


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>tr 2</title>
<style>
tr { background: white; } 
tr.alt { background: yellow; }

tr:hover {background: pink;}

</style>

</head>

<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Place of residence</th>
  </tr>
  <tr>
    <td>P</td>
    <td>O</td>
  </tr>
  <tr class="alt">
    <td>V</td>
    <td>B</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
  </tr>
  <tr class="alt">
    <td>E</td>
    <td>P</td>
  </tr>
</table>
</body>
</html>

Related examples in the same category

1.	'tr' Example
2.	table row with class
3.	Table style for even rows
4.	Set different colors for even and odd table row
5.	table row background
6.	stripe table with Javascript
7.	Coloring Rows in a Table
8.	Selecting cells in row
9.	Alternating Row Background
10.	Alternating row colors
11.	Table with subtotoal row
12.	Hiding row
13.	tr height: 30px;
14.	tr background: #EFEFEF;
15.	tr background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
16.	tr color: #505050;
17.	tr padding: 7px;
18.	tr text-align: left;
19.	Highlighting rows with mouse move