DIV CSS 佈局教程網

一、表格語義記憶

通過語義化記憶表格標簽：

表1 表格基本標簽 標簽 語義 說明 table table（表格） 表格 tr table row（表格行） 行 td table data cell（表格單元格） 單元格 表2 表格結構標簽 標簽 語義 說明 thead table head 表頭 tbody table body 表身 tfoot table foot 表腳 th table header 表頭單元格

二、表格基本結構

<table>、<tr>和<td>是HTML表格最基本的3個標簽，其他標題標簽<caption>、表頭單元格<th>可以沒有，但是這3者必須要有。

語法：

 
<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
</table>

說明：

<table>和</table>標記著表格的開始和結束，<tr>和</tr>標記著行的開始和結束，在表格中包含幾組<tr></tr>就表示該表格為幾行。<td>和</td>標記著單元格的開始和結束。

三、表格完整結構

表格完整結構應該包括表格標題（caption）、表頭（thead）、表身（tbody）和表腳（tfoot）4部分。

表格語義化之後，使得代碼更清晰和更利於後期維護。

語法：

 
<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>這三個標簽分別表示表頭、表身、表腳。th表示表頭單元格，th表示表身單元格。每一對“<tr></tr>”表示一行。

四、合並行和合並列

合並行使用td標簽的rowspan屬性，而合並列則用到td標簽的colspan屬性。

1、合並行

語法：

<td rowspan="跨度的行數">

2、合並列

語法：

<td colspan="跨度的列數">