table的作用
<table>: 定义HTML文档中的表格
table的元素
<caption>
标签给表格设置标题
<thead>标签定义表格的页头
<tr>定义表格中的一行
<th>定义表格中的表头
<td>定义表格中的一列
<tbody>标签定义表格的主体
<tfoot>标签定义表格的页脚
举例应用:
<table border="1">
<caption>学生信息</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>
运行结果为:
扩展
-
<colgroup>
标签
可以对表格的列进行组合,从而进行整体格式化。
举例:
<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>
则显示结果为:
- td的colspan属性
设置表格的占用标准表格的几列
举例:
<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>
运行结果为:
- td的rowspan属性
设置表格的占用标准表格的几行
举例:
<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>
运行结果为: