首頁 > web前端 > css教學 > 主體

css caption-side表格標題位置的詳解

黄舟
發布: 2017-06-30 10:47:01
原創
3140 人瀏覽過

一、caption-side屬性

表格加入邊框之後,預設樣式情況如下圖:

css caption-side表格標題位置的詳解

如果我們想要調整表格標題,那該怎麼辦呢?

在CSS中,我們使用caption-side屬性來定義表格標題的位置。

語法:

caption-side:屬性值;

說明:

caption-side屬性取值如下:

css caption-side表格標題位置的詳解

範例:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>caption-side属性</title>
    <style type="text/css">
        table,th,td{border:1px solid gray;}
        caption{caption-side:bottom}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格1</th>
        <th>表头单元格2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
登入後複製

在瀏覽器預覽效果如下:

css caption-side表格標題位置的詳解

分析:

表格標題是caption元素,設定表格標題位置,我們可以在caption元素或table元素中設置,效果是一樣的。但是一般情況下我們都在caption元素中設定。

以上是css caption-side表格標題位置的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板