HTML Nested Table

HTML nested table refers to a table that is created inside another table.

The table is in the form of rows and columns. From left to right are called horizontal rows, and from top to bottom are called vertical columns. Tables in HTML can be nested, meaning one table can be inserted into another table.

It is important to always place the inner table between the <td> … </td> of the outer table. We will create a table and try to nest the other table in the table and see the result.

We can create nested tables using <table> tag. The first table created is known as the outer table. The tables inside the outer tables are called nested tables.

Examples of HTML Nested Table

Example 1:

This example displays a table inside another table. We will create table A using HTML and nest another table B inside it. To identify and differentiate the two tables, we are setting the red border color of Table A and the yellow border color of Table B.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Example 1 of HTML Nested Table </title>
    </head>
<body>
	<table border="2" bordercolor="red">
		<tr>
			<td> Table <Adr></Adr> </td>
			<td> Table A
	<table border="2" bordercolor="yellow">
		<tr>
		       <td> Table B </td>
			<td> Table B </td>
		</tr>
		<tr>
			<td> Table B </td>
			<td> Table B </td>
		</tr>
	</table>
		</td>
		</tr>
		<tr>
			<td> Table A </td>
			<td> Table A </td>
		</tr>
	</table>
</body>
</html>

Output:

The output shows tables nested inside outer tables. We are adding nested tables inside the first row of the second column of the outer table. As you can see, table A has red border color, which is the outer table, and table B has yellow border color, which is the inner table. We have added border colours to differentiate the outer and inner tables easily.

Example 2:

This example displays a nested table with some style, so we use HTML and CSS to create the nested table.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Example 2 of HTML Nested Table </title>
</head>
<body>


    <table border="1" cellpadding="20px" bgcolor="black" cellspacing="5px" width="50%">


        <tr>
            <td bgcolor="purple"><h1> Column 6 </h1> </td>
            <td colspan="2" bgcolor="purple" >


             <table border="1" width="100%"  align="center" cellpadding="30px">
                 <tr>
                <td bgcolor="pink"></td>
                 <td bgcolor="pink"></td>
                 <td bgcolor="pink"></td> </tr>
             </table>


            </td>
        </tr>
        <tr>
            <td colspan="2" bgcolor="purple"><h1> Column 3 </h1></td>
            <td rowspan="2" bgcolor="purple">


        <table border="1" width="100%" align="center" cellpadding="30px">


            <tr> <td  bgcolor="pink" ></td> </tr>
            <tr> <td bgcolor="pink" ></td> </tr>
            <tr> <td bgcolor="pink" ></td> </tr>
            <tr> <td bgcolor="pink" ></td> </tr>
            <tr> <td bgcolor="pink" ></td> </tr>


        </table>


            </td>
        </tr>


        <tr>
            <td bgcolor="purple"> <h1>Column 5</h1> </td>
            <td bgcolor="purple"> <h1> Column 6 </h1> </td>
        </tr>
    </table>
    
</body>
</html>

Output:

The output shows a nested table designed with the help of CSS.

Example 3:

In this example, we are creating a nested table inside another nested table. We will add inner table 2 inside the first row of the second column of outer table 1, and again we will add inner table 3 inside the first row of the second column of inner table 2.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Example 3 of HTML Nested Table </title>
    </head><body>
	<h2 style="color:pink"> HTML Nested Table </h2>


	<table border="2" bordercolor="pink">
		<tr>
			<td> Outer Table 1 row 1 col 1 </td>
			<td> Outer Table 1 row 2 col 1 
				<table border="2" bordercolor="blue">
					<tr>
						<td> Inner Table 2 row 1 col 1 
							<table border="2" bordercolor="red">
								<tr>
									<td> Inner Table 3 row 1 col 1 
									</td>
									<td> Inner Table 3 row 1 col 2 </td>
								</tr>
								<tr>
									<td> Inner Table 3 row 2 col 1 </td>
									<td> Inner Table 3 row 2 col 2 </td>
								</tr>
								<tr>
									<td> Inner Table 3 row 3 col 1 </td>
									<td> Inner Table 3 row 3 col 2 </td>
								</tr>
							</table>
						</td>
						<td> Inner Table 2 row 1 col 2</td>
					</tr>
					<tr>
						<td> Inner Table 2 row 2 col 1 </td>
						<td> Inner Table 2 row 2 col 2 </td>
					</tr>
					<tr>
						<td> Inner Table 2 row 3 col 1 </td>
						<td> Inner Table 2 row 3 col 2 </td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td> Outer Table row 2 col 1 </td>
			<td> Outer Table row 2 col 2 </td>
		</tr>
	</table>
</body>


</html>

Output:

The output shows the nested table inside the outer table and the other nested table inside the second nested table. As you can see, outer table 1 has a pink border, inner table 2 has a blue border, and inner table 3 has a red border. We can easily understand and identify the table with the help of different border colors.

Browser Support:

It supports the following browsers:

1. Google Chrome
2. Internet Explorer
3. Mozilla Firefox
4. Safari
5. Microsoft Edge
6. Opera