Adarian Adarian - 1 month ago 12
CSS Question

TD Inheriting TABLE width

The issue I'm facing is that a TD in my table is inheriting the table's width despite having it's own width explicitly set.

The code is as follows:

<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="header.gif" alt="New Releases">
</td>
</tr>

<tr style="font-size: 0;">

<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>

<td width="85px">
<a href="" title="" class="product-image"><img src="product1.jpg" width="85" height="85" alt="image" ></a>
</td>

<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 1</a>
</td>

<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>

<td width="10px">
</td>

<td width="85px">
<a href="" title="" class="product-image"><img src="product2.jpg" width="85" height="85" alt="" ></a>
</td>

<td width="100px">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">item 2</a>
</td>

<td width="100px" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<a href=""><img src="view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>

<td width="30px"><img width="30px" height="95px" src="rightsep.gif" alt=""></td>

</tr>

<tr>
<td>
<img src="footer.gif" alt="">
</td>
</tr>

</table>
</div>
</div>


Specifically, the TD being affected is the first in the table:

<td width="30px"><img width="30px" height="95px" src="leftsep.gif" alt="" ></td>


Which is inheriting the table width of 640px instead of the 30px it should be.

It seems regardless of what I change, the issue is still there.. I've tested both locally and in JSFiddle.

I'm by no means experienced in HTML so I'm not sure what the problem is.

Updated Code

<div class="widget widget-new-products">
<div class="widget-products">
<table cellspacing="0" width="640px" cellpadding="0" border="0" align="center" style="border-spacing: 0;">
<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases.gif" alt="New Releases">
</td>
</tr>

<tr>

<td width="30"><img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-left.gif" alt="" ></td>

<td width="85">
<a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/1/_/1.jpg_14603.jpg" width="85" height="85" alt="image" ></a>
</td>

<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">Clydie King - Direct Me - Inc Never Like This Before</a>
</td>

<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£30.00</p>
<a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>

<td width="85">
<a href="" title="" class="product-image"><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/catalog/product/cache/1/small_image/85x/9df78eab33525d08d6e5fb8d27136e95/4/_/4.jpg_14418.jpg" width="85" height="85" alt="" ></a>
</td>

<td width="100">
<a style="font-family:sans-serif; font-size:13px; line-height:14px; color:#444; font-weight:bold;" title="" href="">T.M.V.S. - Don't Be Shy</a>
</td>

<td width="111" align="right">
<p style="font-family:sans-serif; font-size:22px; line-height:24px; font-weight:bold; color:#e05371; margin:0 0 5px 0;">£10.00</p>
<a href=""><img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/view-product.jpg" height="30px" width="111px" alt="View Product"></a>
</td>

<td width="30">
<img width="30px" height="95px" src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-right.gif" alt="">
</td>

</tr>

<tr>
<td colspan="8">
<img src="http://crazybeatweb1.cms.iwebcloud.co.uk/media/newsletter/new-releases-bottom.gif" alt="">
</td>
</tr>

</table>
</div>
</div>


I now have a gap above and below the middle row which I can't get rid of.

Answer

Every row in a table must have the same number of cells. If you want to use less cells in a row you must explicitly set the colspan attribute to match:

   <tr>
        <td colspan="9"> <!-- set this to the maximum number of cells there will be in a row -->
            <img src="header.gif" alt="New Releases">
       </td>
    </tr>

You can mix and match the colspan:

    <tr>
        <td colspan="5">
            <img src="header.gif" alt="New Releases">
        </td>
        <td colspan="4"> 
            <img src="header.gif" alt="New Releases">
        </td>
    </tr>

but the total must always match the maximum number of cells used in the table.

This process must be repeated for every row in the table.

Comments