Html 简明教程
HTML - Nested Tables
嵌套表格是位于其他表格单元格内的表格。在 HTML 中， Nested tables 涉及在另一个表格内使用一个表格，提供了一种构造复杂数据布局的多功能方式。可以在表单元格中合并各种元素，包括其他 HTML 标记 ( <td> )。
Nested Tables are tables that are located within other table cells. In HTML, the Nested tables involve the utilization of one table within another, providing a versatile way to structure complex data layouts. Various elements, including other HTML tags, can be incorporated within table cells (<td>).
不仅可以嵌套表格，还可以 * <td>* （表格数据）标记中使用各种 HTML 标记，以有序的方式排列内容。
Not only can tables be nested, but various HTML tags can also be used within the <td> (table data) tag for arranging contents structured manner.
Basic Structure of Nested Tables
嵌套表格是指将整个表格结构嵌入另一个表格的单元格中的做法。这种技术允许在 HTML 中创建更复杂和结构化的布局。
Nested tables refer to the practice of embedding an entire table structure within a cell of another table. This technique allows for the creation of more complex and structured layouts in HTML.
How to create Nested Table?
以下是创建 HTML 嵌套表格的步骤。
Following are the steps to create nested tables in HTML.
Step 1 - Create Outer Table: 首先创建作为容器的外层表格。
Step 1 - Create Outer Table: Begin by creating the outer table, which serves as the container.
<table border="1">
<!-- Outer table content -->
</table>Step 2 - Define Rows and Columns: 在外层表格中，定义必要的行和列。
Step 2 - Define Rows and Columns: Within the outer table, define the necessary rows and columns.
<tr>
<td>
<!-- Content within the cell -->
</td>
</tr>Step 3 - Embed Inner Table: 在单元格内，使用 <table> 标记嵌入新表格结构。
Step 3 - Embed Inner Table: Inside the cell, embed a new table structure using the <table> tags.
<td>
<table border="1">
<!-- Inner table content -->
</table>
</td>Step 4 - Define Inner Table Content: 在内表中，根据需要定义行和列。
Step 4 - Define Inner Table Content: Within the inner table, define rows and columns as needed.
<tr>
<td>Inner Content</td>
</tr>Step 5 - Close Tags: 确保所有 HTML 标记都正确闭合。
Step 5 - Close Tags: Ensure proper closure of all HTML tags.
</table>Examples of HTML Nested Tables
以下是展示如何在 HTML 中使用嵌套表格的一些示例。
Here are some examples that shows how to use nested tables in HTML.
Tables Within Cells
可以在另一个表格的单元格内定义一个新表格，这称为嵌套表格。下面的 HTML 程序创建了一个有两列（员工和净值）的表格。在第一列中，有一个嵌套表格显示员工详细信息。
A new table can be defined inside a cell of another table, this is called nested table. The below HTML program creates a table with two columns (Employees and NetWorth). Inside the first column, there’s a nested table displaying employee details.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Employees</th>
<th>NetWorth</th>
</tr>
<tr>
<td>
<table border="1" >
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh </td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir </td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Styling Nested Tables
我们可以使用 CSS 标签选择器为 HTML 嵌套表格应用样式。写在“表格”选择器内的样式将同时应用于这两个表格，而写在“表格表格”选择器内的样式将仅应用于内表。
We can apply style to nested tables of HTML using CSS tag selector. Style written inside 'table' selector will apply to both tables, while style written inside 'table table' selector will only apply on inner table.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Common style for both tables */
table {
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
/* Styling inner table */
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>Employees</th>
<th>NetWorth</th>
</tr>
<tr>
<td>
<table border="1" >
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh </td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir </td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Images in Nested Tables
我们可以在表格中使用 * <img>* 标记以正确的方式排列图像。此技术对于创建图片库、产品目录或需要系统显示图像的任何场景很有用。
We can use <img> tag inside tables to arrange images in proper manner. This technique is useful for creating image galleries, product catalogs, or any scenario where images need to be displayed systematically.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse: collapse;
}
img{
height: 70px;
width: 200px;
}
</style>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>Image </th>
<th>Name</th>
</tr>
<tr>
<td>
<img src="/images/logo.png">
</td>
<td>LOGO </td>
</tr>
<tr>
<td>
<img src="/html/images/html.jpg">
</td>
<td>HTML5 </td>
</tr>
</table>
</body>
</html>Benefits of Nested Tables
以下是嵌套表格的优点：
Following are the advantages of the nested tables:
-
Organized Layouts: Nested tables enable the creation of organized and structured layouts, enhancing the presentation of complex data.
-
Cell Customization: Each cell in a nested table can contain diverse content, including text, images, or even additional nested tables.
-
Complex Designs: Achieve intricate design patterns by nesting tables within cells, providing flexibility in webpage design.