Complex table rowspan and colspan

Question

Can any arbitrary arrangement of merged and unmerged cells in Excel be reproduced in an HTML table by appropriate use of rowspan and colspan, or are there limitations? I've seen some pretty complex arrangements solved around here, so I'm hopeful.

I have a grid of 8 rows and 5 columns that is merged into 16 distinct cells, representing the header and content of each of 8 sections, labeled A-H.

Here is the arrangement I am trying to achieve, as it looks in Excel (cells B2:F9):

Here is how I conceptualize the HTML spans:

The following markup is my best approximation: Note that the red divs are intended to represent the arbitrary sizes of a section's content.

JSFiddle

<style>
    table {
        border-spacing: 0;
        width: 1500px;
    }

        table > tbody > tr > td {
            border: 1px solid black;
            vertical-align: top;
            text-align: center;
        }

            table > tbody > tr > td > div {
                margin: 0 auto;
                border: 1px red solid;
            }
</style>
<table>
    <tr id="Row1">
        <td>A
        </td>
        <td colspan="2">B
        </td>
        <td colspan="2">C
        </td>
    </tr>
    <tr id="Row2">
        <td>
            <div style="width: 340px; height: 100px;" />
        </td>
        <td colspan="2" rowspan="3">
            <div style="width: 450px; height: 200px" />
        </td>
        <td colspan="2" rowspan="5">
            <div style="width: 400px; height: 100px" />
        </td>
    </tr>
    <tr id="Row3">
        <td>D
        </td>
    </tr>
    <tr id="Row4">
        <td rowspan="5">
            <div style="width: 340px; height: 100px;" />
        </td>
    </tr>
    <tr id="Row5">
        <td colspan="2">E
        </td>
    </tr>
    <tr id="Row6">
        <td colspan="2">
            <div style="width: 450px; height: 200px;" />
        </td>
    </tr>
    <tr id="Row7">
        <td>F
        </td>
        <td colspan="2">G
        </td>
        <td>H
        </td>
    </tr>
    <tr id="Row8">
        <td>
            <div style="width: 330px; height: 100px" />
        </td>
        <td valign="top" colspan="2">
            <div style="width: 200px; height: 100px" />
        </td>
        <td valign="top">
            <div style="width: 200px; height: 100px" />
        </td>
    </tr>
</table>

It generates this:

I have two problems with my solution:

• The bottom edge of header 'D' (row 3) seems to be linked to the top edge of header 'E' (row 5), and header 'D' is too tall. Instead, I think the content cell beneath 'A' should shrink to fit the div, drawing header 'D' up.
• I can't explain why more than half of the cells (B,C,E,F,H) are far too wide for their content. The table ends up so much wider than I need - I would expect more cells to fit their content the way G does.

The rendering is consistent across browsers. Have I made a mistake with my spans, or is this not achievable for some reason?

Answer 1

Right now you are letting the browser interpret how wide and tall each cell in the table is going to be. You need to set the width and height attributes for each cell to fix your problems.

<table>
        <tr id="Row1">
            <td width="340">A
            </td>
            <td colspan="2" width="450">B
            </td>
            <td colspan="2" width="450">C
            </td>
        </tr>
        <tr id="Row2">
            <td width="340" height="100">
                <div style="width: 340px; height: 100px;" />
            </td>
            <td colspan="2" rowspan="3" width="450">
                <div style="width: 450px; height: 200px" />
            </td>
            <td colspan="2" rowspan="5" width="400">
                <div style="width: 400px; height: 100px" />
            </td>
        </tr>
        <tr id="Row3">
            <td>D
            </td>
        </tr>
        <tr id="Row4">
            <td rowspan="5" width="340">
                <div style="width: 340px; height: 100px;" />
            </td>
        </tr>
        <tr id="Row5">
            <td colspan="2" width="450">E
            </td>
        </tr>
        <tr id="Row6">
            <td colspan="2" width="450">
                <div style="width: 450px; height: 200px;" />
            </td>
        </tr>
        <tr id="Row7">
            <td>F
            </td>
            <td colspan="2">G
            </td>
            <td>H
            </td>
        </tr>
        <tr id="Row8">
            <td width="350">
                <div style="width: 350px; height: 100px" />
            </td>
            <td valign="top" colspan="2" width="200">
                <div style="width: 200px; height: 100px" />
            </td>
            <td valign="top" width="300">
                <div style="width: 300px; height: 100px" />
            </td>
        </tr>
    </table>

See updated fiddle.