deCODE - Our Newsletter for Jan 2022 is available for Download. 🗞   🥳
  Signup/Sign In

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

Nested table

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.

Colspan and rowspan table

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.