hover with border : td class : Table Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » Table Style » td class »

 

hover with border


 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> Spicy Thai Peanut Sauce  </title>
        <style rel='stylesheet' type='text/css'>

table.recipe tbody td:hover,
table.recipe thead th:hover,
table.recipe tfoot td ul:hover,
table.recipe caption:hover,
table.recipe tfoot td p:hover {
    background: black;
    color: white;
    font-weight: bold;
}
        </style>
    </head>
    <body>
        <table class='recipe'>
            <caption>
                this is the caption.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> q</th>
                    <th> m</th>
                    <th> p</th>
                    <th> i</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>.5</td>
                    <td> C</td>
                    <td> P</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>12</td>
                    <td> E</td>
                    <td> S</td>
                    <td> S</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td> E</td>
                    <td> G</td>
                    <td> M</td>
                </tr>
                <tr>
                    <td> 2</td>
                    <td> C</td>
                    <td> P</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td> 1</td>
                    <td> C</td>
                    <td> S</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>.5</td>
                    <td> C</td>
                    <td> L</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td> 4</td>
                    <td> T</td>
                    <td> S</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td> 4</td>
                    <td> C</td>
                    <td> C</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>.5</td>
                    <td> C</td>
                    <td> H</td>
                    <td>  </td>
                </tr>
                <tr>
                    <td>  .5</td>
                    <td>  C</td>
                    <td>  B</td>
                    <td>  </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='4'>
                        <ul>
                            <li>this is a test. </li>
                            <li>this is a test. </li>
                            <li>this is a test. </li>
                            <li>this is a test. </li>
                        </ul>
                        <p>this is a test. this is a test. </p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Table Style
» td class