Table header with border : table header : Table Style HTML CSS TUTORIALS


HTML CSS TUTORIALS » Table Style » table header »

 

Table header 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> HTML tables </title>
        <style type='text/css'>
            table {
                width: 300px;
                caption-side: bottom;
                border: thin solid black;
                table-layout: fixed;
                border-spacing: 0;
                margin: 5px;
            }
            th, td {
                border: thin solid black;
                text-align: center;
                font-weight: bold;
                overflow: hidden;
            }
            th {
                background: lightgrey;
            }
            td {
                vertical-align: top;
            }
            caption {
                font-size: 90%;
                text-align: right;
            }
            td, th, caption {
                padding: 5px;
            }
        </style>        
    </head>
    <body>
        <table>
            <caption>
                My favorite movies.
            </caption>
            <colgroup>
                <col id='movie' />
                <col id='cast' />
                <col id='genre' />
                <col id='year' />
            </colgroup>
            <thead>
                <tr>
                    <th> movie            </th>
                    <th> stars            </th>
                    <th> genre            </th>
                    <th> year             </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> B</td>
                    <td> J</td>
                    <td> C</td>
                    <td> 2</td>
                </tr>
                <tr>
                    <td> T</td>
                    <td> E</td>
                    <td> A</td>
                    <td> 2</td>
                </tr>
                <tr>
                    <td> T</td>
                    <td> K</td>
                    <td> A</td>
                    <td> 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Table Style
» table header