如何制作HTML表格？table、tr、td标签怎么用？基础样式如何设置？

HTML表格是网页中展示行列结构数据的常用组件，核心由table、tr、td三个标签配合实现，同时可以通过CSS设置样式让表格更符合页面设计需求。

HTML表格的核心标签

table标签

table是表格的最外层容器，所有表格相关的内容都需要放在这个标签内部，它本身不显示具体的内容，仅用来定义表格的范围。

tr标签

tr是表格的行标签，每个tr代表表格中的一行，行内可以放置多个单元格。表格有多少行就对应多少个tr标签。

td标签

td是表格的标准单元格标签，用来存放具体的内容，每个tr内部的td数量就是当前行的列数。

创建基础HTML表格

下面是一个包含3行4列的基础表格示例，表头部分使用<th>标签实现，<th>是表头单元格，默认文字会加粗居中显示：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
    <td>女</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>22</td>
    <td>男</td>
    <td>广州</td>
  </tr>
</table>

表格基础样式设置

默认的HTML表格没有边框，单元格之间也有默认间距，我们可以通过CSS调整样式让表格更易读。

边框设置

给table标签设置border属性可以添加边框，不过这种写法边框只会在表格最外层和单元格内部显示，样式不够统一，更推荐用CSS设置：

/* 给表格和所有单元格添加1px黑色实线边框 */
table, th, td {
  border: 1px solid #333;
}

边框合并

上面的样式设置后，单元格之间的边框会有重叠，显示效果是两个边框的宽度，可以使用border-collapse属性合并边框：

table {
  border-collapse: collapse;
}

单元格间距与内边距

cellspacing属性用来设置单元格之间的间距，cellpadding用来设置单元格内容和边框的内边距，不过这两个是HTML属性，更推荐用CSS的padding属性设置内边距：

th, td {
  padding: 8px 12px;
  text-align: center; /* 内容水平居中 */
}

完整样式示例

把上面的样式整合后，表格的显示效果会更美观：

<style>
  table {
    border-collapse: collapse;
    width: 80%;
    margin: 20px auto;
  }
  th, td {
    border: 1px solid #333;
    padding: 8px 12px;
    text-align: center;
  }
  th {
    background-color: #f0f0f0;
  }
</style>
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
    <td>女</td>
    <td>上海</td>
  </tr>
</table>

表格常用属性补充

• colspan：单元格跨列属性，设置后当前单元格可以占据多列的宽度，比如<td colspan="2">合并两列</td>
• rowspan：单元格跨行属性，设置后当前单元格可以占据多行的高度，比如<td rowspan="2">合并两行</td>
• caption：表格标题标签，放在table标签内的最前面，用来定义表格的标题内容

注意：HTML表格仅适合展示结构化的数据，不要用来做网页布局，布局应该使用div、flex、grid等现代布局方案。

HTML_tabletrtd表格样式修改时间：2026-06-06 18:26:01