Remove spacing between table cells and rows

Question

I\'m designing an HTML email template, which forces me to use tables. In the code below, I\'m having trouble (1) removing the spacing below the placeholder image and (2) removin

Answer 1

Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.

I.e.:

<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">

Answer 2

I had a similar problem and I solved it by (inline)styling the td element as follows :

<td style="display: block;"> 

This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.

Answer 3

Nothing has worked. The solution for the issue is.

<style>
table td {
    padding: 0;
}
</style>

Answer 4

If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.

Answer 5

You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.

Answer 6

It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.