四、表格
1、表格是什么
在早些年Web1.0时代，表格常用于网页布局。但在Web2.0时代，这种方法已经抛弃了，网页布局都是使用CSS来实现的(这一点学了CSS就知道) 。但是表格在数据展示的实际应用中还是很清晰的。
2、表格的基本结构
在HTML中，一个表格由下面3个部分组成，这里举例不需要考虑border这个属性这是CSS的内容，只需要知道表格的结构，表格如何制作出来的。
- 表格：table标签
- 行：tr标签
- 单元格：td标签
<html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
3、表格的完整结构
在HTML中，一个完整的表格有会有以下标签
- 表格标题：caption
- 表头单元格：th
- 巧记：tr为行，th为表格第一个，td为单元格。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1px">
<caption>这是表格标题，必须放在tr的前面</caption>
<tr>
<th>这是表头1</th>
<th>这是表头2</th>
<th>这是表头3</th>
</tr>
<tr>
<th>这是表头单元格1</th>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<th>这是表头单元格2</th>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</body>
</html>
表格的一些属性（CSS会提到，这里重点是理解表格如何制作的）
- border=“1px” 边框设置为1px px为像素这里不必深入研究
- align=“center” 将表格居中
- cellpadding=“值” 这是修改单元格与文字的距离
- cellspacing=“值” 这是修改单元格与单元格的距离
<html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <table border="1" align="center" cellpadding="5" cellspacing="0"> <caption>这是表格标题，必须放在tr的前面</caption> <tr> <th>这是表头1</th> <th>这是表头2</th> <th>这是表头3</th> </tr> <tr> <th>这是表头单元格1</th> <td>单元格</td> <td>单元格</td> </tr> <tr> <th>这是表头单元格2</th> <td>单元格</td> <td>单元格</td> </tr> </table> </body> </html>
4、合并单元格
4.1合并行：rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1px">
<caption>学生成绩单</caption>
<tr>
<th>学科</th>
<th>班级</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<th>语文</th>
<td rowspan="2">1班</td>
<td>张三</td>
<td>100</td>
</tr>
<tr>
<th>数学</th>
<td>李四</td>
<td>80</td>
</tr>
</table>
</body>
</html>
4.2合并列：colspan
我们把成绩这个单元格向右合并两个单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<caption>成绩单</caption>
<tr>
<th>姓名</th>
<th>学号</th>
<th colspan="2">成绩</th>
</tr>
<tr>
<th>张三</th>
<td>1</td>
<td>80分</td>
<td>90分</td>
</tr>
<tr>
<th>李四</th>
<td>1</td>
<td>50分</td>
<td>96分</td>
</tr>
</table>
</body>
</html>
5、标准规范
在表格中，我们有一些规范，例如
- 在表格的开头用thead标签
- 在表格的身体（内容部分）用tbody标签
- 在表格的尾部（表格结束部分）用tfoot标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<caption>成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>学号</th>
<th colspan="2">成绩</th>
</tr>
</thead>
<tbody>
<tr>
<th>张三</th>
<td>1</td>
<td>80分</td>
<td>90分</td>
</tr>
<tr>
<th>李四</th>
<td>1</td>
<td>50分</td>
<td>96分</td>
</tr>
</tbody>
<tfoot>
<th>总评</th>
<td colspan="3">优</td>
</tfoot>
</table>
</body>
</html>