如何用HTML制作表格？table、tr、td标签创建与样式设计方法详解

在网页开发中，使用HTML制作表格是最基础也最常用的技能之一。HTML通过语义化标签来定义表格结构，配合CSS可以完成各种样式的排版需求。掌握table、tr、td的用法，就能轻松展示规整的数据内容。

一、HTML表格的基本结构

HTML表格由<table>作为最外层容器，内部使用<tr>定义表格行，每一行里用<td>定义普通单元格。如果某一格是表头，可以用<th>代替td，浏览器默认会把th加粗居中。

1. 最简单表格示例

下面代码创建了一个两行三列的表格：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
</table>

二、使用CSS设计表格样式

默认表格没有边框且单元格紧贴，实际项目中通常用CSS添加边框、设置间距和背景。推荐使用border-collapse: collapse让边框合并为单一线条。

1. 基础样式代码

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #333;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}

2. 隔行变色提升可读性

利用nth-child伪类可实现斑马纹效果：

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

三、单元格合并技巧

有时需要把多个单元格合并。横向合并用colspan属性，纵向合并用rowspan属性，写在td或th标签内。

1. 合并两列示例

<table border="1">
  <tr>
    <td colspan="2">横跨两列</td>
    <td>普通格</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

四、常见问题与建议

• 不要使用table做页面整体布局，它只适合展示数据。
• 记得给table加caption或aria-label提升无障碍体验。
• 移动端可配合overflow-x实现横向滚动，避免表格撑破屏幕。

合理运用table、tr、td与CSS，就能快速做出清晰易读的HTML表格，满足大部分后台数据展示场景。

HTML表格table_tr_td表格样式设计修改时间：2026-07-28 12:39:25