HTML - 巢狀表格

上一頁
下一頁

巢狀表格

HTML 巢狀表格指的是一個表格內部包含一個或多個其他表格，內部表格放置在<td>標籤內。巢狀表格涉及在一個表格內使用另一個表格，提供了一種靈活的方式來構建複雜的資料佈局。各種元素，包括其他 HTML 標籤，都可以包含在表格單元格（<td>）中。

不僅表格可以巢狀，各種 HTML 標籤也可以在<td>（表格資料）標籤內使用，以結構化的方式排列內容。

巢狀表格的基本結構

巢狀表格指的是將整個表格結構嵌入另一個表格單元格中的做法。這種技術允許在 HTML 中建立更復雜和結構化的佈局。

檢視巢狀表格的外觀圖片，即此圖片演示了巢狀表格的結構

HTML Nested Tables

如何建立巢狀表格？

您可以透過在不同的表格單元格中建立一到多個表格來在 HTML 中建立巢狀表格。以下是建立 HTML 巢狀表格的步驟

步驟 1：建立外部表格

首先建立外部表格，作為容器。

<table border="1">
   <!-- Outer table content -->
</table>

步驟 2：定義行和列

在外部表格中，定義必要的行和列。

<tr>
   <td>
      <!-- Content within the cell -->
   </td>
</tr>

步驟 3：嵌入內部表格

在單元格內，使用 <table> 標籤嵌入新的表格結構。

<td>
   <table border="1">
      <!-- Inner table content -->
   </table>
</td>

步驟 4：定義內部表格內容

在內部表格中，根據需要定義行和列。

<tr>
  <td>Inner Content</td>
</tr>

步驟 5 - 關閉標籤

確保所有 HTML 標籤都正確關閉。

</table>

巢狀表格示例

以下是按照上述步驟進行的一個示例：

<!DOCTYPE html>
<html>
<head>
   <title>Nested Tables</title>
</head>
<body>
   <table border="1" width="100%">
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

單元格內的表格

表格可以巢狀在表格單元格內，從而建立複雜的結構。

示例

以下示例建立了一個包含兩列（姓名和薪資）的表格。在第一列中，有一個巢狀表格顯示員工詳細資訊，列相同。

定義了外部表格的表頭和資料行，內部表格展示了兩名員工，Ramesh Raman 和 Shabbir Hussein，以及相應的薪資。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

巢狀表格的樣式

您可以像普通表格一樣，為巢狀表格應用樣式以增強視覺效果。要為巢狀表格編寫 CSS 樣式，您可以簡單地將 CSS 規則應用於“table”選擇器以設定外部表格的樣式，並使用“table table”選擇器以設定內部表格的樣式。

示例

以下程式碼包含一個使用 CSS 屬性設定樣式的主表格。`border-collapse` 確保邊框無縫連線，並且“width: 100%”使其具有響應性。單元格（<td>，<th>）具有填充、邊框和文字對齊方式。

此外，單元格內的巢狀表格繼承了一種獨特的樣式，包括彩色背景和邊框。主表格的資料單元格包含一個巢狀表格，該表格具有藍色邊框，寬度為 80%，並使用 'margin: 10px auto' 居中。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Nested Tables with CSS Styles</title>
   <style>
      table {
         border-collapse: collapse;
         width: 100%;
      }
      td,
      th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }
      /* Additional styles for nested tables */
      table table {
         border: 2px solid #3498db;
         width: 80%;
         margin: 10px auto;
      }
      table table td {
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
   </style>
</head>
<body>
   <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Name</th>
                  <th>Salary</th>
               </tr>
               <tr>
                  <td>Ramesh Raman</td>
                  <td>5000</td>
               </tr>
               <tr>
                  <td>Shabbir Hussein</td>
                  <td>7000</td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

巢狀表格中的圖片

在巢狀表格中嵌入圖片可以增強視覺呈現效果。在表格單元格內使用 <img> 標籤 可以將圖片無縫整合到諸如巢狀表格之類的複雜佈局中。

示例

以下示例說明了在巢狀表格中使用圖片

<!DOCTYPE html>
<html>
<head>
   <title>Nested Tables</title>
</head>
<body>
   <table border="1" width="100%">
      <tr>
         <td>
            <table border="1" width="100%">
               <tr>
                  <th>Image </th>
                  <th>Name</th>
               </tr>
               <tr>
                  <td>
                     <img src="images\logo.png" alt="Nested Image">
                  </td>
                  <td>LOGO </td>
               </tr>
               <tr>
                  <td>
                     <img src="images\html5_icon.png" alt="Nested Image">
                  </td>
                  <td>HTML5 </td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
</body>
</html>

巢狀表格的優點

以下是巢狀表格的優點：

  • 組織布局 - 巢狀表格能夠建立組織化和結構化的佈局，增強複雜資料的呈現效果。

  • 單元格自定義 - 巢狀表格中的每個單元格都可以包含不同的內容，包括文字、圖片，甚至其他巢狀表格。

  • 複雜設計 - 透過在單元格內巢狀表格，實現複雜的設計模式，提供網頁設計的靈活性。

列印頁面
上一頁
下一頁
廣告