HTML: HTML 表格
表格(<table>）用于在网页上展示结构化数据。它们由行（<tr>）和单元格（<td>/<th>）构成，是用于展示日程安排、价格表、数据报告及类似内容的标准选择。
1. 表格的基本结构
一个最简单的表格至少包含 <table>、行 <tr> 和数据单元格 <td>：
▶ 示例
HTML
<table border="1" width="100%">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
2. 表格的常用属性
你可以给 <table> 和 <td> 添加一些基础属性来控制外观——不过要注意，这些属性大多已废弃（deprecated），CSS 是更推荐的替代方式。但初学时了解它们有助于理解表格的显示机制：
▶ 示例
HTML
<table border="1" width="100%">
<tr>
<th align="left">姓名</th>
<th width="60%">简介</th>
</tr>
<tr>
<td valign="top">张三</td>
<td>前端开发工程师</td>
</tr>
</table>
| 属性 | 作用 | 替代方案 |
|---|---|---|
border |
设置表格边框（如 border="1"） |
CSS border |
width |
表格或单元格宽度 | CSS width |
align |
水平对齐（left / center / right） | CSS text-align |
valign |
垂直对齐（top / middle / bottom） | CSS vertical-align |
⚠️ 重要提醒： 上面这些属性（
border、width、align、valign）在 HTML5 中已废弃，border="1" 虽然浏览器仍然支持，但只是为了兼容旧代码。实际项目中应使用 CSS 控制表格样式，例如用 border、text-align、vertical-align 等属性。本站在style.css中已预置了表格样式，所以你看不到 border="1" 也能看到整齐的边框。
3. 单元格合并
用 colspan 横向合并多列，rowspan 纵向合并多行：
▶ 示例
HTML
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>邮箱</td>
<td>zhang@mail.com</td>
</tr>
<tr>
<td>电话</td>
<td>138-0000-0000</td>
</tr>
</table>
4. 表格的语义化结构
除了基本的 <table> 和 <tr>，HTML 还提供了一组语义化标签来组织表格的各个部分：
▶ 示例
HTML
<table border="1">
<caption>2026年销售统计表</caption>
<thead>
<tr>
<th>季度</th>
<th>销售额</th>
<th>利润</th>
</tr>
</thead>
<tbody>
<tr><td>Q1</td><td>100万</td><td>20万</td></tr>
<tr><td>Q2</td><td>120万</td><td>25万</td></tr>
</tbody>
<tfoot>
<tr><td>合计</td><td>220万</td><td>45万</td></tr>
</tfoot>
</table>
<caption>表格标题，默认显示在表格上方<thead>表头区域，通常包含列标题行<tbody>表格主体，存放数据行<tfoot>表尾区域，适合放汇总或统计信息
❓ 常见问题
Q 可以用表格来做页面布局吗？
A 绝对不可以。用表格做页面布局是20年前的做法，现在完全被淘汰了。原因：1）表格布局难以维护，改一个地方可能影响整个页面；2）表格不是语义化的布局方式，搜索引擎和屏幕阅读器会误解内容结构；3）表格布局在移动端显示效果极差。表格只用来展示数据（如成绩单、价格表、日程安排），布局应该用CSS的Flexbox或Grid。
Q
colspan和rowspan是什么？怎么用？A
colspan用于水平合并单元格（跨列），rowspan用于垂直合并单元格（跨行）。例如：<td colspan="2">表示这个单元格横跨2列；<td rowspan="3">表示这个单元格纵跨3行。常见场景：表头跨列合并（如"总分"横跨语文、数学、英语三列）、分组标题跨行合并。注意：合并后要删除被合并位置的单元格，否则表格会错位。Q
<thead>、<tbody>、<tfoot>是必须的吗？A 不是必须的，但强烈建议使用。它们的作用是语义化表格结构：
<thead>包裹表头行，<tbody>包裹数据行，<tfoot>包裹汇总行。好处：1）浏览器可以独立滚动表头和数据；2）打印时表头会在每页重复显示；3）屏幕阅读器能更好地理解表格结构；4）方便CSS样式控制。即使只有一行数据，也建议用<tbody>包裹。📖 小节
<table>定义表格，<tr>行，<th>表头，<td>数据<caption>表格标题，<thead>表头，<tbody>主体，<tfoot>表尾colspan水平合并，rowspan垂直合并- 不要用表格做页面布局（那是 CSS 的事），表格只用来展示数据
📝 作业
- 课程表：用
<table>制作一个课程表，包含表头（星期一至星期五）和至少 4 行课程安排。 - 合并练习：创建一个包含合并单元格的成绩表，表头有"姓名"和"各科成绩"（colspan 覆盖语文、数学、英语三列）。
