HTML - 嵌套表格

嵌套表格

HTML 嵌套表格指的是一个表格内部包含一个或多个其他表格，内部表格放置在<td>标签内。嵌套表格涉及在一个表格内使用另一个表格，提供了一种灵活的方式来构建复杂的数据布局。各种元素，包括其他 HTML 标签，都可以包含在表格单元格（<td>）中。

不仅表格可以嵌套，各种 HTML 标签也可以在<td>（表格数据）标签内使用，以结构化的方式排列内容。

嵌套表格的基本结构

嵌套表格指的是将整个表格结构嵌入另一个表格单元格中的做法。这种技术允许在 HTML 中创建更复杂和结构化的布局。

查看嵌套表格的外观图片，即此图片演示了嵌套表格的结构

如何创建嵌套表格？

您可以通过在不同的表格单元格中创建一到多个表格来在 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>

嵌套表格的优点

以下是嵌套表格的优点：

组织布局 - 嵌套表格能够创建组织化和结构化的布局，增强复杂数据的呈现效果。
单元格自定义 - 嵌套表格中的每个单元格都可以包含不同的内容，包括文本、图片，甚至其他嵌套表格。
复杂设计 - 通过在单元格内嵌套表格，实现复杂的设计模式，提供网页设计的灵活性。

打印页面