本文共 4206 字，大约阅读时间需要 14 分钟。
一、表格元素汇总
表格的基本构成最少需要三个元素：<table>、<tr>、<td>，其他的一些作为可选辅助存在
| 元素名称 | 说明 |
| table | 表示表格 |
| thead | 表示标题行 |
| tbody | 表示表格主体 |
| tfoot | 表示表脚 |
| tr | 表示一行单元格 |
| th | 表示标题行单元格 |
| td | 表示单元格 |
| col | 表示一列 |
| colgroup | 表示一组咧 |
| caption | 表示表格标题 |
二、构建表格解析
1、<table><tr><td>构建基础表格
| 1 2 3 4 5 6 7 8 9 10 11 12 | < table border = "1" > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > </ table > |
解释：<table>元素表示一个表格的声明，<tr>元素表示表格的一行，<td>元素表示一个单元格。默认情况下表格是没有边框的，所以，在<table>元素增加一个border属性，设置为1即可显示边框。
2、<th>为表格添加标题单元格
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < table border = "1" style = "width: 300px" > < tr > < th >姓名</ th > < th >性别</ th > < th >婚姻</ th > </ tr > < tr > < th >张三</ th > < th >男</ th > < th >未婚</ th > </ tr > < tr > < th >李四</ th > < th >女</ th > < th >已婚</ th > </ tr > </ table > |
解释：<th>元素主要是添加标题行的单元格。实际作用就是将内部文字居中且加密。这里使用了一个通用属性style，主要用于CSS样式设置，以后会涉及到。<th><td>均属于单元格，包含了两个合并属性：colspan（左右合并），rowspan（上下合并）等。
例如：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | < table border = "1" style = "width: 300px" > < tr > < th >姓名</ th > < th >性别</ th > < th >婚姻</ th > </ tr > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > < tr > < td colspan = "3" >共计有两人</ td > </ tr > </ table > |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < table border = "1" style = "width: 300px" > < tr > < th rowspan = "4" >基本情况</ th > < th >姓名</ th > < th >性别</ th > < th >婚姻</ th > </ tr > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > </ table > |
3、<thead>添加表头
| 1 2 3 4 5 6 | < thead > < tr > < td >###</ td > < td >###</ td > </ tr > </ thead > |
解释：<thead>元素就是限制和规范了表格的表头部分。尤其是以后动态生成表头，它的位置是不固定的，使用此元素可以限定在开头的位置
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < table border = "1" style = "width: 300px" > < thead > < th >姓名</ th > < th >性别</ th > < th >婚姻</ th > </ thead > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > </ table > |
4、<tfood>添加表脚
| 1 2 3 4 5 | < tfoot > < tr > < td colspan = "3" >合计</ td > </ tr > </ tfoot > |
解释：<tfood>元素为表格生成表脚，限制在表格的底部
5、<tbody>添加表主体
| 1 2 3 4 5 6 7 8 9 10 11 12 | < tbody > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > </ tbody > |
解释：<tbody>元素主要是包含住非表头表脚的主体部分，有助于表格格式的清晰，更加有助于后续的CSS和JavaScript的控制
6、<caption>添加表格标题
| 1 | < caption >这是一个人物表</ caption > |
解释：<caption>元素给表格添加一个标题
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | < table border = "1" style = "width: 300px" > < caption >这是一个标题</ caption > < thead > < th >姓名</ th > < th >性别</ th > < th >婚姻</ th > </ thead > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > < tfoot > < tr > < td colspan = "3" >合计</ td > </ tr > </ tfoot > </ table > |
7、<colgroup>设置列
| 1 | < colgroup span = "2" style = "background:red;" > |
解释：该标签是为了处理某个列，span属性定义处理哪些列。1表示第一列，2表示前两列。如果要单独设置第二列，那么需要声明两个，先处理第一个，将列点移入第二位，在处理第二个即可。
示例：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < table border = "1" style = "width: 300px" > < colgroup style = "background: white;" span = "1" ></ colgroup > < colgroup style = "background: red;" span = "1" ></ colgroup > < tr > < th >姓名</ th > < th >性别</ th > < th >婚姻</ th > </ tr > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > < tr > < td colspan = "3" >共计有两人</ td > </ tr > </ table > |
8、<col>更灵活设置列
| 1 2 3 4 | < colgroup > < col > < col style = "bakgroup:red;span=" "1"> </ colgroup > |
解释：<col>元素表示单独一列，一个表示一列，控制更加灵活，如果设置了span规则，控制多列
上面的例子可以这样设置
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | table border="1" style="width: 300px"> < colgroup > < col > < col style = "background: red;" > </ colgroup > < tr > < th >姓名</ th > < th >性别</ th > < th >婚姻</ th > </ tr > < tr > < td >张三</ td > < td >男</ td > < td >未婚</ td > </ tr > < tr > < td >李四</ td > < td >女</ td > < td >已婚</ td > </ tr > < tr > < td colspan = "3" >共计有两人</ td > </ tr > </ table > |