简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  HTML 表格標籤

HTML 表格標籤

WBOY
WBOY原創
2024-09-04 16:20:221140瀏覽

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

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

可以使用

建立表格。標籤。
  • 第個標籤定義表格的標題。
;標籤指定用於建立行的表行。

表格資料可以在表格的

、 和
;標籤指定用於建立列的表格資料儲存格。
  • 內容
    中建構。具有大量表格元素。

    文法

    <table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
</table>

    HTML 表格標籤範例

    以下是 HTML 表格標籤的範例

    1.基本表使用

    範例：

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    2.表格標題

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

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    3.表格單元間距

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

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    4.表格單元填充

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

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    5.列與行跨度屬性

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

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
</body>

    程式碼將顯示以下輸出：

    HTML 表格標籤

    6.桌子背景

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

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" bordercolor = "red" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    7.桌子的高度和寬度

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

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    8.設定表格儲存格樣式

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<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>
<body>
<table id="mytable" border = "1" width = "450" height = "350">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    8.巢狀表

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

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

    範例

    <!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250">
<tr>
<td>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

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

    HTML 表格標籤

    表的屬性

    以下屬性如下：

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

    結論

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

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

    html define for using Attribute default this display padding border background column table td tr th
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：HTML 影像標籤下一篇：HTML 影像標籤

    相關文章

    看更多