How to Create Nested tables within tables in HTML ?
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;" >w3wiki</ 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 >w3wiki</ 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.
Contact Us