HTML - 表格

上一頁
下一頁

HTML 表格以結構化的格式（包含行和列）表示資料，例如文字、影像等。

HTML 表格提供了一種視覺結構，有助於清晰和理解，使其成為 Web 開發中的基本元素。

HTML Tables

為什麼使用 HTML 表格？

HTML 表格的使用原因多種多樣，主要圍繞有效地組織和呈現資料。一些關鍵用途包括：

  • 結構化資料 - 表格為組織和顯示資料提供了連貫的結構，使使用者更容易解釋資訊。
  • 比較性呈現 - 當需要並排比較不同的資料集（例如兩個概念之間的差異）時，表格提供了清晰且易於訪問的視覺格式。
  • 表格資料表示 - 自然適合以行和列排列的資訊（例如時間表、統計資料或價格表）可以使用 HTML 表格很好地表示。

建立 HTML 表格

您可以使用 <table> 標籤 以及一些定義表格內部結構和內容的標籤在 HTML 中建立表格。與 <table> 標籤一起使用的主要標籤是 <tr>、<td> 和 <th>。

在 HTML 中建立表格涉及多個定義結構和內容的元素。使用的主要標籤是 <table>、<tr>、<td> 和 <th>。

  • HTML <table> 標籤：此標籤用於建立包含行和列的表格。
  • HTML <tr> 標籤：代表“表格行”，用於在表格中建立一行。
  • HTML <td> 標籤：代表“表格資料”，用於在行中建立標準單元格。
  • HTML <th> 標籤：代表“表格標題”，用於在行中建立標題單元格。

HTML 表格結構 - 行和列

  • 行：HTML 表格中的每一行都使用 `<tr>` 標籤定義。它包含一組表格單元格（`<td>` 或 `<th>`），表示該行中的各個元素。
  • 列：實際的資料或標題資訊包含在表格單元格中。不同行中相同位置的單元格形成一列。
  • 表格行由 <tr> 標籤定義。要設定表格標題，我們使用 <th> 標籤。要將資料插入表格單元格，請使用 <td> 標籤。
  • HTML 中的表格由表格行和列內的表格單元格組成。
  • 表格標題由 <th>...</th> 定義。<th> 內的資料是表格列的標題。
  • 每個表格單元格由 <td>...</td> 標籤定義。<td> 標籤內的 資料是表格行和列的內容。
  • 每個表格行都以 <tr> ....</tr> 標籤開頭。
  • 我們使用樣式表為表格建立邊框。

示例

考慮一個表格，它表示產品與其各自類別和價格的簡單列表。這種基本的表格結構以清晰的表格格式組織資料，使其易於閱讀和理解。這裡，border 是 <table> 標籤的屬性，它用於在所有單元格周圍放置邊框。如果您不需要邊框，則可以使用 border="0"。

<!DOCTYPE html>
<html>
<body>
    <table border="1">
    <tr>
       <th>Product</th>
       <th>Category</th>
       <th>Price</th>
    </tr>
    <tr>
       <td>Laptop</td>
       <td>Electronics</td>
       <td>$800</td>
    </tr>
    <tr>
       <td>Bookshelf</td>
       <td>Furniture</td>
       <td>$150</td>
    </tr>
    <tr>
       <td>Coffee Maker</td>
       <td>Appliances</td>
       <td>$50</td>
    </tr>
    </table>
</body>
</html>

樣式化 HTML 表格

您還可以使用 CSS 屬性對 HTML 表格進行樣式設定，以使其具有自定義外觀。您可以建立類以將樣式應用於表格，也可以簡單地編寫內部 CSS 屬性以設定表格的樣式。

示例

在下面的示例中，我們使用一些 CSS 屬性對錶格進行樣式設定，使其更具樣式。

<!DOCTYPE html>
<html>
<head>
   <style>
   table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
   }
   th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
   }
   th {
      background-color: #f2f2f2;
   }
   </style>
</head>
<body>
    <h2>HTML Table</h2>
    <p>This table is 3*3 cells including table header.
    <table>
        <tr>
           <th>Header 1</th>
           <th>Header 2</th>
           <th>Header 3</th>
        </tr>
        <tr>
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
        </tr>
        <tr>
           <td>Data 4</td>
           <td>Data 5</td>
           <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

表格背景顏色和影像

您可以使用 CSS 和 <table> 標籤的屬性設定 HTML 表格的背景顏色和背景影像。

