CODEWITHSUNDEEP
htmlcssemail
Shivam
Shivam

Reputation: 2258

HTML email, remove spacing between tr tags?

I have tried adding cellspacing="0" cellpadding="0" . Does not fix the issue in email clients.

Here is a image of the spacing in gmail:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Openx Webinar</title>
</head>
<body>
    <div style="margin:0;padding:0;font-family:Arial,Helvetica,sans-serif">
    <table align="center" width="600" cellspacing="0" cellpadding="0" style="font-family:Arial,Helvetica,sans-serif" >
        <!-- Header -->
        <thead>
            <tr>
                <td id="header" width="600" valign="top" align="left"><img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series"/></td>
            </tr>
            <tr>
                <td id="banner" width="600" valign="top" align="left"><img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image"></td>
            </tr>
            <tr>
                <td width="600" height="20" valign="top" align="left"></td> 
            </tr>   
        </thead>
         </table>
     </div>
    </body>

<html>

Any advice on how I can fix this? NOTE: this is for HTML email.

UPDATED HEADER CODE: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Openx Webinar</title>
    <style type="text/css">
    div, p, a, li, td { -webkit-text-size-adjust:none; }
    </style> 
</head>
<body>
    <div style="margin:0;padding:0;font-family:Arial,Helvetica,sans-serif">
    <table align="center" width="600" cellspacing="0" cellpadding="0" style="font-family:Arial,Helvetica,sans-serif" >
        <!-- Header -->
        <thead>
            <tr>
                <td id="header" width="600" valign="top" align="left">
                    <img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series" height="65" style="display:block">
                </td>
            </tr>
            <tr>
                <td id="banner" width="600" valign="top" align="left">
                    <img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image" height="180" style="display:block">
                </td>
            </tr>
            <tr>
                <td width="600" height="20" valign="top" align="left"></td> 
            </tr>   
        </thead>
    </table>
    </div>
</body>
</html>

Upvotes: 3

Views: 12359

Answers (5)

Matthew T Rader
Matthew T Rader

Reputation: 176

To remove the space between the tr tags simply add border-collapse: collapse; to your table tag. Like for a table within an email you can add it as:

<table style="border-collapse: collapse;">

Upvotes: 1

Thomas M. Salamone
Thomas M. Salamone

Reputation: 1

  1. Start by putting your table in another table that has the width set to 100%.
  2. interior table set to 600 and is center holds all contents
  3. no longer will you need to put width or align on every td. That is bloating your email.
  4. block works. As does valign top.
  5. Get better results!
  6. Sorry, Get rid of Div. Tables are just that. s
  7. Don't use classes.
  8. Cellpadding and Cellspacing are Dynamite and a torch. You're going to blow stuff up.

Upvotes: -1

itsclarke
itsclarke

Reputation: 8992

Change your code to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Openx Webinar</title>
</head>
<body>
  <div style="padding:0;font-family:Arial,Helvetica,sans-serif">
    <table align="center" width="600" cellspacing="0" cellpadding="0" border="0" style="font-family:Arial,Helvetica,sans-serif" >
      <tr>
        <td id="header" width="600" valign="top" align="left" style="padding:0px;outline:none;border:none;">
        <img src="http://openx.dev.limusdesign.com/emails/webinar/images/header.png" alt="OpenX Webinar Series" style="padding:0px;outline:none;border:none;"/>
        </td>
      </tr>
      <tr>
        <td id="banner" width="600" valign="top" align="left" style="padding:0px;outline:none;border:none;">
        <img src="http://openx.dev.limusdesign.com/emails/webinar/images/banner.png" alt="Banner Image" style="padding:0px;outline:none;border:none;">
        </td>
      </tr>
      <tr>
        <td width="600" height="20" valign="top" align="left"></td> 
      </tr>   
    </table>
  </div>
</body>
</html>

Upvotes: 1

Mariam
Mariam

Reputation: 1

You can change display option for <td></td> that contains the first image:

thead tr:first-child td
{
  display: block;
  height:65px;
}

or for the img itself

thead tr:first-child td img
{
display: block;
}

Upvotes: 0

Shivam
Shivam

Reputation: 2258

Fixed the issue by adding a style="display:block" to images.

Upvotes: 10

Related Questions