How can I display rows within rows in table?

html

Solution

You can use the Colspan and rowspan attributes to set how far each cell goes across rows and columns.

For example:

<table>
  <tbody>
    <tr>
        <td rowspan="2">Top Left Header</td>
        <td colspan="3">Call Standard</td>
    </tr>
    <tr>
        <td>Flagged</td>
        <td>Percent</td>
        <td>Days</td>
    </tr>
  </tbody>
</table>

Note that the table ends up with 4 columns. The first row defines one column which crosses 2 rows, and a column which crosses 3 columns.

The second row just fills in the "missing" columns; ignoring the first one because it was defined previously.

Problem

I am trying to give the effect of general headings in this table and then subdivide such heading into three categories. The table should continue this subdivisions all the way to the end. I see that I can probably insert a table within a row insert, but don't want to saturate myself with tables. Is there a way to get this effect in a simpler way?

Original source