Question

I’m trying to build an HTML table (4.01 Transitional) using the code below. It renders as I’d expect using chrome from windows, but renders in an unexpected fashion in Firefox 17.0.1 provided w/ Ubuntu. On Ubuntu, the first columns in the 2nd and 3rd row are the same width. Also the 2nd column in the 3rd row is the same width as the last 3 columns of the 2nd row. Is there anything I can do that would be compatible with more browsers?

<table width="500">
    <tr>
        <td align="center" colspan="5" width="500">5 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="2" width="200">2 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="4" width="400">4 wide</td>
    </tr>
</table>

---

BEGIN EDIT

I’m not sure it’s the best way, but I achieved consistent behavior between browsers with <colgroup> and <col> elements.

<table width="500">
    <colgroup>
        <col width="25" />
        <col width="75" />
        <col width="200" />
        <col width="100" />
        <col width="100" />
    </colgroup>
    <tr>
        <td align="center" colspan="5">5 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="2">2 wide</td>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="1">1 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="4">4 wide</td>
    </tr>
</table>

Answer 1

The simplest solution is to add the markup

<col><col><col><col><col>

right after the <table> tag and the CSS rule

col { width: 100px }

The table markup now used violates the HTML table model, at least as defined in HTML5 drafts and interpreted by some browsers. If you check the markup using the W3C Markup Validator in HTML5 mode, you will get (in addition to messages about presentational attributes) the error message “ Table column 5 established by element td has no cells beginning in it.” The real issue is, rather, than there is no cell starting in column 2 as you mean it to be.

Adding a <tr><td><td><td><td><td></tr>, with cell widths set to 100 pixels, demonstrates what the issue is. But using such a dummy row would usually disturb your layout. So it is better to use col elements to specify the column structure.