How to Create Nested tables within tables in HTML ?
Last Updated :
12 Jan, 2024
HTML tables are very helpful in structuring the content in the form of rows and columns. But sometimes there is a need to add a table within a table. HTML supports this functionality and is known as the nesting of the tables. Tables can be nested together to create a table inside a table.
To create a nested table, we need to create a table using the <table> tag. This table is known as the outer table. The second table that will be the nested table is called the inner table. This table is also created using the <table> tag but there is a special thing that must be kept in mind.
Note: The inner table always has to be placed between the <td> ….. </td> of the outer table.
Example 1:
Implementation of creating a nested table. The inner table is added to the second column of the first row of the first table i.e. inside the <td>…</td> tags of the outer table.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Nested Tables</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
}
table table {
border: 2px solid blue;
}
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<table border="2">
<tr>
<td>Table 1</td>
<td> Table 1
<table border="2">
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
<tr>
<td>Table 2</td>
<td>Table 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Table 1</td>
<td>Table 1</td>
</tr>
</table>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Nested Tables</title>
<style>
body {
text-align: center;
margin: 50px;
}
h2 {
color: green;
}
table {
border: 2px solid green;
margin: 20px auto;
}
table table {
border: 2px solid blue;
margin: 10px auto;
}
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<p><b>Nested tables</b></p>
<table border="2">
<tr>
<td>Main Table row 1 column 1</td>
<td>Main Table column 2
<table border="2">
<tr>
<td>Inner Table row 1 column 1</td>
<td>Inner Table row 1 column 2</td>
</tr>
<tr>
<td>Inner Table row 2 column 1</td>
<td>Inner Table row 2 column 2</td>
</tr>
<tr>
<td>Inner Table row 3 column 1</td>
<td>Inner Table row 3 column 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Main Table row 2 column 1</td>
<td>Main Table row 2 column 2</td>
</tr>
</table>
</body>
</html>
|
Output:
Note: Nested tables can be slow to load, restrictive for layouts, and prevent a more flexible and functional web page. They are lesser recommended from the SEO perspective.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...