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 |
This comment has been removed by the author.
ReplyDelete.,wow thank you.. i like it...
ReplyDeletei m glad that my effort helped someone
ReplyDeleteHow 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.
ReplyDeleteMr. Anonymous, This is the generic functionality that is running for all the rows of the table using css.
ReplyDeleteYou 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>
i want to create one beautiful table with mouse hover and background image but i am poor in html work
ReplyDelete