6、表格元素

一、表格元素匯總

   表格的基本構(gòu)成最少需要三個元素：<table>、<tr>、<td>，其他的一些作為可選輔助存在

二、構(gòu)建表格解析

1、<table><tr><td>構(gòu)建基礎(chǔ)表格

<table border="1">
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
     <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>

解釋：<table>元素表示一個表格的聲明，<tr>元素表示表格的一行，<td>元素表示一個單元格。默認(rèn)情況下表格是沒有邊框的，所以，在<table>元素增加一個border屬性，設(shè)置為1即可顯示邊框。

2、<th>為表格添加標(biāo)題單元格

<table border="1" >
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <th>張三</th>
        <th>男</th>
        <th>未婚</th>
    </tr>
    <tr>
        <th>李四</th>
        <th>女</th>
        <th>已婚</th>
    </tr>
</table>

解釋：<th>元素主要是添加標(biāo)題行的單元格。實際作用就是將內(nèi)部文字居中且加密。這里使用了一個通用屬性style，主要用于CSS樣式設(shè)置，以后會涉及到。<th><td>均屬于單元格，包含了兩個合并屬性：colspan（左右合并），rowspan（上下合并）等。

例如：

<table border="1" >
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
    <tr>
        <td colspan="3">共計有兩人</td>
    </tr>
</table>

<table border="1" >
<tr>
<th rowspan="4">基本情況</th>
<th>姓名</th>
<th>性別</th>
<th>婚姻</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>未婚</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>已婚</td>
</tr>
</table>

3、<thead>添加表頭

<thead>
    <tr>
        <td>###</td>
        <td>###</td>
    </tr>
</thead>

解釋：<thead>元素就是限制和規(guī)范了表格的表頭部分。尤其是以后動態(tài)生成表頭，它的位置是不固定的，使用此元素可以限定在開頭的位置

<table border="1" >
    <thead>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </thead>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</table>

4、<tfood>添加表腳

<tfoot>
    <tr>
        <td colspan="3">合計</td>
    </tr>
</tfoot>

解釋：<tfood>元素為表格生成表腳，限制在表格的底部

5、<tbody>添加表主體

<tbody>  
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
</tbody>

解釋：<tbody>元素主要是包含住非表頭表腳的主體部分，有助于表格格式的清晰，更加有助于后續(xù)的CSS和JavaScript的控制

6、<caption>添加表格標(biāo)題

<caption>這是一個人物表</caption>

解釋：<caption>元素給表格添加一個標(biāo)題

示例：

<table border="1" >
    <caption>這是一個標(biāo)題</caption>
    <thead>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </thead>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
    <tfoot>
        <tr>
            <td colspan="3">合計</td>
        </tr>
    </tfoot>
</table>

7、<colgroup>設(shè)置列

<colgroup span="2" >

解釋：該標(biāo)簽是為了處理某個列，span屬性定義處理哪些列。1表示第一列，2表示前兩列。如果要單獨設(shè)置第二列，那么需要聲明兩個，先處理第一個，將列點移入第二位，在處理第二個即可。

示例：

<table border="1" >
    <colgroup  span="1"></colgroup>
    <colgroup  span="1"></colgroup>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
    <tr>
    <td colspan="3">共計有兩人</td>
    </tr>
</table>

8、<col>更靈活設(shè)置列

<colgroup>
    <col>
    <col "1">
</colgroup>

解釋：<col>元素表示單獨一列，一個表示一列，控制更加靈活，如果設(shè)置了span規(guī)則，控制多列

上面的例子可以這樣設(shè)置

table border="1" >
    <colgroup>
        <col>
        <col >
    </colgroup>
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚姻</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
    </tr>
    <tr>
    <td colspan="3">共計有兩人</td>
    </tr>
</table>