首页 > 文章 > 前端

HTML表格制作详解：table、tr、td标签用法

时间：2025-08-25 19:04:05 153浏览收藏

想要轻松掌握HTML表格制作？本文为你详细解读`

`、``、``、``、``进行语义化区分，再到使用`

`等核心标签的用法，助你快速构建结构清晰的网页表格。从基础的表格创建到利用`

`定义表头，本文循序渐进地讲解HTML表格的各项技巧。同时，深入剖析`colspan`和`rowspan`属性，教你玩转单元格的跨列与跨行。更重要的是，强调利用CSS对表格进行美化，包括边框合并、内边距调整、斑马线效果以及表头样式设置，让你摆脱表格“丑陋”的刻板印象，打造美观且易于维护的HTML表格布局。无论你是前端新手还是有一定经验的开发者，都能从中获益，提升你的网页设计能力。

制作HTML表格的核心是使用

标签作为容器，其内部通过定义行，、和语义化标签区分表头、主体和脚注，提升可读性和辅助功能；2. 通过

定义单元格；1. 使用

标签定义表头单元格，并可使用colspan和rowspan属性实现单元格的跨列和跨行；3. 表格样式应由CSS控制，包括border-collapse合并边框、padding增加内边距、nth-child实现斑马线效果、th设置背景色与字体色等，以实现美观且易维护的表格布局。

HTML表格怎么制作？table、tr和td标签如何使用？

HTML表格的制作核心在于

标签，它像一个容器，承载着整个表格结构。而表格的每一行则由（table row）标签定义，行内的每个单元格内容则放在

（table data）标签里。简单来说，就是先有表格，再有行，行里面再放单元格，这是最基础的层级关系。

解决方案

要制作一个基本的HTML表格，你需要先声明

标签。在

内部，你会放置一个或多个标签，每个代表表格的一行。接着，在每个内部，你需要放置一个或多个和，表格的结构意图就非常清晰了。则常用于放置表格的汇总信息，比如总计、平均值等。这种结构化的好处在于，当表格内容非常多时，浏览器可以独立地滚动的内容，而和保持固定，用户体验会好很多。而且，对于打印页面，有些浏览器能够智能地在每一页重复打印的内容，这在处理长表格时尤其有用。

单元格如何跨行或跨列？rowspan 和 colspan 属性详解

有时候，表格的布局并不是规规矩矩的每行每列都对齐，你可能会遇到需要某个单元格横跨多列，或者纵跨多行的情况。这时候，colspan和rowspan这两个属性就派上用场了。它们是

标签，每个

标签则代表该行中的一个数据单元格。

一个最简单的表格结构看起来会是这样：


  
    单元格1
    单元格2
  
  
    单元格3
    单元格4

这个例子会生成一个两行两列的表格。如果你想给表格加上边框，最直接（但不推荐用于生产环境，因为样式应该由CSS控制）的方式是给

标签添加border属性，比如

。不过，这只是个快速预览效果的方法，真正做项目时，我们肯定是用CSS来美化表格。

表格的头部和主体内容如何区分？

、、的使用

你可能写过不少表格，但有没有想过，表格除了数据，还有标题行、主体数据和脚注行这些概念？HTML为此提供了

、和这三个语义化标签，它们分别代表表格的头部、主体和底部。这不仅仅是为了让代码看起来更整洁，更重要的是，它们对辅助技术（比如屏幕阅读器）和搜索引擎优化都有实际意义。

举个例子，一个带有表头的表格，通常我们会用

里，表示这是列的标题。

（table header）标签来替代	，放在

姓名	年龄	城市
张三	25	北京
李四	30	上海
总计：2人

你看，有了

或

标签的属性，用来指定单元格应该占据多少列或多少行。

colspan属性用于合并列。它的值是你希望单元格横跨的列数。比如，如果你想让一个单元格横跨两列，就写colspan="2"。

在这个例子中，“个人信息”这个表头就横跨了“姓名”和“张三”这两列。注意，一旦你设置了colspan，对应的行里就要少写几个

或

，否则表格的列数会不匹配，导致布局错乱。

而rowspan属性则是用于合并行。它的值是你希望单元格纵跨的行数。如果你想让一个单元格纵跨三行，就写rowspan="3"。

这里，“A类产品”这个单元格就纵跨了两行，它包含了“型号1”和“型号2”。使用rowspan时，同样需要注意，被跨越的那些行中，相应的单元格就不能再写了，否则也会导致表格结构混乱。这俩属性用起来确实有点“烧脑”，尤其是在表格结构复杂的时候，很容易数错格子。所以，动手画个草图，或者在心里把表格网格化，是避免出错的好办法。

为什么我的表格看起来很“丑”？如何进行基本样式美化？

你可能已经写出了结构清晰的HTML表格，但一在浏览器里看，它可能就是最原始、最朴素的样子：细细的边框，文字左对齐，单元格之间紧挨着，毫无美感可言。这其实是完全正常的，因为HTML标签本身只负责结构和语义，视觉呈现的工作主要由CSS（层叠样式表）来完成。

虽然HTML5中已经不推荐使用像border、width、height、cellpadding、cellspacing这些直接作用于表格标签的样式属性，但为了快速理解，你偶尔可能会看到有人还在用。不过，这真的不是推荐的做法。要让表格好看，我们应该把样式抽离到CSS文件里。

最基本的表格美化，可以从以下几个方面入手：

边框合并： 默认情况下，表格的单元格之间会有双重边框（每个单元格一个边框，表格本身一个边框）。通过CSS的border-collapse: collapse;属性，可以把这些边框合并成一个，让表格看起来更整洁。这个属性通常加在
选择器上。
```
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 让表格宽度占满父容器 */
}
```
单元格内边距： 默认的单元格内容可能紧贴着边框，看起来很压抑。使用padding属性可以增加单元格内容与边框之间的空间。
```
th, td {
  padding: 8px; /* 单元格内边距 */
  text-align: left; /* 文本左对齐，th默认是居中 */
  border: 1px solid #ddd; /* 给单元格也加边框 */
}
```
行背景色交替： 为了提高可读性，尤其是在数据量大的表格中，经常会给相邻的行设置不同的背景色，形成斑马线效果。这可以通过CSS的nth-child选择器来实现。
```
tbody tr:nth-child(even) { /* 偶数行 */
  background-color: #f2f2f2;
}
```
表头样式： 表头通常需要更醒目的样式，比如加粗、不同的背景色或字体颜色。
```
th {
  background-color: #4CAF50; /* 表头背景色 */
  color: white; /* 表头字体颜色 */
}
```
将这些CSS代码写在你的HTML文件标签内的