在 HTML 中将表格顶部对齐

Sushant Poudel 2023年2月19日 2022年4月22日
在 HTML 中将表格顶部对齐

HTML 表格由包含数据的表格行组成。本教程将介绍一种将表格数据对齐到右侧顶部的方法。

使用 vertical-aligntext-align CSS 属性对齐 HTML 中的表格数据

HTML 中的表格由行和列组成。我们使用 <table> 标签在 HTML 中创建表格。 <tr> 标签用于创建表格行,<td> 标签用于填充表格中的数据。

表格数据所在的框也称为单元格。单元格是表格的构建块。本文将解决如何将表格数据与右侧单元格的顶部对齐。

我们将使用 vertical-aligntext-align CSS 属性将表格数据对齐到单元格右侧的顶部。首先,让我们介绍一下 vertical-align 属性。

该属性定义指定元素的垂直对齐方式。元素可以是内联或内联块元素,甚至是表格​​单元格。

该物业有多种选择。有些是 baselinelengthsubsupertop 等。属性的默认值是 baseline

我们可以在两种不同的上下文中使用 vertical-align 属性。如前所述,我们可以使用它来垂直定位内联元素。

另一种方法是使用该属性来对齐表格中的单元格内容。在示例中,我们将讨论后一种情况。

text-align 属性设置指定元素中文本的水平对齐方式。一些属性选项是 leftrightcenterjustify 等。从选项中可以清楚地看出,我们可以使用 text-align 属性设置文本的位置。

我们可以使用这两个属性将表格数据对齐到右侧的顶部。vertical-align 属性的 top 选项将元素与行中最高元素的顶部对齐。

对于表格单元格,内容位于单元格边框的正下方。同样,right 属性将文本与单元格的右侧对齐。

例如,创建一个包含两行两列的表。用 CreateReadUpdateDelete 填充单元格。

在 CSS 中,选择 td 元素作为 table 元素的子元素。将单元格的高度和宽度设置为 200px

2px solid #000 的边框应用于单元格。接下来,将 vertical-align 属性设置为 top,将 text-align 属性设置为 right

因此,单元格的内容位于单元格边框的正下方和右侧。通过这个,我们可以使用 vertical-aligntext-align CSS 属性将表格数据对齐到右侧的顶部。

示例代码:

<table>
 <tr>
 <td>
 Create
 </td>
 <td>
 Read
 </td>
 </tr>
 <tr>
 <td>
 Update
 </td>
 <td>
 Delete
 </td>
 </tr>
</table>
table td {
 height: 200px;
 width: 200px;
 border: 2px solid #000;
 vertical-align:top;
 text-align:right;
}
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

相关文章 - HTML Table

相关文章 - HTML Alignment