使用HTML表格展示结构化数据需先用table、tr、th、td构建基础结构，再通过CSS添加边框、合并单元格、设置间距、填充及背景色，提升可读性与美观度。
如果您想要在网页中展示结构化数据，比如成绩表、商品列表或时间安排，使用HTML表格是一种常见且有效的方式。以下是创建基础HTML表格并设置样式的具体步骤：
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
一、创建基础HTML表格
使用HTML的
、、| 和 |
标签可以构建一个基本的表格结构。其中定义表格整体，表示表格的一行，| 用于表头单元格， |
用于普通数据单元格。
1、使用
标签开始定义表格。
2、在表格内部使用
标签创建一行。立即学习“前端免费学习笔记（深入）”；
3、在每一行中，使用
标签填写表头内容，例如“姓名”、“年龄”。
4、对于普通数据行，使用
|
标签填入具体数值。
5、重复使用
|
和添加更多数据行。
二、添加表格边框样式
默认情况下，HTML表格不显示边框。通过CSS的border属性可以为表格及其单元格添加可见边框，使结构更清晰。
1、在
2、为这些元素设置border属性，例如：border: 1px solid black;。
3、确保为table、th和td都单独设置边框，否则可能出现边框断裂或双线效果。
三、合并表格单元格
当需要跨行或跨列显示内容时，可使用colspan和rowspan属性来合并单元格，提升表格的可读性和布局灵活性。
1、若要横向合并单元格，在
|
或 |
标签中添加colspan="n"，n代表合并的列数。
2、若要纵向合并单元格，则使用rowspan="n"，n代表合并的行数。
3、合并后需删除被覆盖的多余单元格，以保持表格结构正确。
四、设置表格间距与填充
通过CSS的padding和border-spacing属性可以调整单元格内内容与边框的距离以及单元格之间的空隙，改善视觉体验。
1、使用padding属性增加单元格内容与边框之间的空白区域。
2、若使用border-collapse: separate;（默认值），可通过border-spacing设置单元格间距。
3、注意border-spacing不能与border-collapse: collapse同时生效。
五、应用背景颜色与文字对齐
为提升表格美观度，可以为表头或特定行设置背景色，并统一文本对齐方式。
1、使用background-color属性为
|
设置浅灰色或其他醒目颜色作为标题背景。
2、通过text-align属性将表头文字居中显示，例如text-align: center;。
3、也可为奇偶行设置不同背景色，增强可读性，利用:nth-child(even/odd)选择器实现。
|
|
|
