How can I include one table inside another?

Including one table inside another table on a Web page is called "nesting tables". This is one way to generate complex table layouts without creating extremely complex tables.

It's easier than you might think to include one HTML table inside another. You just have to think about each table cell (td) as a whole new space to place your next table.

1. First create a 2 column by 2 row table. The HTML will look like this:

   <table>
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>
  </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>column 2 row 2</td>
  </tr>
</table>

2. Decide which cell you want to place the nested table. I'll put mine in column 2 row 2.
3. Replace the text in that cell with your second table. The HTML will look like this (I've highlighted the second table):

   <table>
  <tr>
    <td>column 1 row 1</td>
    <td>column 2 row 1</td>   </tr>
  <tr>
    <td>column 1 row 2</td>
    <td>
      <table>
        <tr>
          <td>column 1 row 1</td>
          <td>column 2 row 1</td>
        </tr>
        <tr>
          <td>column 1 row 2</td>
          <td>column 2 row 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The trick to nested tables is to always close your inner table before you close the outer table cells.

Nested Tables Slow Pages Down

Remember that nested tables slow page rendering. This means that the more tables you have on a page, especially nested inside one another, the longer it will take for the browser to build the page. Always consider if you really need that table before you add it to your design. There may be a less complex way to get the same result if you think carefully.