| 元素定義的。主表的第二個單元格包含文本，但沒有巢狀表。
為了確保表格正確顯示，我們使用 CSS 定義了一些樣式。表格元素的寬度設定為 100%，邊框折疊值設定為collapse。主表和巢狀表的儲存格都有 1 像素的黑色邊框和 8 像素的填充。所有單元格的文字對齊方式均設定為左對齊。
此外，我們也使用 CSS 為主表和巢狀表定義了背景顏色。主表的背景色為淺灰色，巢狀表的背景色為稍深的灰色。透過執行這些步驟，您可以輕鬆地在 HTML 表格中建立巢狀表格，並使用 CSS 將樣式套用到它們。
範例
以下是我們將在本範例中查看的完整程式碼 -
<!DOCTYPE html>
<html>
<head>
<title>How to create nested tables within tables in HTML?</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.main-table {
background-color: #f2f2f2;
}
.nested-table {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<h4>How to create nested tables within tables in HTML?</h4>
<table class="main-table">
<tr>
<td>
Main table cell 1
<table class="nested-table">
<tr>
<td>Nested table cell 1</td>
<td>Nested table cell 2</td>
</tr>
</table>
</td>
<td>Main table cell 2</td>
</tr>
</table>
</body>
</html>
結論
歸根結底，在 HTML 中產生嵌入表格是一項簡單的工作，需要對 HTML 表格的組成有基本的掌握。透過遵循本文中闡述的步驟，您可以輕鬆產生嵌入式表格，以系統化且易於理解的方式呈現複雜的資料。無論您是需要呈現大量數據還是只想以精確的佈局展示數據，嵌入式表格對於任何網頁設計師來說都是實用的工具。憑藉從本文中獲得的專業知識，您現在擁有在 HTML 中建立嵌入式表格的能力，並將您的網頁設計提升到更高的水平。
|
