HTML表格简介
就是利用代码实现像excel那样的表格，基本结构：
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>上面的表示是一个2行3列的表格，
说明:
1、tr，table row（表格行）；<tr>和</tr>表示行的开始和结束
2、td，table data cell（表格每一个格子），而<td>和</td>表示单元格的开始和结束。
3、<table>和</table>表示整个表格的开始和结束
所以现在你知道了上面的表格是2行3列了，嘿嘿😊。
完整代码实现（记得一定自己敲一遍哦）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格table</title>
</head>
<body>
<table>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</body>
</html>实现效果：
注意：<tr></tr>标签内的<td></td>数量是可以不一样的，可以自己去试一下。
表格标题caption，表头单元格th
基本每一个表格都是有一个标题和列的标题的，在html中也一样。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格table</title>
</head>
<body>
<table>
<caption>表格标题</caption>
<th>1</th>
<th>2</th>
<th>3</th>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</body>
</html>实现效果：
表格语义化
看到文字可能会不知所云，其实本质上就是引入了thead,tbody,tfoot三个标签，让表格在每一部分都分区域，这样的话，在学习到CSS对html进行样式控制的时候更加准确，同时也使得代码更具有逻辑性。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格table</title>
</head>
<body>
<table>
<caption>表格标题</caption>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>内容汇总</td>
<td>内容汇总</td>
</tr>
</tfoot>
</table>
</body>
</html>实现效果：
很多时候tfoot是不需要的，我们可以根据实际情况来使用。
合并行rowspan，合并列colspan
有时候一行（或者一列）对应着比较大的内容时就要使用，对多行（或者多列）内容的一个汇总。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格table</title>
</head>
<body>
<table>
<caption>表格标题</caption>
<thead>
<th colspan="2">1</th>
<th>2</th>
</thead>
<tbody>
<tr>
<td rowspan="2">内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>内容汇总</td>
<td>内容汇总</td>
</tr>
</tfoot>
</table>
</body>
</html>实现效果：
说明：rowspan="2"，就是直接把这一行当成两行来看就行了，colspan同理。
汇总练习
目标展示：
代码实现（一定要自己手动去敲一遍）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
<title>HTML表格table</title>
</head>
<body>
<table>
<caption>学生成绩单</caption>
<thead>
<th>Name</th>
<th>Sex</th>
<th>Age</th>
<th>Math Score</th>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
<td>96.5</td>
</tr>
<tr>
<td>李华</td>
<td>女</td>
<td>19</td>
<td>97</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<!-- <td> </td>
<td> </td> -->
<td colspan="3">193.5</td>
</tr>
</tfoot>
</table>
</body>
</html>说明：
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>这里使用了CSS的表格样式控制，为了能够凸显表格的每一个格子，更好的理解代码。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。