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;">
</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;">
</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 ( ) 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.
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;">
</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;">
</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.