HTML表格用创建，专用于二维结构化数据；核心标签包括，可用//分组，配合、colspan、rowspan增强语义与功能，并需CSS优化样式和可访问性。
HTML表格用 <table> 标签创建，核心是把数据按行和列组织起来，不是用来做页面布局的，而是为了语义清晰、结构可读、便于维护和辅助技术识别。<h3>基础标签各司其职</h3>
<p>每个表格都由几个关键标签配合完成：</p>
<ul><li><code><table> 是最外层容器，所有表格内容必须包在里面
<li><code><tr> 表示一行（table row），不能单独存在，必须嵌在 <code><table> 或 <code><thead>/</thead>
<tbody>/</tbody>
<tfoot> 中
<li><code><th> 是表头单元格，通常放在第一行或第一列，浏览器默认加粗+居中，语义上表示“标题”
<li><code><td> 是普通数据单元格，放实际内容，如姓名、数字、日期等
<h3>用 thead / tbody / tfoot 划分逻辑区域</h3>
<p>对稍复杂的表格，建议用这三个标签分组，不只让结构更清晰，也方便写CSS、提升屏幕阅读器体验：</p>
<ul><li><code><thead> 包裹表头行（比如列名那一行），一般只出现一次
<li><code><tbody> 包裹主体数据行，可以有多个，适合动态插入或分页加载
<li><code><tfoot> 放表格底部汇总信息（如“合计”“平均值”），会自动显示在 <code><tbody> 下方，即使代码写在前面也一样
<p>注意：<code><thead> 和 <code><tfoot> 必须在 <code><tbody> 之前声明，但渲染顺序不受影响。<h3>添加标题和合并单元格</h3>
<p>让表格更完整、更实用，还有两个常用功能：</p>
<ul><li>用 <code><caption></caption> 在 <table> 开头加一个总标题，它会居中显示在表格上方，对SEO和无障碍支持很重要
<li>用 <code>colspan 属性让一个单元格横跨多列（比如“学生成绩汇总”占满整行），用 rowspan 实现跨行（比如“张老师”对应他带的三门课）
例如：<td colspan="3">全班平均分：86.5</td> 就会占三列宽度。
样式和可访问性要点
纯HTML表格默认很简陋，需要CSS配合才能好用：
- 设置
border-collapse: collapse让边框合并，避免双线难看 - 给
<th> 加 <code>scope="col"或scope="row"，帮助读屏软件理解表头关联哪一列/行 - 为
<td> 和 <code><th> 设置 <code>padding和text-align，提升可读性 - 鼠标悬停时高亮整行（
tr:hover），能显著改善浏览体验
别忘了：表格只用于二维结构化数据，比如课程表、订单列表、参数对比。页面整体布局请用 CSS Flexbox 或 Grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
