3.7 HTML表格标签
表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义，即：table data：数据单元格的内容）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。简单的表格
<table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>table标签的属性：border：这个属性定义了表格边框的宽度，但它现在已不被推荐使用，建议使用CSS来设置边框样式。cellpadding：定义单元格内容和单元格边框之间的空间，但现在也不推荐使用，应使用CSS。cellspacing：定义单元格之间的空间，但现在也不推荐使用，应使用CSS。width 和 height：定义表格的宽度和高度，但同样建议使用CSS。class 和 id：用于应用CSS样式或进行JavaScript操作。td标签的属性colspan：定义单元格应横跨多少列。rowspan：定义单元格应横跨多少行。headers：定义与单元格相关的表头单元格的id列表。
3.7.2 cation标签：表格标题
cation标签用来给表格添加标题：
<tableborder="1"width="300px"height="150px"><caption>表格标题</caption><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>3.7.3 th标签：表格表头
th标签用来给表格添加表头：
<tableborder="1"width="300px"height="150px"><caption>支出表</caption><tr><th>支出</th><th>备注</th></tr><tr><td>32</td><td>买苹果</td></tr><tr><td>24</td><td>买饮料</td></tr></table>th表头的属性colspan：定义单元格应横跨多少列。rowspan：定义单元格应横跨多少行。scope：定义表头单元格与数据单元格之间的关系（例如，“row”、“col”、“rowgroup” 或 “colgroup”）。abbr：定义单元格内容的缩写或简写。headers：定义与单元格相关的表头单元格的id列表。
3.7.4 跨行与跨列
绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了colspan（合并列）和rowspan（合并行）属性来帮助我们实现这一效果。
<tableborder="1"width="300px"height="150px"><h3>单元跨两列</h3><tr><th>姓名</th><thcolspan="2">电话</th></tr><tr><td>张三</td><td>344 22 112</td><td>211 32 123</td></tr><tr><td>李四</td><td>433 31 212</td><td>234 21 654</td></tr></table><tableborder="1"cellspacing="0"><h3>单元跨两行</h3><tr><th>姓名</th><td>张三</td></tr><tr><throwspan="2">电话</th><td>344 22 112</td></tr><tr><td>234 21 654</td></tr></table>3.7.5 thead、tbody、tfoot标签
这些标签分别用于对表格的头部、主体和页脚进行分组。这些元素有助于更好地组织表格内容，特别是当与CSS和JavaScript一起使用时。它们没有特定的属性，但可以使用class和id进行样式或操作。
3.7.6 挑战：课程表的制作
代码：
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><title>课程表</title></head><body><tableborder="1"width="60%"bgcolor="pink"cellpadding="2"><caption>课程表</caption><tralign="center"><tdcolspan="2">时间\日期</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td></tr><tralign="center"><tdrowspan="2">上午</td><td>9:30-10:15</td><td>语文</td><td>数学</td><td>外语</td><td>音乐</td><td>体育</td></tr><tralign="center"><td>10:25-11:10</td><td>数学</td><td>数学</td><td>物理</td><td>化学</td><td>生物</td></tr><tr><tdcolspan="7"> </td></tr><tralign="center"><tdrowspan="2">下午</td><td>14:30-15:15</td><td>体育</td><td>语文</td><td>历史</td><td>政治</td><td>化学</td></tr><tralign="center"><td>15:25-16:10</td><td>音乐</td><td>语文</td><td>数学</td><td>美术</td><td>语文</td></tr></table></body></html>3.7.7 div标签和table标签比较
同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。
3.7.7.1 table 元素布局：
优点：
- 理解比较简单。
- 不同的浏览器看到的效果一般相同。
缺点： - 显示样式和数据绑定在一起。
- 布局的时候灵活度不高。
- 一个页面可能会有大量的 table 元素，代码冗余度高。
- 增加带宽。
- 搜索引擎不喜欢这样的布局。
3.7.7.2 div 元素布局：
优点：
- 符合 W3C 标准。
- 搜索引擎更加友好。
- 样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
- 节省代宽，代码冗余度低。
- 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。
