在 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