How to create nest tables within tables in HTML ? - GeeksforGeeks

14 Aug, 2021
HTML tables are very helpful to structure 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 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: Below is an example 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. The tables have been drawn using different colors for better understanding and clarity of the readers. The green border table represents the outer table whereas the inner table has a blue border.
HTML
<!DOCTYPE html><html>  <body>    <table border="2" bordercolor="green">        <tr>            <td>Table 1</td>            <td> Table 1                <table border="2" bordercolor="blue">                    <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: The above example is modified a little for better understanding.
HTML
<!DOCTYPE html><html>  <body>    <h2 style="color:green">GeeksforGeeks</h2>    <p><b>Nested tables</b></p>      <table border="2" bordercolor="green">        <tr>            <td>main Table row 1 column 1</td>            <td>main Table column 2                <table border="2" bordercolor="blue">                    <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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
How to Insert Form Data into Database using PHP ?
CSS to put icon inside an input element in a form
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript