Question

I am writing an HTML newsletter and for some reason my img width does not extend the full width of the td tag despite having the same pixel width. My image shows up as 180, but the width of the td tag is 186. provided below is my code.

<table width="600" bgcolor="#ffffff" height="30" cellpadding="0" cellspacing="0">
    <tr >
        <td width="10"></td>
        <td width="180" height="30" bgcolor="#000000"><p style="text-align:center; color:#ffffff">ALONSOS</p></td>
        <td width="10"></td>
        <td width="180" bgcolor="#000000"><p style="text-align:center; color:#ffffff">ZEN WEST</p></td>
        <td width="10"></td>
        <td width="180" bgcolor="#000000"><p style="text-align:center; color:#ffffff">LUCKIE'S TAVERN</p></td>
        <td width="10"></td>

    <tr>
        <td width="10"></td>
        <td width="180" height="30" bgcolor="#ffffff"><img src="zenwest.png" width="180"/></td>
        <td width="10"></td>
        <td width="180" height="30" bgcolor="#000000"><img src="zenwest.png" width="180"/></td>
        <td width="10"></td>
        <td width="180" bgcolor="#000000"><img src="magerks.png" width="180" /></td>
        <td width="10"></td>
    </tr>
    <tr>
        <td width="10"></td>
        <td width="180" ><p><b>Saturday, Feb. 9th</b></p>
            <p>$3 Bud Light</p>
            <p>$4 Soco & Lime</p>
            <p>$3 Bud Light</p>
        </td>
        <td width="10"></td>
        <td width="176"><p><b>Saturday, Feb. 9th</b></p>
            <p>$3 Bud Light</p>
            <p>$4 Soco & Lime</p>
            <p>$3 Bud Light</p>
        </td>
        <td width="10"></td>
        <td width="180"><p><b>Saturday, Feb. 9th</b></p>
            <p>$3 Bud Light</p>
            <p>$4 Soco & Lime</p>
            <p>$3 Bud Light</p>
        </td>
        <td width="10"></td>
    </tr>
</table>

Answer 1

table-cell width is similar to display: inline in that it does not necessarily respect the provided width, and in this case it depends on the table. The table cell widths will increase to fit the width of the entire 600px-wide table, resulting in the seemingly odd behavior you are seeing. You can either increase the in-between <td>s such that the total widths add up to 600, or you can remove the table width and have it be whatever it’s going to be (something like 580px).