HTML 表格通过<table>元素及相关标签以行和列的形式呈现结构化数据。表格中的每个单元格可以包含文本、图像、列表、超链接甚至嵌套表格等多种内容类型。现代Web开发中，表格应专门用于呈现表格化数据，而页面布局建议使用<div>元素结合CSS实现。

表格基础结构

核心标签说明

标签	描述
<table>	定义表格容器
<tr>	定义表格中的行
<th>	定义表头单元格，通常加粗居中显示
<td>	定义标准数据单元格
<caption>	定义了表格标题
<colgroup>	指定表中一组一列或多列进行格式设置
<col>	与 <colgroup> 元素一起使用，指定每列的列属性
<tbody>	对表中的正文内容进行定义
<thead>	对表中的标题内容进行定义
<tfooter>	对表中的页脚内容进行定义

基础示例

<table>
  <tr>
    <th>姓名</th>
    <th>职位</th>
    <th>部门</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>项目经理</td>
    <td>技术部</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>前端工程师</td>
    <td>开发部</td>
  </tr>
</table>

试试在线运行代码

输出样式

姓名	职位	部门
张三	项目经理	技术部
李四	前端工程师	开发部

表格样式与增强功能

边框设置
推荐使用CSS而非已弃用的HTML属性设置表格边框：

table, th, td {
  border: 1px solid #ddd;
  border-collapse: collapse; /* 合并相邻边框 */
}

单元格内边距
增加单元格内边距可提升内容可读性：

th, td {
  padding: 12px; /* 增加内容与边框间距 */
  text-align: left; /* 左对齐文本 */
}

表格宽度控制
通过CSS控制表格宽度：

table {
  width: 100%; /* 响应式表格 */
  max-width: 800px; /* 较大宽度限制 */
}

高级表格功能

列合并(colspan)

<table>
  <tr>
    <th colspan="2">联系信息</th>
  </tr>
  <tr>
    <td>电话</td>
    <td>邮箱</td>
  </tr>
</table>

试试在线运行代码 输出样式

联系信息
电话	邮箱

行合并(rowspan)

<table>
  <tr>
    <th rowspan="2">员工编号</th>
    <th>姓名</th>
  </tr>
  <tr>
    <td>王五</td>
  </tr>
</table>

试试在线运行代码 表格标题(caption)

<table>
  <caption>2023年部门绩效表</caption>
  <!-- 表格内容 -->
</table>

试试在线运行代码

语义化表格结构

为提高可访问性和代码清晰度，可使用以下语义化标签：
<thead>：定义表头区域
<tbody>：定义表格主体内容
<tfoot>：定义表格页脚区域
<colgroup>：定义列组样式

<table>
  <colgroup>
    <col style="width:30%">
    <col style="width:70%">
  </colgroup>
  <thead>
    <tr><th>项目</th><th>数值</th></tr>
  </thead>
  <tbody>
    <tr><td>营业收入</td><td>¥1,250,000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>总计</td><td>¥1,250,000</td></tr>
  </tfoot>
</table>

试试在线运行代码

输出样式

项目	数值
营业收入	¥1,250,000
总计	¥1,250,000

视觉增强技术

斑马纹样式

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:nth-child(even) {
  background-color: #fff;
}

th {
  background-color: #f2f2f2;
}

悬停效果

tbody tr:hover {
  background-color: #f5f5f5;
}

嵌套表格
在特定情况下可使用嵌套表格呈现复杂数据结构：

<table>
  <tr>
    <td>主要数据</td>
    <td>
      <table>
        <tr><td>详细数据1</td></tr>
        <tr><td>详细数据2</td></tr>
      </table>
    </td>
  </tr>
</table>

试试在线运行代码 浏览器兼容性
所有现代浏览器（包括Chrome、Firefox、Safari、Edge和Opera）均全面支持HTML表格相关元素和属性。建议使用CSS进行样式控制确保跨浏览器一致性。

标签	Chrome	IE	Firefox	Opera	Safari
<table>	支持	支持	支持	支持	支持
<thead>	支持	支持	支持	支持	支持
<tbody>	支持	支持	支持	支持	支持
<tfoot>	支持	支持	支持	支持	支持
<col>	支持	支持	支持	支持	支持
<caption>	支持	支持	支持	支持	支持

实践建议
语义化结构：合理使用<thead>、<tbody>和<tfoot>等语义化标签
可访问性：为表格添加适当描述和标题，使用scope属性明确表头关联
响应式设计：使用CSS媒体查询确保表格在不同设备上的可读性
性能考虑：避免过度嵌套表格结构，防止渲染性能下降
HTML表格是呈现结构化数据的有效工具，通过合理使用表格相关标签和CSS样式技术，可以创建既美观又功能完善的数据展示界面。遵循Web标准和使用语义化标记有助于提高代码可维护性和可访问性，为用户提供清晰的数据呈现体验。