DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 6.4 表格語義化
6.4 表格語義化
編輯:HTML入門知識     

一、表格語義化

上面幾節課我們學習了如下標簽:table標簽(表格)、tr標簽(行)、td標簽(標准單元格)、caption標簽(標題)、th標簽(表頭單元格)。

為了更深一層對表格進行語義化,HTML引入了thead、tbody和tfoot這三個標簽。這三個標簽把表格分為三部分:表頭、表身、表腳。有了這三個標簽,表格HTML代碼語義更加良好,結構更加清晰。

語法:

 
<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>

說明:

<thead>、<tbody>和<tfoot>這三個標簽也是表格中非常重要的標簽,它在語義上區分了表頭、表身、表腳。很多人容易忽略這三個標簽。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table>
        <caption>考試成績表</caption>
        <thead>    
            <tr>
                <th>姓名</th>
                <th>語文</th>
                <th>英語</th>
                <th>數學</th>
            <tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小紅</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小傑</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在浏覽器預覽效果如下:

分析:

頁腳往往都是用於統計數據。默認情況下,表格是沒有邊框的。我們加入邊框是讓讀者更清楚地看到表格結構。

很多人問,對於表格來說,thead、tbody、tfoot這3個標簽加了跟沒加時的顯示效果都一樣呀?確實,我作為新手的時候也有過這個疑問。但是加了之後讓你的代碼更具有邏輯性。為什麼大神寫的代碼往往就跟一般人的水平相比,連代碼都是那麼清晰自然呢?大家想想就知道了。當然,還有一點就是:HTML語義結構極其重要,特別是針對搜索引擎。這些重要的細節,你是在一般書籍裡找不到的。

總結

1、表格完整結構如下:

表格結構 標簽 說明 table 表格 caption 標題 thead 表頭(語義劃分) tbody 表身(語義劃分) tfoot 表尾(語義劃分) tr 行 th 表頭單元格 td 表格單元格

有興趣的朋友,可以查看 學習網教程中表格方面的源代碼,其實你會發現,站長正是使用完整的表格結構來編寫代碼的。

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