user149159 user149159 - 2 years ago 106
HTML Question

Table width not respected using HTML 1.0 transitional

EDIT: Remember your COLSPANS. Thanks Lynel Hudson.

It seems I can't get my table to respect widths. Here's my code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<head>

</head>

<body>

<table width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="center">
<tr width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
<td width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle" *EDIT: colspan="3" /EDIT*>
<img src="http://vixi.com/sites/default/files/imagecache/Frontpage/RawFood.jpg" style="display:block;" border="0" width="480px" height="200px"/>
</td>
</tr>
<tr width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
<td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="red" align="left" valign="middle" style="font-size:10px;">
&nbsp;
</td>

<td width="440px" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="left" valign="middle" style="font-size:20px;">
Stuff
</td>

<td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" align="left" valign="middle" style="font-size:10px;">
&nbsp;
</td>
</tr>
</table>

</body>




Now when you take the second row out from the code, the table's overall width is respected. However, adding in the second row and it's three data cells breaks the width to a certain extent.

It seems that, on the second row, the widths for my two side-cells with blank text (
&nbsp;
) are not having their widths respected.

I have tried
table-layout:fixed
and
auto
, it does not work.

Also, I know inline styling in the HTML element tags is frowned upon, but is required for this particular piece of code for reasons. I am sorry for that inconvenience.

Answer Source

It's because you have only 1 table cell in your first row, and 3 in your second row. The top row expands to accommodate those 3 cells. Add colspan="3" to your first table cell in your first row to fix the width problem.

<head>

</head>

<body>

    <table width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="center">
        <tr width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="480px" height="200px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle" colspan="3">
                <img src="http://vixi.com/sites/default/files/imagecache/Frontpage/RawFood.jpg" style="display:block;" border="0" width="480px" height="200px"/>
            </td>
        </tr>
        <tr width="480px" cellpadding="0" cellspacing="0" border="0" bgcolor="#EFA8D6" align="left" valign="middle">
            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="red" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>

            <td width="440px" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" align="left" valign="middle" style="font-size:20px;">
                Stuff
            </td>

            <td width="20px" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" align="left" valign="middle" style="font-size:10px;">
                &nbsp;
            </td>
        </tr>
    </table>

</body>

Using inline CSS styles and tables for layout is usually a bad idea, which is probably a contributing factor into why you have had this problem.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download