Positioning the Table Caption

Description

When you add a caption element to a table, it is displayed at the top of the table.

You can change this behavior using the caption-side property. This property has two values: top (the default) and bottom.

Example

The following code uses the caption-side Property.


<!DOCTYPE HTML>
<html>
<head>
<style>
table  {<!--   w  w  w .  java2 s. c o m-->
    border-collapse: collapse;
    caption-side:  bottom;
}
th,  td {
    padding: 5px;
}
</style>
</head>
<body>
    <table  border="1">
        <caption>Results of  Survey</caption>
        <tbody>
            <tr>
                <th>Favorite:</th>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <th>2nd  Favorite:</th>
                <td>A</td>
                <td>B</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
</table>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table