在 HTML 中將表格頂部對齊

HTML 表格由包含資料的表格行組成。本教程將介紹一種將表格資料對齊到右側頂部的方法。

使用 vertical-align 和 text-align CSS 屬性對齊 HTML 中的表格資料

HTML 中的表格由行和列組成。我們使用 <table> 標籤在 HTML 中建立表格。 <tr> 標籤用於建立表格行，<td> 標籤用於填充表格中的資料。

表格資料所在的框也稱為單元格。單元格是表格的構建塊。本文將解決如何將表格資料與右側單元格的頂部對齊。

我們將使用 vertical-align 和 text-align CSS 屬性將表格資料對齊到單元格右側的頂部。首先，讓我們介紹一下 vertical-align 屬性。

該屬性定義指定元素的垂直對齊方式。元素可以是內聯或內聯塊元素，甚至是表格​​單元格。

該物業有多種選擇。有些是 baseline、length、sub、super、top 等。屬性的預設值是 baseline。

我們可以在兩種不同的上下文中使用 vertical-align 屬性。如前所述，我們可以使用它來垂直定位內聯元素。

另一種方法是使用該屬性來對齊表格中的單元格內容。在示例中，我們將討論後一種情況。

text-align 屬性設定指定元素中文字的水平對齊方式。一些屬性選項是 left，right，center，justify 等。從選項中可以清楚地看出，我們可以使用 text-align 屬性設定文字的位置。

我們可以使用這兩個屬性將表格資料對齊到右側的頂部。vertical-align 屬性的 top 選項將元素與行中最高元素的頂部對齊。

對於表格單元格，內容位於單元格邊框的正下方。同樣，right 屬性將文字與單元格的右側對齊。

例如，建立一個包含兩行兩列的表。用 Create、Read、Update 和 Delete 填充單元格。

在 CSS 中，選擇 td 元素作為 table 元素的子元素。將單元格的高度和寬度設定為 200px。

將 2px solid #000 的邊框應用於單元格。接下來，將 vertical-align 屬性設定為 top，將 text-align 屬性設定為 right。

因此，單元格的內容位於單元格邊框的正下方和右側。通過這個，我們可以使用 vertical-align 和 text-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;
}