How can I display rows within rows in table?

Answer 1

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.

Answer 2

Colspan, Rowspan, or Table-Nesting*.

*table-nesting is detestable, but sometimes it's easier to work with than complicated series' of colspans and rowspans.

Answer 3

How about using the "colspan" as defined by the HTML standard? You would apply it to the cell called "call standard" and define it should span over 3 cells.

Answer 4

You don't have to have another inner table... you can have the short row as a full table row, and have header cells that don't subdivide rowspan to span it (and accordingly use colspan on above and below cells).

Answer 5

You can use rowspan and colspan to achieve this:

<table>
    <tr>
        <td rowspan="2">Column 1 Heading</td>
        <td colspan="3">Call Standard</td>
        <td rowspan="2">Column 3 Heading</td>
    </tr>
    <tr>
        <td>Flagged</td>
        <td>Percent</td>
        <td>Days</td>
    </tr>
    <tr>
        <td>Column 1 Value</td>
        <td>4</td>
        <td>1%</td>
        <td>6</td>
        <td>Column 3 Value</td>
    </tr>
</table>