DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 6.3 表格結構
6.3 表格結構
編輯:HTML入門知識     

上一節課“表格的基本結構”,我們學習了表格基本結構,下面我們逐步把表格完整的結構學習完。

一、表格標題<caption>

表格一般都有一個標題,表格標題使用<caption>標簽。表格的標題一般位於整個表格的第1行,一個表格只能含有一個表格標題。

語法:

 
<table>
    <caption>表格標題</caption>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格標題標簽</title>
</head>
<body>
    <table>        
        <caption>考試成績表</caption>
        <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>
    </table>
</body>
</html>

在浏覽器預覽效果如下:

說明:

默認情況下,表格是沒有邊框的。我們加入邊框是讓讀者更清楚地看到表格結構。

二、表頭<th>

表格的表頭<th>是<td>單元格的一種變體,它的本質還是一種單元格。它一般位於第一行,用來表明這一行或列的內容類別。表頭有一種默認樣式:浏覽器會以粗體和居中的樣式顯示<th>元素中的內容。

<th>標簽和<td>在本質上都是單元格,但是並不代表這兩種可以互換使用。這兩者根本區別在於語義上。th,即“table header(表頭單元格)”。而td,即“table data cell(單元格)”。當然對於表頭,我們可以用td標簽代替th標簽,但是不建議這樣做,在“HTML中的大誤區”這一節我們詳細說到了HTML學習的目的就是在需要的地方用到正確的語義標簽。

語法:

 
<table>
    <caption>表格標題</caption>
    <tr>
        <th>表頭單元格1</th>
        <th>表頭單元格2</th>
        ……
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表格表頭標簽</title>
</head>
<body>
    <table>        
        <caption>考試成績表</caption>
        <tr>
            <th>姓名</th>
            <th>語文</th>
            <th>英語</th>
            <th>數學</th>
        </tr>
        <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>
    </table>
</body>
</html>

在浏覽器預覽效果如下:

分析:

默認情況下,表格是沒有邊框的。我們加入邊框是讓讀者更清楚地看到表格結構。

總結

表格結構如下:

表格結構 標簽 說明 table 表格 caption 標題 tr 行 th 表頭單元格 td 表格單元格
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved