Html 简明教程
HTML - Nested Tables
嵌套表格是位于其他表格单元格内的表格。在 HTML 中， Nested tables 涉及在另一个表格内使用一个表格，提供了一种构造复杂数据布局的多功能方式。可以在表单元格中合并各种元素，包括其他 HTML 标记 ( <td> )。
不仅可以嵌套表格，还可以 * <td>* （表格数据）标记中使用各种 HTML 标记，以有序的方式排列内容。
How to create Nested Table?
以下是创建 HTML 嵌套表格的步骤。
Step 1 - Create Outer Table: 首先创建作为容器的外层表格。
<table border="1">
<!-- Outer table content -->
</table>Step 2 - Define Rows and Columns: 在外层表格中，定义必要的行和列。
<tr>
<td>
<!-- Content within the cell -->
</td>
</tr>Step 3 - Embed Inner Table: 在单元格内，使用 <table> 标记嵌入新表格结构。
<td>
<table border="1">
<!-- Inner table content -->
</table>
</td>Step 4 - Define Inner Table Content: 在内表中，根据需要定义行和列。
<tr>
<td>Inner Content</td>
</tr>Step 5 - Close Tags: 确保所有 HTML 标记都正确闭合。
</table>Examples of HTML Nested Tables
以下是展示如何在 HTML 中使用嵌套表格的一些示例。
Tables Within Cells
可以在另一个表格的单元格内定义一个新表格，这称为嵌套表格。下面的 HTML 程序创建了一个有两列（员工和净值）的表格。在第一列中，有一个嵌套表格显示员工详细信息。
<!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 嵌套表格应用样式。写在“表格”选择器内的样式将同时应用于这两个表格，而写在“表格表格”选择器内的样式将仅应用于内表。
<!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>* 标记以正确的方式排列图像。此技术对于创建图片库、产品目录或需要系统显示图像的任何场景很有用。
<!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>