HTML表格怎么构建？table标签使用教程与完整示例

HTML表格是页面中展示结构化数据的常用组件，很多新手在初次接触时不知道如何正确使用相关标签构建表格。下面我们就一步步讲解HTML表格的构建方法。

HTML表格的基础标签

构建HTML表格需要用到几个核心标签，每个标签有对应的作用：

• <table>：表格的最外层容器，所有表格内容都放在这个标签内部
• <tr>：定义表格的一行，所有单元格都放在行标签里
• <th>：定义表头单元格，默认文字会加粗居中显示，一般用于表格的列标题
• <td>：定义普通单元格，用来存放具体的数据内容

基础表格构建示例

下面是一个最简单的3行3列表格的构建代码，包含表头和普通数据行：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
    <td>上海</td>
  </tr>
</table>

上面的代码里border="1"是给表格添加边框，方便查看表格结构，实际开发中可以通过CSS控制表格样式。

带表头和表格标题的表格

如果需要给整个表格添加标题，可以使用<caption>标签，它要放在<table>标签内部的开头位置：

<table border="1">
  <caption>员工信息表</caption>
  <tr>
    <th>工号</th>
    <th>岗位</th>
    <th>入职时间</th>
  </tr>
  <tr>
    <td>001</td>
    <td>前端开发</td>
    <td>2023-03-01</td>
  </tr>
  <tr>
    <td>002</td>
    <td>后端开发</td>
    <td>2023-04-15</td>
  </tr>
</table>

单元格合并的用法

实际开发中经常需要合并单元格，分为跨列合并和跨行合并两种情况：

• 跨列合并使用colspan属性，值为要合并的列数
• 跨行合并使用rowspan属性，值为要合并的行数

下面是跨列合并的示例，第一行第一个单元格合并了3列：

<table border="1">
  <tr>
    <th colspan="3">成绩统计表</th>
  </tr>
  <tr>
    <th>科目</th>
    <th>平均分</th>
    <th>最高分</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>85</td>
    <td>98</td>
  </tr>
</table>

表格的分组标签

对于结构复杂的表格，还可以使用分组标签让结构更清晰：

• <thead>：表格的页眉部分，一般放表头行
• <tbody>：表格的主体部分，放具体的数据行
• <tfoot>：表格的页脚部分，一般放汇总行

带分组的表格示例代码如下：

<table border="1">
  <thead>
    <tr>
      <th>商品名</th>
      <th>单价</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本</td>
      <td>5000</td>
      <td>2</td>
    </tr>
    <tr>
      <td>鼠标</td>
      <td>100</td>
      <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">总计</td>
      <td>10500</td>
    </tr>
  </tfoot>
</table>

掌握这些基础的表格构建方法后，就可以根据需求灵活调整表格结构，再通过CSS进一步美化表格样式，满足不同场景的展示需求。

HTML_tabletable标签tr标签td标签th标签修改时间：2026-05-27 00:19:46