HTML <table> 标签介绍
作者: 字符空间 发布时间: 2025-11-27 阅读: 6
<table> 标签是HTML中用于创建表格的标签，它可以用来展示行列结构的数据。
基本语法结构
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
表格相关标签
| 标签 | 说明 | 必需 |
|---|
| <table> | 定义表格容器 | 是 |
| <tr> | 定义表格行 | 是 |
| <td> | 定义表格数据单元格 | 是 |
| <th> | 定义表头单元格 | 否 |
| <caption> | 定义表格标题 | 否 |
| <thead> | 定义表头区域 | 否 |
| <tbody> | 定义表格主体区域 | 否 |
| <tfoot> | 定义表格页脚区域 | 否 |
使用实例
1. 基本表格
2. 带标题的表格
| 工号 | 姓名 | 部门 | 工资 |
|---|
| 001 | 王五 | 技术部 | 8000 |
| 002 | 赵六 | 市场部 | 7000 |
3. 使用行列合并
| 月份 | 销售数据 |
|---|
| 产品A | 产品B |
|---|
| 1月 | 100 | 150 |
| 2月 | 120 | 180 |
4. 完整结构表格（thead, tbody, tfoot）
| 季度 | 销售额 | 增长率 |
|---|
| 第一季度 | ¥100,000 | 10% |
| 第二季度 | ¥120,000 | 20% |
| 总计 | ¥220,000 | 15% |
表格属性（HTML4，现在建议使用CSS）
| 属性 | 说明 | 示例 |
|---|
| border | 表格边框宽度 | border="1" |
| cellspacing | 单元格间距 | cellspacing="0" |
| cellpadding | 单元格内边距 | cellpadding="5" |
| width | 表格宽度 | width="100%" |
| align | 表格对齐方式 | align="center" |
单元格属性
| 属性 | 适用标签 | 说明 |
|---|
| colspan | td, th | 单元格横跨的列数 |
| rowspan | td, th | 单元格横跨的行数 |
| align | td, th | 水平对齐方式 |
| valign | td, th | 垂直对齐方式 |
行列合并实例详解
列合并（colspan）
行合并（rowspan）
复杂表格实例
| 项目名称 | 时间节点 | 负责人 |
|---|
| 开始时间 | 结束时间 | 状态 |
|---|
| 网站重构 | 2024-01-01 | 2024-03-31 | 已完成 | 张三 |
| APP开发 | 2024-02-01 | 2024-06-30 | 进行中 | 李四 |
表格分组实例
| 产品 | 价格 | 库存 |
|---|
| 笔记本电脑 | ¥5,999 | 50 |
| 智能手机 | ¥3,299 | 100 |
可访问性最佳实践
- 为表格添加有意义的caption
- 使用th标签定义表头
- 为复杂表格使用scope属性
- 使用thead、tbody、tfoot分组
- 为表格添加summary属性（HTML4）或使用ARIA标签
现代替代方案比较
| 场景 | 推荐方案 | 理由 |
|---|
| 数据展示 | table标签 | 语义明确，可访问性好 |
| 页面布局 | CSS Grid/Flexbox | 更灵活，响应式更好 |
| 表单布局 | CSS布局 | 语义更清晰 |
注意事项
- 避免使用表格进行页面布局
- 表格应该用于展示表格化数据
- HTML5中移除了很多表现性属性，建议使用CSS
- 确保表格在移动设备上可读
- 为复杂表格提供适当的描述
<table> 标签是展示结构化数据的理想选择，正确使用可以创建出既美观又可访问的数据表格。
❤️收藏
👍点赞
用户评论
发表评论