Nested Tables 1

A

AllJobsInfo

Administrator
Staff member
In HTML, you can nest tables within other tables to create more complex layouts. While nesting tables was more common in older web design practices, it's generally considered better practice to use CSS for layout purposes, particularly with the advent of CSS frameworks like Flexbox and Grid. However, for the sake of understanding, here's how you can nest tables:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Tables Example</title>
<style>
/* Just for demonstration purposes, actual styling should be done in CSS */
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
</body>
</html>

Explanation:
- In this example, we have a main table containing three columns.
- In the second column of the main table, there's a nested table.
- The nested table has two rows and two columns.
- The first cell of the second column in the main table contains the nested table.

This is just a basic example to demonstrate the concept of nested tables. In practice, it's often better to use other layout techniques such as CSS Flexbox or Grid for more complex layouts, as they provide better control and maintainability.
 
Top