HTML Tables adding space

Why does a HTML Table add space around itself?  I'm putting together a mock mailer and most of the popular mail services (Mail Chimp / CC) require the Email to be in Table form.

You can see here that my mock design has black spaces.  Why is that?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You can solve it in two ways:
1. the "modern" way (CSS): Put this code inside your table style definitions
table#main_image { 
     border-collapse: collapse;

Open in new window

2. the "old-fashioned" way: put cellpadding="0" cellspacing="0" inside your HTML <table> code:
<table cellpadding="0" cellspacing="0" id="main_image">...

Open in new window

Dave BaldwinFixer of ProblemsCommented:
You have defined the background color of the "wrapper" table as black and you have padding around at least some of the inner tables.  As you can see from the W3C Box model , all padding, borders, and margin are added to the Outside of the content box.  That means that added padding and margins shows the background color of the "wrapper" table.

Your page is also not formatted properly.  It has no <head> section.  Many email clients like Outlook 2007 and newer do not support any DOCTYPE newer than HTML 4.  XHTML and HTML5 features will be ignored in many email programs.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
There are a few things

1) As @DaveBaldwin said, your html is not set up correctly.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>


Open in new window

2) You need to go 100% old school for email.  
Get rid of of your css and do it all inline.  There is a good chance most email readers and even servers will strip your css.  I believe mail chimp has an option checkbox to convert your css inline, but you might as well do this from the start.

3)Table layouts
Table layouts were not about stacking tables...they were tables inside of tables. However, your layout will be fine with just one table and multiple rows.  Just convert to one table.

4) White space  
I seem to get in trouble with white space.  When you are first making your email, keep the white space so it is easy to read, but when ready, compact it.   To get an idea of why, test your email in multiple readers going to webmail( gmail account, yahoo account, comcast account), mac mail and outlook.  Your email will look different in each.   With your current set up, you may see items that should be close together far apart.  I find this is caused by white space.

In other words convert
<table width="300">

Open in new window

<table width="300"><tr><td>&nbsp;</td></tr></table>

Open in new window

More importantly,  avoid spaces in tags like <tr >

If you do the above, the black lines will not be shown as that is space between tables.  I actually like the black lines though.

Good luck! and test in multiple email readers.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.