How to create a table inside an HTML table column?
Creating a table is easy but a table that is inside another table column can trigger our mind. One may think of putting another <tr> within the <td> to add a table within the table column. But it cannot give us the desired solution. To solve this problem we have listed out a couple of ways.
Nested Table
HTML supports the nested table. You can insert a table inside another table. To add a table inside the table column, we need to repeat the process which you used for creating main table like adding <table>, <th>, <tr> and <td> tags. It should be remembered that we cannot nest some parts of the table instead you need to add the whole table inside the table column.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>ABC</th>
<th>ABC</th>
<th>ABC</th>
<th>ABC</th>
</tr>
<tr>
<td>Item1</td>
<td>Item1</td>
<td>
<table style="width:100%">
<tr>
<td>name1</td>
<td>price1</td>
</tr>
<tr>
<td>name2</td>
<td>price2</td>
</tr>
<tr>
<td>name3</td>
<td>price3</td>
</tr>
</table>
</td>
<td>item1</td>
</tr>
<tr>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
</tr>
</table>
</body>
</html>
Output
Using colpsan and rowspan
There is another way to add the table inside the table column. The colspan and rowspan are the attributes used in tables. The colpsan is used to span columns into multiple cells whereas the rowspan is used to span the row. These attributes have a numeric value like colspan=2 will span the column into two columns.
So in the following example, we have used rowspan and colspan to add a table inside a table column.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>ABC</td>
<th>ABC</td>
<th colspan="2">ABC</td>
<th>ABC</td>
</tr>
<tr>
<td rowspan="3">ITEM 1</td>
<td rowspan="3">ITEM 2</td>
<td>name1</td>
<td>price1</td>
<td rowspan="3">ITEM 4</td>
</tr>
<tr>
<td>name2</td>
<td>price2</td>
</tr>
<tr>
<td>name3</td>
<td>price3</td>
</tr>
<tr>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
</tr>
</table>
</body>
</html>
Output
Here is the output of the above program.
Conclusion
Here, we have used two ways to add a table inside table columns using HTML. In the first method, we have used a nested table whereas in the second method we have used rowspan and colspan. Choose any one of them and add a table within the table columns.
