一.HTML表格元素简介
表格以“行”与“列”的方式展现数据
<tfoot> 表格尾
二.最简单的表格定义代码示例
<body>
<h2>用户信息表</h2> /*表名*/
<table border="1"> /*表格边界大小*/
<tr> /*第一行*/
<td>张三</td>
<td>23</td>
<td>上海</td>
</tr>
<tr> /*第二行*/
<td>李四</td>
<td>29</td>
<td>北京</td>
</tr>
</table>
</body>
三.表格添加<caption><thead><tbody><tfoot>代码示例
<table border="1" width="100%">
<caption>用户信息表</caption> /*表格标题*/
<thead> /*表格头*/
<tr>
<th>姓名</th> <th>年龄</th>
</tr>
</thead>
<tbody> /*表格内容*/
<tr>
<td>张三</td> <td>20</td>
</tr>
<tr>
<td>李四</td> <td>30</td>
</tr>
</tbody>
<tfoot> /*表格尾*/
<tr>
<td>平均年龄</td> <td>25</td>
</tr>
</tfoot>
</table>
四.表格合并简介
学习表格合并,重点是要分清什么是行合并,什么是列合并
(不清楚的可以打开excle实践操作一下)
行合并:行与行之间合并,是垂直方向的合并
列合并:列与列之间合并,是水平方向的合并
五.表格行合并代码示例(表格合并行属性 rowspan 将多行合并成一行)
<table border="1">
<tr> /*第一行*/
<td colspan="3" >用户信息表</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td rowspan="2">上海</td> /*第一行的第三个单元格和第二行的第三个单元格合并*/
</tr>
<tr>
<td>李四</td>
<td>29</td>
</tr>
</table>
六.表格列合并代码示例(表格合并列属性 colspan 将多列合并成一列)
<table border="1">
<tr>
<td colspan=“3”>用户信息表</td> /*第一行的三列合并*/
</tr>
<tr>
<td>张三</td>
<td>23</td>
<td>上海</td>
</tr>
<tr>
<td>李四</td>
<td>29</td>
<td>北京</td>
</tr>
</table>