Study 3 —— 表格

表格基本格式:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

合併單元格
左右單元格合併須要使用<td>標記的colspan屬性完成
上下單元格合併須要使用<td>標記的rowspan屬性完成
如下是一個實例:
<table>
    <tr>
        <td rowspan="2">內容</td>
        <td colspan="3">百度使用</td>
    </tr>
    <tr>
        <td>指南針</td>
        <td>生活</td>
        <td>天然</td>
    </tr>
</table>

網頁顯示結果以下:

爲了讓表格結構更清晰,以及配合CSS樣式,表格中還會體現出表頭、主體、腳註等,三者相應的HTML標記依次爲<thead>、<tbody>、<tfoot>
另外,在表格中還有兩個標記,<caption>表示表格的標題,<th>能夠定義表格內的表頭單元格
<table>
    <caption>學生成績單</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>成績</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td colspan="2">540</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>560</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>520</td>
        </tr>
    </tbody>
</table>
border-collapse: collapse;    合併表格線
相關文章
相關標籤/搜索