Nested HTML Tables

Nested HTML tables are tables that are placed inside another table. They are used to create more complex and structured layouts with HTML tables. To create a nested table, you need to insert a <table> element inside a <td> element of the outer table.

How to Create Nested Tables Within HTML Tables?

Use the table generator and grab the HTML markup, then using an editor paste another table inside a cell.

<table style="background: AntiqueWhite">
  <tr>
    <td>A</td> <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D
    <table style="background: white">
      <tr>
      <td>1</td> <td>2</td>
      </tr>
      <tr>
      <td>3</td> <td>4</td>
      </tr>
    </table>
  </td>
  </tr>
</table>

We can place tables in the header and footer cells too.

<table style="background: Beige">
  <thead>
    <tr>
      <th>Head</th>
      <th>
        <table style="background: Lavender">
          <thead>
            <tr>
             <th>A</th><th>B</th>
            </tr>
          </thead>
          <tbody>
           <tr><td>C</td><td>D</td></tr>
         </tbody>
       </table>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr><td>cell</td><td>cell</td></tr>
  </tbody>
</table>

Table In A Table In A Table

If you want to create a table inside a table inside a table, you can do so by nesting more elements inside the cell elements of the inner tables. We can combine as many tables as we wish.

Use Colspan and Rowspan Instead

The colspan attribute is used to merge cells horizontally and rowspan is used to merge them downwards. Whenever possible, use them instead of nested tables to avoid complicating the code.

The same result with nested tables and rowspan & colspan

Hover the tables and click the pencil icons to inspect their source.

Using colspan and rowspan instead of nested tables can have some advantages, such as:

• Simpler and cleaner HTML code
• Easier to maintain and update
• Better performance and loading speed
• Better accessibility and compatibility with screen readers
• More flexibility and responsiveness with CSS

However, colspan and rowspan can also have some disadvantages, such as:

• Limited to rectangular shapes and alignments
• Cannot span across different table sections (thead, tbody, tfoot)
• Cannot nest other elements inside a spanned cell
• Can cause problems with sorting and filtering data

Therefore, you should use colspan and rowspan when you need to create simple and logical layouts, but avoid using them for complex and irregular layouts that might require nested tables

Nested Div Tables

We can place div tables inside other div tables. This is obvious because we can put <div> tags inside other divs. The online converter at DivTable.com supports converting nested tables to structured divs.

<div class="divTable" style="background: AntiqueWhite">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">A</div>
      <div class="divTableCell">B</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell" style="padding:0">
        <div class="divTable" style="background: Beige">
          <div class="divTableBody">
            <div class="divTableRow">
              <div class="divTableCell">1</div>
              <div class="divTableCell">2</div>
              <div class="divTableCell">3</div>
            </div>
            <div class="divTableRow">
              <div class="divTableCell">4</div>
              <div class="divTableCell">5</div>
              <div class="divTableCell">6</div>
            </div>
          </div>
        </div>
      </div>
      <div class="divTableCell">D</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">E</div>
      <div class="divTableCell">F</div>
    </div>
  </div>
</div>

Nested HTML Table Generator

The online generator helps you create the code for HTML tables. Then you can easily place them inside each other, using any text editor.