【融职培训】Web前端学习 第2章 网页重构3 表单与表格元素

一、表格元素

在网页中，我们通常用表格来显示数据，例如下面的学生列表。

姓名	年龄
小红	3岁
小明	2岁

本节我们介绍如何在网页中制作表格，先来看一下表格元素涉及到的标签有哪些，示例代码如下所示：

 1 <table>
 2     <thead>
 3         <tr>
 4             <th>姓名</th>
 5             <th>年龄</th>
 6         </tr>
 7     </thead>
 8     <tbody>
 9         <tr>
10             <td>小红</td>
11             <td>3岁</td>
12         </tr>
13         <tr>
14             <td>小明</td>
15             <td>2岁</td>
16         </tr>
17     </tbody>
18 </table>

这里需要注意的是，表格默认是没有样式的，我们添加了border属性来设置边框，width属性设置表格的宽度。在实际开发中，我们用css来设置表格的样式，而不是用表格的属性。

• table标签：表格容器
• thead标签：表示表头
• tbody标签：表示表体
• tr标签：表示行，内部一定是只有td或th
• th标签：表示表头单元格，字体会加粗
• td标签：表示单元格

合并单元格

• 通过colspan属性可以合并行，示例代码如下，colspan属性可以让单元格在同行占据两个单元格的位置。

 1 <table border="1" width="100%">
 2     <tr>
 3         <td align="center" colspan="2">学生列表</t