4 Replies Latest reply on Jun 18, 2016 2:09 AM by osgood_

    How do I eliminate the extra space in my table.

    Red Stick Sports

      I'm trying to put together a header for some email marketing, and I'm having trouble eliminating the white space in the web browser.

       

      This is what I want it to look like, and also what I see in the design view:

      design view.PNG

       

      This is what it is displaying in google chrome:

      web view.PNG

       

      This is my code:

      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>Untitled Document</title>

      <style type="text/css">

      .rssaddy {

        font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, sans-serif;

        text-align: left;

      }

      .hours {

        font-family:"Myriad Pro","Gill Sans", "Gill Sans MT",  "DejaVu Sans Condensed", Helvetica, Arial, sans-serif

      }

      table{

      border-collapse: collapse;

      border-spacing:0;

      }

      img

      {  border-style: none;

      }

      </style>

      </head>

       

       

      <body>

      <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

        <tbody>

          <tr>

            <td width="365" height="160" rowspan="3"><a href="http://www.redsticksports.com" target="new"><img src="RSS-LOGO.jpg" style="margin: 0px 0px" width="365" height="160" align="top" alt="Red Stick Sports"/></a></td>

            <td width="216" style="color: #D0202D; font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', sans-serif; font-size: 24px; margin:0; padding:0;">Main Store</td>

            <td width="217" style="color: #D0202D; font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', sans-serif; font-size: 24px; margin:0; padding:0;">2nd location at:</td>

          </tr>

          <tr>

            <td height="60" align="left" valign="top"><p class="rssaddy">5770 Essen Lane<br>Baton Rouge, LA 70809<br>(225) 769-6232</p></td>

            <td align="left" valign="top"><p class="rssaddy">17424 Airline Hwy.<br>Prairieville, LA 70769<br>(225) 677-9390</p></td>

          </tr>

          <tr>

            <td height="24" colspan="2" valign="bottom"><p><img src="RSS-SLOGAN.jpg" style="margin: 0px 0px" width="428" height="24" alt="ANY SEASON, ANY REASON"/></p></td>

          </tr>

          <tr>

          <td colspan="3"><img src="RSS-BREAK.jpg" width="800" height="3" alt=""/></td>

          </tr>

        </tbody>

      </table>

       

       

       

       

      <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

        <tbody>

          <tr>

            <td width="144" ><b class="hours" style="color: #D2202E">ESSEN LANE:</b></td>

            <td width="205" class="hours" style="text-align: center">Monday-Friday 10am-6pm</td>

            <td width="161" class="hours" style="text-align: center">Saturday 9am-4pm</td>

            <td width="272" ><strong class="hours" style="color: #D0202D; text-align: right;">AND NOW OPEN: Sunday 1pm-5pm</strong></td>

          

          </tr>

          <tr>

         

            <td><p class="hours" style="text-align: justify; color: #D2202E;"><strong>AIRLINE HWY:</strong></p></td>

            <td class="hours" style="text-align: center">Monday-Friday 10am-6pm</td>

            <td class="hours" style="text-align: center">Saturday 9am-4pm</td>

            <td style="text-align: center"><strong class="hours">CLOSED SUNDAYS</strong></td>

           

          </tr>

         

          <tr>

          <td colspan="4"><img src="RSS-BREAK.jpg" width="800" height="3" alt=""/></td>

          </tr>

        </tbody>

      </table>

      </body>

      </html>

       

      I've been bouncing around from site to site and post to post on these forums looking for the answer, so I'm sure I've added in a few redundant solutions to this, but nothing seems to be working.

        • 1. Re: How do I eliminate the extra space in my table.
          osgood_ Level 8

          The problem is the construction is not set up correctly.

           

          You can eliminate some of the white space by adding margin: 0; padding: 0; to the 2 css styles below, as shown.

           

          .rssaddy {

          font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, sans-serif;

          text-align: left;

          margin: 0;

          padding: 0;

          }

           

           

          .hours {

          font-family:"Myriad Pro","Gill Sans", "Gill Sans MT",  "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;

          margin: 0;

          padding: 0;

          }

           

          However it wont eliminate all of the wite space because the large image is stretching the table cells to the right of it down, forcing more white space between the lines of text than you wuld like.

           

          The idea when building with tables is to use 'nested' tables - that way they remain independent and the table cells are not as affected by other table cells they are joined to when you do not use nested tables.

          • 2. Re: How do I eliminate the extra space in my table.
            osgood_ Level 8

            See if this helps:

             

            <!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">

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

            <title>Red Stick Sports</title>

            </head>

             

            <body>

             

            <table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

            <tr>

            <td rowspan="2" style="vertical-align: top;">

            <a href="http://www.redsticksports.com" target="new"><img src="RSS-LOGO.jpg" style="margin: 0px 0px" width="365" height="160" align="top" alt="Red Stick Sports"/></a>

            </td>

            <td width="100%" style="vertical-align: top;">

            <!-- Begin 2 column table -->

            <table width="100%" border="0" cellpadding="0" cellspacing="0">

            <tr>

            <td style="vertical-align: top; color: #D0202D; font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', sans-serif; font-size: 24px;">

            Main Store

            </td>

            <td style="vertical-align: top; color: #D0202D; font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', sans-serif; font-size: 24px;">

            2nd location at:

            </td>

            </tr>

            <tr>

            <td style="vertical-align: top; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, sans-serif;">5770 Essen Lane<br>Baton Rouge, LA 70809<br>(225) 769-6232</td>

            <td style="vertical-align: top; font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Arial Black, sans-serif;">17424 Airline Hwy.<br>Prairieville, LA 70769<br>(225) 677-9390</td>

            </tr>

            </table>

            <!-- End 2 column table -->

            </td>

            </tr>

            <tr>

            <td style="vertical-align: bottom;"><img src="RSS-SLOGAN.jpg" style="margin: 0px 0px" width="428" height="24" alt="ANY SEASON, ANY REASON"/></td>

            </tr>

            </table>

             

             

            <!-- Begin contact table -->

            <table style="border-top: 1px solid #000000; border-bottom: 1px solid #000000;" width="800" border="0" align="center" cellpadding="0" cellspacing="0">

             

            <tr>

            <td style="vertical-align: top; padding-top: 10px; padding-bottom: 5px; color: #D2202E; font-family: Helvetica, Arial, sans-serif;"><strong>ESSEN LANE:</strong></td>

            <td style="vertical-align: top; padding-top: 10px; padding-bottom: 5px; text-align: center; #D2202E; font-family: Helvetica, Arial, sans-serif;">Monday-Friday 10am-6pm</td>

            <td style="vertical-align: top; padding-top: 10px; padding-bottom: 5px; text-align: center; font-family: Helvetica, Arial, sans-serif;">Saturday 9am-4pm</td>

            <td style="vertical-align: top; padding-top: 10px; padding-bottom: 5px; color: #D2202E; text-align: right; font-family: Helvetica, Arial, sans-serif;"><strong>AND NOW OPEN: Sunday 1pm-5pm</strong></td>

            </tr>

             

            <tr>

            <td style="vertical-align: top; padding-top: 5px; padding-bottom: 10px; color: #D2202E; font-family: Helvetica, Arial, sans-serif;"><strong>AIRLINE HWY:</strong></td>

            <td style="vertical-align: top; padding-top: 5px; padding-bottom: 10px; text-align: center; #D2202E; font-family: Helvetica, Arial, sans-serif;">Monday-Friday 10am-6pm</td>

            <td style="vertical-align: top; padding-top: 5px; padding-bottom: 10px; text-align: center; font-family: Helvetica, Arial, sans-serif;">Saturday 9am-4pm</td>

            <td style="vertical-align: top; padding-top: 5px; padding-bottom: 10px; text-align: center; font-family: Helvetica, Arial, sans-serif;"><strong>CLOSED SUNDAYS</strong></td>

            </tr>

             

             

            </table>

            <!-- end contact table -->

             

            </body>

            </html>

            • 3. Re: How do I eliminate the extra space in my table.
              Nancy OShea Adobe Community Professional & MVP

              If this is being used for emails, what you see in browsers won't matter much.  What matters is how it looks in Gmail, Outlook, Windows/Apple Mail, etc...

               

               

              Nancy O.

              1 person found this helpful
              • 4. Re: How do I eliminate the extra space in my table.
                osgood_ Level 8

                800px is probably to wide for most email clients. When I used to produce html emails I always set the width to 600px.

                 

                Now days you should investigate making your emails responsive of course, although I have only briefly touched on this as I no longer produce them on a regular basis, as I once did.