文章目录
- 1. 基本结构
- 2. 跨行跨列
- 3. 跨行跨列改进
- 3.1. 演示效果
- 3.2. 代码实现
- 4. 补充
1. 基本结构
- 表格由表格标题、表格头部、表格主体、表格脚注，四部分组成 。
-
表格涉及到的标签
标签 含义 table 表格 caption 表格标题 thead 表格头部 tbody 表格主体 tfoot 表格注脚 tr 每一行 th 、 td 每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ） 
我们用代码来实现它：
border取值为 1，有边框。
cellspacing表格单元格间距，HTML5 不支持了。
<!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="1" cellspacing="0">
<!-- 表格标题 -->
<caption>
学生信息
</caption>
<!-- 表格头部 -->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>30</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>29</td>
<td>回族</td>
<td>群众</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>25</td>
<td>壮族</td>
<td>团党员</td>
</tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tfoot>
</table>
</body>
</html>
2. 跨行跨列
- rowspan ：指定要跨的行数。
- colspan ：指定要跨的列数。
我们可以实现以下 demo 来理解这两个属性：
代码演示如下：
<!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="1" cellspacing="0">
<caption>
课程表
</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>英语</td>
<td>物理</td>
<td>数学竞赛</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
<td>化学</td>
<td>物理</td>
<td>英语</td>
<td>篮球比赛</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>体育</td>
<td>历史</td>
<td>地理</td>
<td>每周一考</td>
</tr>
<tr>
<td>体育</td>
<td>化学</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>社会实践</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>数学</td>
<td>英语角</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>化学</td>
<td>物理</td>
<td>地理</td>
<td>生物</td>
<td>体育</td>
<td>自由活动</td>
</tr>
</tbody>
</table>
</body>
</html>
3. 跨行跨列改进
3.1. 演示效果
用样式来美化表格。
3.2. 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>03-表格标签-跨行跨列改进</title>
</head>
<body>
<table
border="1"
cellspacing="0"
width="700px"
align="center"
height="300px"
>
<!-- 表格标题 -->
<thead>
<tr height="75px">
<th colspan="4">学员信息</th>
</tr>
<tr height="75px">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>毕业院校</th>
</tr>
</thead>
<!-- 表格内容 -->
<tbody>
<tr align="center">
<td>张三</td>
<td>23</td>
<td>男</td>
<td rowspan="3">新中地</td>
</tr>
<tr align="center">
<td>李四</td>
<td>24</td>
<td>女</td>
</tr>
<tr align="center">
<td>王五</td>
<td>25</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
4. 补充
- tr：align:定义表格行的内容对齐方式。
- th：比 td 标签多了一个居中并且加粗的样式
- td
- colspan：规定单元格可横跨的列数
- rowspan：设置单元格可纵跨的行数。
