HTML 中的巢狀表-html教學-PHP中文網

如何在表中建立表格？

HTML 中巢狀表的範例

範例#2

首頁

web前端

html教學

HTML 中的巢狀表

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:49 PM

html html5 HTML Tutorial HTML Properties HTML tags

「巢狀表格」是在 HTML 編碼中使用表格時最重要的概念之一。巢狀表或「表中的表」是建立更大且複雜的表時所使用的概念。大多數複雜和大型表可能會在主表中包含表嵌套，以便更好地控制編碼。使用嵌套表可能有助於創建漂亮且有趣的外觀和視覺效果，但它可能會產生鬆散的錯誤。

當然，當您開始使用巢狀表時，它會變得更加棘手，因為在表內建立表時需要編碼、維護和處理所有標籤和元素。但是一旦你掌握了這樣的概念並深入研究了這樣的複雜性，在其中處理標籤確實會變得容易得多。

如何在表中建立表格？

只需使用

、、

等表格標籤即可在另一個表格中建立表格，以建立巢狀表格。由於嵌套表可能會導致更高的複雜性級別，因此請記住在同一單元格內開始和結束嵌套表。您可以建立任意層級的巢狀表；只需記住在同一儲存格內建立一個內部表格即可。

下面是巢狀表的解釋。下圖顯示了表格的五層嵌套，顏色為「藍色」作為最外層，或是帶有嵌套表格的容器表格，嵌套表格的顏色為白色、紅色、黃色和綠色。

HTML 中的巢狀表

這次我們將嘗試一步步建立另一個巢狀表的範例。

首先，我們需要主表，這是我們開始嵌套的容器。
其次，決定您希望另一個表格存在於哪一行、哪一列或哪一個儲存格中。一旦決定，就進行下一步

是將建立全新表的元素。依層次結構，...
….

表>

內部的巢狀表必須完全關閉，並遵循其所有關閉

的標準規則。和

（此處嵌套表格）

元素。

格式化巢狀表格與 HTML 的任何其他元素一樣簡單且相似。

上面的範例有主容器、一個兩列的表格和一個兩行兩列的巢狀表格。

現在觀察下面的嵌套表示例。我們討論了上面嵌套層級的解釋，我們將嘗試透過下面的編碼建立這樣一個範例。

代碼：

<body>
<table border="10" bordercolor = "#0B1941">
<tr>
<td>
<table border="10" bordercolor = "#F8F3F3">
<tr>
<td>
<table border="10" bordercolor = "#C74D4F">
<tr>
<td>
<table border="10" bordercolor = "#DCE127">
<tr>
<td>
<table border="10" bordercolor = "#3CAB16">
<tr> <td> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table>

登入後複製

上面的程式碼輸出以下顯示，顯示透過不同顏色區分的表的 5 層巢狀。觀察表格彼此內部的放置狀況，即嵌套在：

HTML 中的巢狀表

當程式設計師使用表格來格式化整個網頁時，表格內嵌套的概念在視覺上變得更加有趣。然後可以像程式設計師可能嵌套的任何其他表和其他 HTML 元素一樣設定該表的格式。

HTML 中巢狀表的範例

以下是提到的範例：

範例#1

觀察下面的巢狀表示例，主表中只有一個表。為了區分主表和巢狀表，我們使用了不同的邊框半徑和邊框顏色。

代碼：

<body>
<table border="5px" bordercolor="#8707B0">
<tr>
<td>Left side of the main table</td>
<td>
<table border="5px" bordercolor="#F35557">
<h4 align="center">Nested Table</h4>
<tr>
<td>nested table C1</td>
<td>nested table C2</td>
</tr>
<tr>
<td>nested table</td>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>

登入後複製

輸出：

HTML 中的巢狀表

注意： 表在主容器表中的巢狀。主表內的巢狀表是帶有紅色邊框的表。它被加到

中。容器表的元素。

範例#2

我們的以下程式碼將示範主容器表內的巢狀表中其他 HTML 元素的巢狀。

代碼：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> NestedTables </title>
</head>
<body>
<caption title="Container Table"> Container Table </caption>
<table border="5px" bordercolor = "red">
<tr>
<td >
<table>
<tr> <th colspan="2"> Nested Table 2 </th> </tr>
<tr> <th> Column 1 </th> <th> Column 2 </th> </tr>
<tr> <td> Our First Table </td>
<td> Nested Within </td> </tr>
</table>
</td>
<td>
<table >
<tr> <th> Nested Table 2 </th> </tr>
<tr>
<td>
<ul>
<li> List Object 1 </li>
<li> List Object 2 </li>
<li> List Object 3 </li>
</ul>
</td>
</tr>
</table> </td> </tr>
<tr>
<td>
<table>
<tr> <th colspan="2" align="center"> Nested Table 3 </th> </tr>
<tr>
<td> <a href=""> Nested Table </a> </td>
<td> Demo Continued </td> </tr>
</table> </td>
<td>
<table>
<tr> <th> Nested Table 4 </th> </tr>
<tr>
<td> <img src="images.png" height="120px" width="120px" alt="Sorry Image could not be displayed"> </td> </tr> </table>
</td>
</tr>
</table>
</body>
</html>

登入後複製

上面的程式碼示範了一個表格如何在其內部包含多個其他資料表，這些資料表可以包含您通常新增到簡單 HTML 頁面的任何類型的內容。上面的程式碼同樣是無邊框的。

HTML 中的巢狀表