Nested Tables
HTML nested tables refer to the table where one or more tables are placed inside it; the inner tables are placed inside the <td> tag. 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>).
Not only can tables be nested, but various HTML tags can also be used within the <td> (table data) tag for arranging contents in a structured manner.
Basic Structure of Nested Tables
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.
See this image of how a nested table looks like i.e., this image demonstartes a structure of nested tables:
How To Create a Nested Table?
You can create a nested table in HTML by creating one or more tables in different table cells. The following are the steps to create an HTML nested 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
Within the outer table, define the necessary rows and columns.
<tr><td><!-- Content within the cell --></td></tr>
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
Within the inner table, define rows and columns as needed.
<tr><td>Inner Content</td></tr>
Step 5 – Close Tags
Ensure proper closure of all HTML tags.
</table>
Example of Nested Tables
Following is an example by following the above steps −
<!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>
Tables Within Cells
Tables can be nested within table cells, allowing for complex structures.
Example
The following example creates a table with two columns (Name and Salary). Inside the first column, there’s a nested table displaying employee details with the same columns.
The outer table’s header and data rows are defined, and the inner table showcases two employees, Ramesh Raman, and Shabbir Hussein, with corresponding salaries.
<!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>
Styling Nested Tables
You can apply styles to nested tables just like regular tables to enhance visual appearance. To write CSS styles for nested tables, you can simply apply the CSS rules on the ‘table‘ selector to style the outer table and use the ‘table table‘ selector to style the inner tables.
Example
The following code includes a main table styled with CSS properties. The <a href="https://www.tutorialspoint.com/css/css_border-collapse.htm" target="_blank" rel="noreferrer noopener">border-collapse</a> ensures seamless borders, and ‘width: 100%’ makes it responsive. Cells (<td>, <th>) have padding, border, and text alignment.
Additionally, nested tables within cells inherit a distinctive style, including a colored background and borders. The main table’s data cell contains a nested table with a blue border, 80% width, and centered using ‘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></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>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; }
Images in Nested Tables
Embedding images within nested tables enhances visual presentation. Use the <img> tag inside table cells to seamlessly integrate images into complex layouts like nested tables.
Example
The following example illustrates the use of images inside nested tables:
<!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>
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.
