HTML 表格標籤

HTML 表格提供了一種以單元格的行和列形式匯出或定義資料（例如文字、圖像、連結等）的方法。可以使用

建立 HTML 表格。標籤。預設情況下，表格資料左對齊。在本主題中，我們將學習 HTML 表格標籤。

可以使用

建立表格。標籤。

• 第個標籤定義表格的標題。

;標籤指定用於建立行的表行。

表格資料可以在表格的

、	和
;標籤指定用於建立列的表格資料儲存格。

內容中建構。具有大量表格元素。

文法

Table Heading 1	Table Heading 2
Data Cell 1	Data Cell 2
Data Cell 3	Data Cell 4

HTML 表格標籤範例

以下是 HTML 表格標籤的範例

1.基本表使用

範例：

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

以 .html 副檔名儲存程式碼並在瀏覽器中開啟它。它將顯示以下輸出：

2.表格標題

表格標題可以使用 caption> 標籤指定。

範例

<title>HTML Table Tag Usage</title>

This is Table Caption

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的程式碼將顯示以下輸出：

3.表格單元間距

表格單元格的空間可以使用 cellspacing 屬性來定義。 cellspacing 屬性指定表格儲存格之間的空間。

範例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的程式碼將顯示以下輸出：

4.表格單元填充

表格儲存格的填入可以使用 cellpadding 屬性來定義。 cellpadding屬性表格單元格邊框與資料之間的距離。

範例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的程式碼將顯示以下輸出：

5.列與行跨度屬性

您可以使用 rowspan 屬性將兩個或多個表格行合併為一行，並且可以使用 colspan 屬性將表格列合併為單一資料列。

範例

<title>HTML Table Tag Usage</title>

Column One	Column Two	Column Three
Row One	Row Two	Row Three
	Row Four	Row Five
Row Six

程式碼將顯示以下輸出：

6.桌子背景

您可以使用 bgcolor 屬性建立表格的背景。可以使用 border-color 屬性指定表格單元格邊框。

範例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

執行上面的程式碼，會顯示如下輸出：

7.桌子的高度和寬度

您可以使用 width 和 height 屬性來設定表格的高度和寬度。

範例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的程式碼將顯示以下輸出：

8.設定表格儲存格樣式

範例

<title>HTML Table Tag Usage</title>

<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
table#mytable tr:nth-child(even) {
background-color: #FAD7A0;
}
table#mytable tr:nth-child(odd) {
background-color: #E67E22;
}
table#mytable th {
color: white;
background-color: teal;
}
</style>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

執行上面的程式碼；你將得到以下輸出：

8.巢狀表

您可以在另一個表中使用一個表，稱為巢狀表。

讓我們考慮下面的巢狀表示例：

範例

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

上面的程式碼將顯示以下輸出：

表的屬性

以下屬性如下：

• align: 此屬性提供元素內的內容對齊。
• bgcolor: 此屬性指定表格的背景顏色。
• border: 此屬性指定表格儲存格的邊框。
• cellpadding： 此屬性顯示表格儲存格和表格內容之間的填滿。
• cellspacing: 此屬性表示表格儲存格之間的間距。
• frame:它指定外邊框的哪些部分是可見的。
• 規則：這指定內部邊框的哪些部分是可見的。
• sortable: 此屬性告知該表是可排序的。
• 摘要：它提供了目前表格內容的類型。
• width: 此屬性告訴表格的寬度。
• height: 此屬性指定表格的高度。

結論

到目前為止，我們已經研究了 HTML 中不同類型的表格標籤。這些範例展示如何使用表格樣式、將一個表格嵌套在另一個表格中、設定表格的高度和寬度、為表格儲存格新增間距和填滿、為表格套用背景顏色等等。

以上是HTML 表格標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！