How can I display rows within rows in table?

Question

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?

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

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>

Answer 3

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 4

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 5

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).