How to an Html Table inside another Table

How to Nested Tables in HTML

Nesting tables simply means making a Table inside another Table. Nesting tables can lead to complex tables layouts, which are both visually interesting and have the potential of introducing errors depends on its nesting nature.

Tables within Tables

Nested Table always need to be placed between < td > ... < /td > tags of the outer container Table. You can format nested tables as you would format any other HTML Table.

The following HTML code create a Table with one row and two column and inside the second column again create another table (nested table) with two rows.

In the above picture the outer table with red colors and Inner table with Green color.

HTML Source Code :

<html>
<body >
  <table border=5 bordercolor=red>
    <tr>
      <td>
        Fisrt Column of Outer Table
      </td>
      <td>
        <table border=5 bordercolor=green>
          <tr>
            <td>
              First row of Inner Table
            </td>
          </tr>
          <tr>
            <td>
              Second row of Inner Table
            </td>
          </tr>
        </table>
      </td>
  </tr>
  </table>
</body>
</html>

Tables inside a Table Cell

Nesting tables can lead to more complex tables, inner Table should begin and end in the same cell of the outer container table. You can nested tables any number of levels. The following HTML code create a four level nested tables.

In the above picture the outermost table with color Red and nested table with color Green , Yellow and Blue respectively.

HTML Source Code :

<html>
<body >
  <table border=15 bordercolor = red>
    <tr><td>
      <table border=15 bordercolor = green>
      <tr><td>
        <table border=15 bordercolor = yellow>
          <tr><td>
            <table border=15 bordercolor = blue>
              <tr><td>
              </td></tr>
            </table>
          </td></tr>
        </table>
      </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

You can format or placed other HTML Tags inside nested tables as you would do any other HTML Table. The following HTML code create an outer Table with two rows and each row has two columns. Each nested table add other HTML tags like Image, Links , List , Text etc.

HTML Source Code :

<html>
<body >
  <table border=5 bordercolor = red>
    <tr>
    <td >
      <table >
        <tr><td>
        First Nested Table
        </td></tr>
      </table>
    </td>
    <td >
    <table >
      <tr><td>
        <ul>
          <li>VB.Net</li>
          <li>Csharp</li>
          <li>Asp.Net</li>
        </ul>
      </td></tr>
    </table>
    </td>
    </tr>
    <tr>
    <td >
    <table >
      <tr><td>
        <a href="www.mywebsite.com/about.html">About</a>
      </td></tr>
    </table>
    </td>
    <td>
      <table >
        <tr><td>
          <img src="image.png">
        </td></tr>
      </table>
    </td>
    </tr>
  </table>
</body>
</html>

The more tables you have nested inside one another, the slower the page will load. It gets more complicated for the browser to render, and so the page loads more slowly.