• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

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 http://rockintuit.com/pioneer/ that my mock design has black spaces.  Why is that?
1 Solution
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 http://www.w3.org/TR/CSS2/box.html , 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now