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 中的嵌套表