put caption at the bottom of table

msi_333 · **Posted:** Sat Dec 17, 2011 1:54 am

setting the caption at the bottom of table using the CSS caption-side: bottom attribute.

Code:

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>set caption at the bottom of table</title>
        <style rel='stylesheet' type='text/css'>

table {
    border: 1px solid blue;
    caption-side: bottom;
    table-layout: fixed;
    border-collapse: collapse;
}

th, td {
    border: 1px solid red;
    padding: 1px;
    overflow: hidden;
}        
        </style>
    </head>
    <body>
        <table>
            <caption>
                 Caption at the bottom of table
            </caption>
      
            <thead>
                <tr>
                    <th> First Column</th><th> Second Column</th><th> Third Column</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 1</td><td> 4</td><td> 1111</td>
                </tr>
                <tr>
                    <td> 2</td><td> 5</td><td> 2222</td>
                </tr>
                <tr>
                    <td> 3</td><td> 6</td><td> 3333</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

 

put caption at the bottom of table

Users browsing similar codes