Tuesday, November 22, 2011

How to highlight table rows on mouseOver

Please note that if you are using IE, don't forget to add the DOCTYPE to your HTML document


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

For more details, you can refer to this link or this link

Put this inside your <HEAD> section

<style type="text/css">
  tr:hover
  {
    background-color:#317082;
    color:#FFF;
  }
  table
  {
    border:1px solid #000;
    border-collapse: collapse;
  }
  thead td
  {
   font-weight:bold;
   color:#000;
   background-color:#E2EBED;
  }
  td
  {
   padding:2px;
  }  
 </style>

Put this into your <BODY> section

<h1>Table example 1</h1>
<table id="myTable">
 <thead>
  <tr>
   <td>Name</td>
   <td>Age</td>
   <td>Position</td>
   <td>Income</td>
   <td>Gender</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>John</td>
   <td>37</td>
   <td>Managing director</td>
   <td>90.000</td>
   <td>Male</td>
  </tr>
  <tr>
   <td>Susan</td>
   <td>34</td>
   <td>Partner</td>
   <td>90.000</td>
   <td>Female</td>
  </tr>
  <tr>
   <td>David</td>
   <td>29</td>
   <td>Head of production</td>
   <td>70.000</td>
   <td>Male</td>
  </tr>
 </tbody>
</table>




Table example 1

Name Age Position Income Gender
John 37 Managing director 90.000 Male
Susan 34 Partner 90.000 Female
David 29 Head of production 70.000 Male

6 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. .,wow thank you.. i like it...

    ReplyDelete
  3. i m glad that my effort helped someone

    ReplyDelete
  4. How do you make the middle row a different color after you are done hovering it? I would want the row to start as red and go back to red after hovering. Leave the other two rows as white before and after hovering.

    ReplyDelete
  5. Mr. Anonymous, This is the generic functionality that is running for all the rows of the table using css.
    You can assign a class name to the middle row and accordingly define the same thing in your CSS.

    As in

    tr.anonymous:hover { background-color:#327081; color:#FFF; }




    <tr class="anonymous"> <td>Susan</td> <td>34</td> <td>Partner</td> <td>90.000</td> <td>Female</td> </tr>

    ReplyDelete
  6. i want to create one beautiful table with mouse hover and background image but i am poor in html work

    ReplyDelete