table的作用
<table>: 定義HTML文檔中的表格
table的元素
<caption>標(biāo)簽給表格設(shè)置標(biāo)題
<thead>標(biāo)簽定義表格的頁頭
<tr>定義表格中的一行
<th>定義表格中的表頭
<td>定義表格中的一列
<tbody>標(biāo)簽定義表格的主體
<tfoot>標(biāo)簽定義表格的頁腳
舉例應(yīng)用：
<table border="1">
<caption>學(xué)生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>24</td>
</tr>
</tfoot>
</table>
運(yùn)行結(jié)果為：
擴(kuò)展
-
<colgroup>標(biāo)簽
可以對(duì)表格的列進(jìn)行組合，從而進(jìn)行整體格式化。
舉例：
<head>
<style>
#colgroup1 {
background-color: red
}
#colgroup2 {
background-color: green;
}
</style>
</head>
<body>
<table border="1">
<colgroup id="colgroup1" span="1">
<colgroup id="colgroup2" span="1">
<thead>
<tr>
<th id="name">姓名</th>
<th id="age">年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="name one">張三</td>
<td headers="age one">25</td>
</tr>
<tr>
<td headers="name two">李四</td>
<td headers="age two">23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>24</td>
</tr>
</tfoot>
</table>
</body>
則顯示結(jié)果為：
- td的colspan屬性
設(shè)置表格的占用標(biāo)準(zhǔn)表格的幾列
舉例：
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td colspan="2">25</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>56</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>24</td>
<td>80</td>
</tr>
</tfoot>
</table>
運(yùn)行結(jié)果為：
- td的rowspan屬性
設(shè)置表格的占用標(biāo)準(zhǔn)表格的幾行
舉例：
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
<td rowspan="2">90</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>24</td>
<td>80</td>
</tr>
</tfoot>
</table>
運(yùn)行結(jié)果為：
