CSS 基础教程-056 CSS设置表格的标题位置

hrs 提交于 2020/02/08 - 11:29 , 周六

实例代码:

<!doctype html >
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    table,th,td{border:1px solid black;}
     th,td{width:120px;padding:5px;text-align:center;}
    caption.top{caption-side:top;}/* 表格上标*/
    caption.bottom{caption-side:bottom;} /* 表格下标*/
    caption{color:red;text-align:left;}
    </style>
</head>

<body>
    <h3>表格的标题实例</h3>
    <table>
        <caption class="top">注意:这是表格上标</caption>
        <caption class="bottom">注意:这是表格下标</caption>
        <tr>
            <th>属性</th>
            <th>值</th>
            <th>注释</th>
        </tr>

        <tr>
            <td>caption-side</td>
            <td>top</td>
            <td>表格上标题</td>
        </tr>
        <tr>
            <td>caption-side</td>
            <td>bottom</td>
            <td>表格下标题</td>
        </tr>
    </table>
</body>

</html>

运行效果:

css_056.png

标签