HTML5基础——4、表格
大家好，我是阿赵。继续学习h5。这次来学习一下表格。
表格的用途很广泛，它方便我们对内容的整理和显示。在网页上面也可以显示表格。
一、 基础的表格显示
<body><table border="1px" width="600px"><thead>表格1</thead><tbody><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>小明</td><td>男</td><td>18</td></tr><tr><td>小红</td><td>女</td><td>16</td></tr><tr><td>小强</td><td>男</td><td>19</td></tr></table>
</body>
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 小明 | 男 | 18 |
| 小红 | 女 | 16 |
| 小强 | 男 | 19 |
表格的结构是通过<table>标签作为包裹，然后里面的<thead>标签是表格的头部区域，类似于整个表格的标题。
接下来通过<tr>标签来表达一行，在里面，如果是标签，则是表头，代表着列标题。如果是，则是正常单元格内容。
需要注意的是，单元格里面同样是可以放各种内容的：
<!DOCTYPE html>
<html lang="zh_CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是标题</title>
</head><body><table border="1px" width="600px"><thead>表格1</thead><tbody><tr><th>姓名</th><th>性别</th><th>年龄</th><th>跳转</th></tr><tr><td>小明</td><td>男</td><td>18</td><td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px"></td></tr><tr><td>小红</td><td>女</td><td>16</td><td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px"></tr><tr><td>小强</td><td>男</td><td>19</td><td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px"></tr></table>
</body></html>
| 姓名 | 性别 | 年龄 | 跳转 |
|---|---|---|---|
| 小明 | 男 | 18 | 百度 谷歌 |
| 小红 | 女 | 16 | 百度 谷歌 |
| 小强 | 男 | 19 | 百度 谷歌 |
二、 合并单元格和单元格属性
把上面的代码再改一下，变成这样：
<!DOCTYPE html>
<html lang="zh_CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是标题</title>
</head><body><table border="1px" width="600px"><thead>表格1</thead><tbody><tr><td colspan="5" align="center">人员列表</td></tr><tr><th rowspan="4">5年3班</th><th>姓名</th><th>性别</th><th>年龄</th><th>跳转</th></tr><tr><td>小明</td><td>男</td><td>18</td><td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px"></td></tr><tr><td>小红</td><td>女</td><td>16</td><td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px"></tr><tr><td>小强</td><td>男</td><td>19</td><td><a href="https://www.baidu.com">百度</a> <a href="google.com">谷歌</a><img src="img/azhao.png" width="30px"></tr></table>
</body></html>
| 人员列表 | ||||
| 5年3班 | 姓名 | 性别 | 年龄 | 跳转 |
|---|---|---|---|---|
| 小明 | 男 | 18 | 百度 谷歌 | |
| 小红 | 女 | 16 | 百度 谷歌 | |
| 小强 | 男 | 19 | 百度 谷歌 | |
这里主要的修改有2点：
1、 合并单元格
在第一行，我加入了这样的内容：
<tr><td colspan="5" align="center">人员列表</td></tr>
这里的colspan是跨列合并单元格。从当前单元格开始，加上自己总共合并多少个单元格。
然后在第一列里面，我加入了：
<th rowspan="4">5年3班</th>
这里rowspan是跨行合并单元格，以当前单元格为开始，总共合并多少格。
需要注意的是，我在第一行的第一列进行跨行合并，结果是后面的内容全部都往后推了一格。
2、 单元格属性
在上面的跨列合并单元格时，我写了一个
align="center"
这个就是单元格的属性，align是对齐属性，center是中间，所以表达的是中间对齐的意思。
除了align，单元格还有其他属性，比如：
border 边框
cellpadding 单元格边沿与内容之间的空白，默认1像素
cellspacing 单元格之间的空白，默认2像素
width 表格的宽度，单位是像素px或者百分比。