table cell hover with class

table cell hover with class : table cell : Table Style HTML CSS TUTORIALS

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style rel='stylesheet' type='text/css'>
body {
    padding: 10px;
    margin: 10px auto;
    min-width: 500px;
    max-width: 900px;
}
table.myStyle {
    width: 100%;
    margin-bottom: 5px;
}
caption {
    text-align: left;
    margin-bottom: 5px;
    text-transform: lowercase;
    font-size: 160%;
    padding: 5px;
    letter-spacing: 10px;
    font-weight: bold;
}
table.myStyle thead th {
    font-weight: bold;
    font-size: 150%;
    color: black;
}
table.myStyle thead th, table.myStyle tbody td {
    padding: 5px;
    text-transform: lowercase;
}
table.myStyle tbody td, table.myStyle tfoot td {
    font-size: 130%;
}
table.myStyle tfoot td {
    padding: 5px;
}
table.myStyle tbody td:hover,
table.myStyle thead th:hover,
table.myStyle tfoot td ul:hover,
table.myStyle caption:hover,
table.myStyle tfoot td p:hover {
    background: black;
    color: white;
    font-weight: bold;
}
table.myStyle tfoot td p {
    padding: 5px;   
}
li {
    margin-left: 30px;
    padding-left: 30px;
}        
        </style>
    </head>
    <body>
        <table class='myStyle'>
            <caption>
                S
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> quantity     </th>
                    <th> measurement  </th>
                    <th> product      </th>
                    <th> instructions </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>  .5              </td>
                    <td>  C</td>
                    <td>  B</td>
                    <td>  </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='4'>
                        <ul>
                            <li>
                                P
                            </li>
                        </ul>
                        <p>
                            S 
                        </p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
HTML code for linking to this page:
table cell hover with class : table cell : Table Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Table Style » table cell »

table cell hover with class

HTML CSS TUTORIALS
