持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情
今天学习如何制作一个有表格的html页面，本文先介绍最基础的表格制作方法，最终可以实现如下效果
这是一个3x4的表格（3列x4行）
其中第一列使用了四行的合并，将第一列的四个单元格合并为一个单元格
学习知识
html里的表格标签
表格标签写法：
html 中的注释写法：
<!-- 注释内容 -->，添加注释的内容不会被展示在html页面中。
<table> <!-- 表示表格部分内容开始 -->
<tr> <!-- 表示表格部分的第一行开始 -->
<td></td> <!-- 表格部分第一行的第一列内容 -->
<td></td> <!-- 表格部分第一行的第二列内容 -->
</tr> <!-- 表示表格部分的第一行结束 -->
</table> <!-- 表示表格部分内容结束 -->
可以看到要实现一个表格的效果至少需要三个双标签：
-
<table></table>标签需要对其设置一个属性，才能出现表格的边框- 属性：
border - 属性值：可以不写，不写的时候默认是1px。也可以设置任意数字，表示边框的宽度，这个属性值的单位px加不加都可以。
- 属性：
-
<tr></tr> -
<td></td>- 属性1：
colspan指的是向右合并时，要合并的单元格总列数。 - 属性值1：写任意数字，单位是
px，可以省略不写。 例：该单元格需要向右合并1个单元格，也就是将2个单元格合并为一个单元格，这里就需要写<td colspan="2"></td>。但是该单元格向右合并一个单元格之后会将原本位于此单元格的内容会被挤出表格整体。如下图：（因此使用这个属性的时候需要考虑整被合并单元格的位置）
- 属性1：
在使用向右合并单元格的时候，将右方的内容删除可以避免上图的结果
<td></td>- 属性2：
rowspan指的是向下合并的时，要合并的总的单元格行数。 - 属性值2：写数字即可，单位
px同样可以省略。和colspan类似的，也会出现原本在表格中的单元格被挤出表格。可以将挤出的内容删除或者将被挤出的单元格变成注释内容。
- 属性2：
注意细节部分
文章开始的页面中表格上方文字使用了 <strong></strong> 和 <center></center> 标签
<center></center>: 使被其包裹的文本内容处于一行的中间位置。- strong 标签在在vscode里写html简单页面（页面效果+实现步骤） - 掘金 (juejin.cn) 有介绍，可以参考。
- 注意使用两个标签的时候，先开始的标签后结束。例如：
<strong><em>加粗且倾斜</em></strong>
获取文本内容
会计档案保管
保管期限 会计档案种类
永久 会计档案保管清册、会计档案销毁清册、年度财务报告、会计档案鉴定意见书
30年 会计档案移交清册、凭证、账簿
10年 其他财务报告、调节表、对账单、纳税申报表
可以直接复制粘贴文本内容，制作本文开始的样式。
实现方法可以参考以下代码： 2022/10/27 - 码上掘金 (juejin.cn)
