html5中使用、、、等标签可构建语义清晰的结构化表格，配合、、增强可访问性，通过rowspan/colspan实现单元格合并，并用css优化样式。
如果您希望在网页中以结构化方式展示行列数据，HTML5 提供了原生的 <table> 元素及其配套标签来构建标准表格。以下是使用 <code><table>、<code><tr>、<code><td> 和 <code><th> 标签制作基础表格的具体步骤：
<h2>一、理解表格基本结构与语义标签</h2>
<p>HTML5 表格由 <code><table> 作为容器，内部通过 <code><tr>（table row）定义行，<code><th>（table header）用于表头单元格（默认加粗居中），<code><td>（table data）用于普通数据单元格。正确嵌套这些标签是生成可访问、语义清晰表格的前提。
<p>1、用 <code><table></table> 包裹整个表格内容。
2、在 <table> 内部添加至少一个 <code><tr> 元素表示一行。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>3、在 <code><tr> 中，使用 <code><th> 定义首行或首列的标题单元格，使用 <code><td> 定义其余数据单元格。
<p>4、确保每行的单元格数量一致，避免跨行跨列未声明的错位。</p>
<h2>二、编写带表头的三行四列表格</h2>
<p>该方法适用于展示具有明确列名的静态数据，如学生成绩、产品参数等。表头使用 <code><th> 可提升屏幕阅读器识别率和样式控制能力。
<p>1、输入 <code><table border="1"> 开始表格（<strong><font color="green">border="1" 仅用于开发阶段可视化边框，正式环境应通过 CSS 控制样式</font></strong>）。
<p>2、插入第一行：<code><tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>。
3、插入第二行：<tr>
<td>张三</td>
<td>89</td>
<td>92</td>
<td>85</td>
</tr>。
4、插入第三行：<tr>
<td>李四</td>
<td>91</td>
<td>87</td>
<td>93</td>
</tr>。
5、闭合表格：
三、为表格添加标题与描述性结构
使用 <caption></caption> 为表格提供可见标题，并通过 <thead>、<code><tbody> 明确划分表头与主体区域，增强语义可读性和 CSS 选择灵活性。
<p>1、在 <code><table> 开始后立即添加 <code><caption>学生成绩表</caption>。
2、将表头行包裹进 <thead><tr>...</tr></thead>。
3、将所有数据行统一放入 <tbody>...</tbody> 中。
4、注意： 和
不是可选装饰，而是 HTML5 推荐的语义分组方式，对打印样式和响应式布局有直接影响。
当需要跨行或跨列显示标题或汇总信息时，需使用 1、在 2、添加 3、合并后必须减少对应位置的 4、例如： 2、为 3、为 4、避免在每个单元格重复写 style，建议后续迁移到 。四、合并单元格实现复杂布局
rowspan 和 colspan 属性。这两个属性必须写在被合并的起始单元格上，并跳过后续对应位置的单元格。<th> 或 <code><td> 标签内添加 <code>colspan="2" 实现横向合并两个列宽。
rowspan="3" 实现纵向跨越三行高度。 或
数量，否则表格结构将错乱。
<th colspan="2">主科成绩</th> 后，该行后续只需再写两个 <th> 即可完成四列表头。
<h2>五、添加基础 CSS 样式提升可读性</h2>
<p>纯 HTML 表格默认样式简陋，通过内联 style 属性可快速启用边框、间距与对齐，无需外部文件即可验证效果。</p>
<p>1、为 <code><table> 添加 <code>style="border-collapse: collapse; width: 100%;" 消除默认单元格间隙。
<th> 和 <code><td> 设置 <code>style="border: 1px solid #ccc; padding: 8px; text-align: left;"。
<th> 单独添加 <code>style="background-color: #f2f2f2;" 区分表头背景。
