当前位置：首页 > 前端开发 > 正文

HTML表格怎么做？

admin
前端开发
2025-06-16
2793

在HTML中创建表格需使用` 标签，内部用 定义行， 定义表头， 定义单元格，通过组合这些标签即可构建行列结构，`。

在HTML中创建表格需使用<table>标签，结合行(<tr>)、表头(<th>)和数据单元格(<td>)标签，以下是详细步骤和示例：

HTML表格怎么做？第1张

基础表格结构

<table border="1">  <!-- border属性可添加边框（可选） -->
  <tr>              <!-- 第一行（表头行） -->
    <th>姓名</th>   <!-- 表头单元格 -->
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>              <!-- 第二行（数据行） -->
    <td>张三</td>   <!-- 数据单元格 -->
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>              <!-- 第三行 -->
    <td>李四</td>
    <td>32</td>
    <td>上海</td>
  </tr>
</table>

关键标签说明

<table>：定义表格容器
<tr>：定义表格行（Table Row）
<th>：定义表头单元格（Header Cell），默认加粗居中
<td>：定义数据单元格（Table Data）

<caption>（可选）：表格标题，放在<table>后首行

<table>
  <caption>用户信息表</caption>
  <tr>...</tr>
</table>

进阶功能

合并单元格

跨列合并：colspan
```
<td colspan="2">合并两列</td>
```
跨行合并：rowspan
```
<td rowspan="2">合并两行</td>
```

分区结构（增强语义）

<table>
  <thead>          <!-- 表头区 -->
    <tr><th>标题1</th><th>标题2</th></tr>
  </thead>
  <tbody>          <!-- 数据区 -->
    <tr><td>数据A</td><td>数据B</td></tr>
  </tbody>
  <tfoot>          <!-- 表脚区 -->
    <tr><td>总计</td><td>100</td></tr>
  </tfoot>
</table>

响应式设计（适应移动端）

<div style="overflow-x:auto;"> <!-- 添加水平滚动 -->
  <table>...</table>
</div>

完整示例（带样式）

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse; /* 消除单元格间隙 */
    }
    th, td {
      border: 1px solid #ddd; /* 浅灰色边框 */
      padding: 12px;          /* 内边距 */
      text-align: left;
    }
    th {
      background-color: #f2f2f2; /* 表头浅灰背景 */
    }
    tr:hover {
      background-color: #f5f5f5; /* 鼠标悬停效果 */
    }
  </style>
</head>
<body>
<table>
  <caption>员工信息表</caption>
  <tr>
    <th>姓名</th>
    <th>部门</th>
    <th>入职日期</th>
  </tr>
  <tr>
    <td>王芳</td>
    <td>市场部</td>
    <td>2020-03-15</td>
  </tr>
  <tr>
    <td>刘明</td>
    <td colspan="2">技术部（2019-08-22入职）</td> <!-- 合并两列 -->
  </tr>
</table>
</body>
</html>