HTML Nested Table

In HTML, you can create nested tables by placing one table within another. This allows you to create more complex table structures with multiple levels of rows and columns. Here’s an example:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>
      <table border="1">
        <tr>
          <th>Nested Header 1</th>
          <th>Nested Header 2</th>
        </tr>
        <tr>
          <td>Nested Row 1, Cell 1</td>
          <td>Nested Row 1, Cell 2</td>
        </tr>
        <tr>
          <td>Nested Row 2, Cell 1</td>
          <td>Nested Row 2, Cell 2</td>
        </tr>
      </table>
    </td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

In the example above, we have a main table with two columns and three rows. The first row contains the header cells, and the subsequent rows contain data cells.

Within the first data cell of the main table, we have a nested table. This nested table has its own structure with header cells and data cells.

By nesting tables, you can create more complex layouts and organize data in a hierarchical manner. However, it’s important to use nested tables sparingly and only when necessary, as excessive nesting can make the HTML structure more complex and harder to maintain.

Remember to use appropriate table elements like <th> for table headers and <td> for data cells to maintain proper table semantics.