HTML5表格轻松实现竖列排版，快速学会布局技巧

Apr 28, 2026

—

在网页设计中，表格是展示数据的一种常见方式。而HTML5为我们提供了更多灵活的表格布局方式，尤其是竖列排版。通过合理运用HTML5的表格属性和CSS样式，我们可以轻松实现数据的竖列展示。下面，我就来和大家分享一下如何快速学会这些布局技巧。
一、HTML5表格基本结构
首先，我们需要了解HTML5表格的基本结构。一个标准的HTML5表格由

标签、

标签（代表表格行）、

标签（代表表头）和

标签（代表单元格）组成。

表头1	表头2	表头3
数据1	数据2	数据3

二、实现竖列排版的步骤
设置

标签和

标签的宽度
：通过CSS设置

和

的宽度，可以使数据在表格中按照竖列排列。
th, td {
width: 100px; /* 宽度可以根据实际需要调整 */
}
设置表格布局
：使用CSS的
display: table;
和
display: table-cell;
属性，可以使表格中的行和单元格按照竖列布局。
table {
display: table;
}

tr {
display: table-row;
}

td {
display: table-cell;
vertical-align: middle; /* 保持单元格垂直居中 */
}
调整单元格间距
：为了使竖列排版更加美观，我们可以调整单元格之间的间距。
tr {
margin-bottom: 10px; /* 调整行间距 */
}

td {
margin-right: 10px; /* 调整单元格间距 */
}
三、实例演示
以下是一个竖列排版的表格实例：

姓名	张三
年龄	25
职业	程序员

通过以上步骤，我们就可以实现一个美观、易读的竖列排版表格。当然，这只是HTML5表格竖列排版的一种实现方式，你还可以根据自己的需求进行调整和创新。希望这篇文章能帮助你快速掌握这些布局技巧！