一、基础表格结构
一个完整的表格由以下标签构成：
| 姓名 | 年龄 |
|---|---|
| 张三 | 25 |
| 李四 | 30 |
| 总计 | 2人 |
二、核心标签详解
| (Table Data) 定义标准单元格，用于存放数据。 常用属性：
colspan="2"：横向合并2个单元格 rowspan="2"：纵向合并2个单元格 | (Table Header) 定义表头单元格（自动加粗居中）。 属性同 | ，额外支持：
scope="col"：声明是列标题 scope="row"：声明是行标题 结构化标签： ：表头区域（可包含多个 |
|---|---|---|
| 个人信息 | |
|---|---|
| 张三 | 25岁 |
| 前端工程师 | |
渲染效果：
|--------个人信息--------|
| 张三 | 25岁 |
| |--------------|
| | 前端工程师 |
五、专业技巧 & 最佳实践
1.用 CSS 替代传统属性：
table {
border-collapse: collapse; /* 合并边框 */
width: 100%;
margin: 20px auto;
}
td, th {
border: 1px solid #ddd;
padding: 8px; /* 替代cellpadding */
text-align: left;
}
2.响应式表格方案：
@media (max-width: 600px) {
table, thead, tbody, td, th, tr {
display: block;
}
td::before {
content: attr(data-label); /* 使用data-label属性显示列名 */
font-weight: bold;
}
}
HTML 配合：
3.增强可访问性：
为
使用
4. 斑马纹效果：
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
六、常见误区
避免用表格布局页面 （这是20年前的用法，现在用Flexbox/Grid）
不要嵌套多层表格 （会导致性能问题和代码混乱）
表尾
七、现代替代方案
对于复杂交互表格，推荐使用：
CSS Grid：二维布局系统
组件库：如 Ant Design / Material UI 的表格组件
专用库：如 Tabulator 或 Handsontable
总结
表格的核心价值是清晰展示结构化数据。关键记住：
使用语义化标签（thead/tbody/tfoot）
用 CSS 控制样式（特别是边框合并）
合并单元格用 colspan/rowspan
始终考虑可访问性（scope/caption）