DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 10.3 表格標題位置caption-side
10.3 表格標題位置caption-side
編輯:CSS基礎知識     

一、caption-side屬性

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

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

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

語法:

caption-side:屬性值;

說明:

caption-side屬性取值如下:

表1 caption-side屬性取值 caption-side屬性值 說明 top 默認值,標題在頂部 bottom 標題在底部

舉例:

在線測試
 
<!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>

在浏覽器預覽效果如下:

分析:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved