CSS Hover Table Background Colors - <TR><TD>

Highlight the table row when the mouse hover. When the mouse over the table row area, the background will instantly highlighted, and it will restoring the original color when the mouse away.

Highlight the content of the website will help your users more easily and concentrate on reading or searching for information.

Resources:

CSS Code

<style type="text/css">

 table.c3 { cursor:default; background-color: #FFFFFF; text-align: center; border: 1px; text-decoration: none; width: 500px;}
 tr.c2 {background-color: #D0D5D9;}
 tr.c1 {background-color: #ABAFB3;}
 td:hover {background-color: #F4FAFF;}

</style>

HTML Code

<!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" xml:lang="en" lang="en">
<head>
  <title></title>
<style type="text/css">

 table.c3 { cursor:default; background-color: #FFFFFF; text-align: center; border: 1px; text-decoration: none; width: 500px;}
 tr.c2 {background-color: #D0D5D9;}
 tr.c1 {background-color: #ABAFB3;}
 td:hover {background-color: #F4FAFF;}

</style>
</head>

<body>
  <table summary="" class="c3">
    <thead>
      <tr class="c1">
        <th>Title 1</th>

        <th>Title 2</th>

        <th>Title 3</th>
      </tr>
    </thead>

    <tbody>
      <tr class="c2">
        <td>Cell 1.1</td>

        <td>Cell 1.2</td>

        <td>Cell 1.3</td>
      </tr>

      <tr class="c2">
        <td>Cell 2.1</td>

        <td>Cell 2.2</td>

        <td>Cell 2.3</td>
      </tr>
    </tbody>
  </table>
<br />
<table class="c3">
  <tr class="c1">
    <td>This paragraph contains some text. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
    ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td>
  </tr>
  <tr class="c1">
    <td>This paragraph contains some text. Lorem ipsum dolor
    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
    ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td>
  </tr>
</table>

</body>
</html>

Webmaster » XHTML CSS » You are here

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

CSS Website Layout