HTML表格通过table、tr、td构建基础结构，用th和thead/tbody实现语义化表头，CSS控制边框、尺寸、对齐及类名复用样式。
如果您需要在网页中展示结构化数据，HTML表格是实现这一目标的基础方式。以下是创建HTML数据表格并设置样式的具体步骤：
一、使用table、tr、td标签构建基础表格结构
HTML表格由
| 表示单元格。这是最基础且必须的结构层级，缺少任一标签将导致表格无法正确渲染。
1、在HTML文档的 区域内输入<table>标签作为表格容器。2、在<table>内部添加<tr>标签定义第一行。 立即学习“前端免费学习笔记（深入）”； 3、在<tr>内部添加多个<td>标签，每个<td>代表一个数据单元格。 4、重复步骤2和3，添加更多<tr>以构建多行数据。 5、确保每个<td>标签都正确闭合，例如<td>姓名</td>。 二、添加表头使用th标签并启用thead、tbody语义化分组使用<th>替代<td>可声明表头单元格，浏览器默认加粗居中显示；配合<thead>与<tbody>能提升代码可读性与辅助技术兼容性。 1、将首行<tr>包裹在<thead></thead>标签内。 2、将该行内的所有<td>替换为<th>，例如<th>产品名称</th>。 3、将后续数据行整体包裹在<tbody></tbody>标签内。 4、检查<thead>与<tbody>是否同级嵌套于<table>之下，不可相互嵌套。 三、通过border属性或CSS设置边框样式早期使用<table border="1">可快速启用边框，但现代开发推荐用CSS控制，便于统一维护与响应式适配。 1、在<table>标签内添加style属性：style="border-collapse: collapse;"。 2、为<table>、<th>、<td>分别设置border，例如style="border: 1px solid #ccc;"。 3、为<th>额外添加style="background-color: #f2f2f2;"以区分表头背景。 4、若需隐藏部分边框，将对应border值设为none，如border-bottom: none; 四、利用width、height及text-align控制尺寸与对齐单元格内容默认左对齐、顶部对齐，宽度高度由内容撑开；显式设置可强制统一布局，避免错位。 1、为<table>设置固定宽度，例如style="width: 100%;"或style="width: 800px;"。 2、为<th>和<td>统一添加style="text-align: center; vertical-align: middle;"。 3、为特定列设置宽度，可在<col>标签中定义，例如在<table>开头插入<col style="width: 150px;">。 4、避免对单个<td>直接写height，优先通过padding控制视觉高度，例如padding: 12px 8px; 五、应用class类名结合外部CSS文件实现样式复用将样式抽离至外部CSS文件或<style>块中，通过class绑定可批量控制多个表格，提升可维护性与主题切换能力。 1、为<table>添加class属性，例如<table class="data-table">。 2、在<style>标签或CSS文件中编写.table-data { width: 100%; border-collapse: collapse; }。 3、使用后代选择器定义单元格样式，例如.table-data th, .table-data td { padding: 10px; border: 1px solid #ddd; }。 4、为鼠标悬停行添加交互效果：.table-data tbody tr:hover { background-color: #f9f9f9; }。 |