使用屬性

以下是可與 <table> 標籤一起使用的屬性，用於設定背景顏色和/或影像

  • bgcolor：bgcolor 屬性設定表格的背景顏色。
    <table bgcolor="#f0f0f0">
  • background：background 屬性設定背景影像。
    <table background="image.jpg">

使用 CSS 屬性

使用表格標籤的屬性是一種舊的（過時的）樣式。建議您使用 CSS 對 HTML 表格進行樣式設定。background-color 和 background-image 屬性分別用於設定背景顏色和影像。

table {
  background-color: #f0f0f0;
  background-image: url('image.jpg');
}

使用屬性設定表格背景顏色和影像的示例

這裡我們使用 <table> 標籤的屬性為表格設定背景顏色和影像

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Color</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow" background="/images/test.png">
       <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
       </tr>
       <tr>
          <td rowspan="2">Row 1 Cell 1</td>
          <td>Row 1 Cell 2</td>
          <td>Row 1 Cell 3</td>
       </tr>
       <tr>
          <td>Row 2 Cell 2</td>
          <td>Row 2 Cell 3</td>
       </tr>
       <tr>
          <td colspan="3">Row 3 Cell 1</td>
       </tr>
    </table>
</body>
</html>

使用 CSS 設定表格背景顏色和影像的示例

這裡我們使用 CSS 屬性為表格設定背景顏色和影像

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Color</title>
   <style>
table {
  background-color: yellow;
  background-image: url('/images/test.png');
}
</style>   
</head>
<body>
    <table>
       <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
       </tr>
       <tr>
          <td rowspan="2">Row 1 Cell 1</td>
          <td>Row 1 Cell 2</td>
          <td>Row 1 Cell 3</td>
       </tr>
       <tr>
          <td>Row 2 Cell 2</td>
          <td>Row 2 Cell 3</td>
       </tr>
       <tr>
          <td colspan="3">Row 3 Cell 1</td>
       </tr>
    </table>
</body>
</html>

表格寬度和高度

可以使用屬性或 CSS 屬性設定表格的寬度和高度。這些值可以以畫素或百分比定義。

使用屬性

以下屬性可以設定表格的寬度和高度

  • width：它定義表格的寬度。
    <table width="80%">
  • height：它定義表格的高度。
    <table height="200">

使用 CSS

以下 CSS 屬性可以設定表格的寬度和高度

  • width：它定義表格的寬度。
    table { width: 80%; }
  • height：它定義表格的高度。
    table { height: 400px; }

使用屬性設定表格寬度和高度的示例

這裡我們使用 <table> 標籤的屬性設定表格的寬度 (80%) 和高度 (400px)

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Width/Height</title>
</head>
<body>
    <table border="1" width="80%" height="400">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

使用 CSS 設定表格寬度和高度的示例

這裡我們使用 CSS 屬性為表格設定寬度 (80%) 和高度 (400px)

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Width/Height</title>
   <style>
   table{
       width: 80%;
       height: 400px;
   }
   </style>
</head>
<body>
    <table border="1">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

HTML 巢狀表格

巢狀 HTML 表格指的是在表格內建立表格。您可以透過在任何<td>標籤內使用<table>標籤來在表格內建立表格，這會在主表格的單元格中建立另一個表格。

示例

在下面的示例中，我們正在建立巢狀表格。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Nested Tables</title>
</head>

<body>
    <table border=1>
        <tr>
            <td> First Column of Outer Table </td>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
            <td> First Column of Outer Table </td>

        </tr>
    </table>
</body>

</html>

表格相關標籤參考

以下是與表格相關的標籤。您可以點選連結閱讀有關特定標籤的資訊，並點選“嘗試一下”練習其示例。

標籤 描述 示例
<table> 用於建立 HTML 表格。
<th> 此標籤定義表格的表頭。
<tr> 此標籤定義表格行。
<td> 此標籤用於儲存每個單元格的表格資料。
<caption> 此標籤指定表格的標題。
<colgroup> 此標籤描述表格中一個或多個列的集合，用於格式化。
<col> 此標籤用於提供有關列的資訊。
<thead> 此標籤用於定義表格的表頭部分。
<tbody> 此標籤用於定義表格的主體部分。
<tfoot> 此標籤用於定義表格的腳註部分。
列印頁面
上一頁
下一頁
廣告