4 Replies Latest reply on Sep 1, 2010 3:21 PM by webgirl32

    Table cell spacing in html email

    AspiringDIV Level 1

      Hello everyone,

       

      I'm a little rusty on html, and using tables in particular - but sadly have to take this option as I'm working on a html page which will be sent as an email newsletter.

       

      I have two (hopefully straightforward!) questions which I'd really, really appreciate any help with - as I've just spent a couple of hours Googling without getting to the bottom of my issues...

       

      1. I understand background table images will not work in Outlook 2007. Is there any alternative way to acheive one image 'layered' upon the other, with the foreground image being a hyperlinked image? Obviously constrained by the fact I'm using tables and sending via email...

       

      2. My layout (using tables) looks pretty good in DWCS4, however, as soon as I preview in a browser I get large gaps between cells. Please see the code below. How do I take control of these gaps? I believe it is something to do with cellspacing? BTW this is set to "0" in my main table properties.

       

      <tr>
                        <td width="131" rowspan="2" valign="top" style="padding-left:10px"><a href="http://www.link.com"><img src="http://www.imagelink.jpg" alt="Alt text here" width="133" height="100" border=0/></a></td>
                        <td valign="top" style="padding-left:10px"><a href="http://www.link.com" style="color:#002A63; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-decoration:none; line-height: 16px;"><b>Title text</b></a></td>
                      </tr>
                      <tr>
                        <td valign="top" style="padding-left:10px"><p style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; line-height: 17px;">Some text here about the topic and here and here's some more text filling up this lovely space...<a href="http://www.link.com" style="color:#002A63; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-decoration:none; line-height: 16px;"><b>More</b></a></p></td>
                      </tr>

       

      3. Last but not least, it's probably the same solution as my second question, but I am also getting a (approx 1px) margin between table rows which I also need to remove, so that the bg colour doesn't show through for example.

       

      Sorry for three questions at once and really hope someone might be able to help. I'm on deadline to get this finished today so am keeping fingers firmly crossed.

       

      Thanks in advance for your time everyone!

       

      Aspiring DIV

        • 1. Re: Table cell spacing in html email
          brightbelt Level 1

          Hi,

            I just got into leaving tables for CSS but I still use them on some sites. Your code shows 10 px of padding in your <td> (table data tag).

           

          Check the DW table Properties by doing this. Put your cursor anywhere inside your table on the page in DW.  Then --> go to the Modify Menu   -->go to 'Table' ---> choose 'Select Table'. Then you should see the properties panel change to reflect your Table Properties.

           

          Then make sure ALL these 3 elements are set to '0': Cell Padding, Cell Spacing and Border.

           

          That should collapse the extra space away on your table.

           

          I hope this helps,

          Frank B.

          • 2. Re: Table cell spacing in html email
            AspiringDIV Level 1

            Thanks Frank. That's helped in the sense it has removed the spacing between my rows

            - great thanks!

             

            However, I still need to take control of the spacing for individual cells and am unsure how to do this.

             

            Also, any idea on the alternative to using a background table image with another image on top, as per my (1) above?

             

            Thanks again!

            • 3. Re: Table cell spacing in html email
              brightbelt Level 1

              I'm glad I helped.

               

              In the same Table properties panel, towards the left bottom, there are 'Height' and 'Width' text fields, marked 'H' and 'W'. You can enter pixel values in there by just putting the number itself, say, '45'. Just have your cursor positioned in the cell you want to stipulate values for when you do this.

               

              Keep this in mind though: For the *Table* Properties (not the cells), you'll see the drop-down menu just to the right letting you select whether you want your table to be measured in exact pixels or a percentage (general % of the browser window).

               

              IF, you want to state your Table measurement in pixels, then your table has to be mathematically consistent. For example, if your *Table* width is set to 650 pixels (same properties panel; it's all there), and individually your cell values add up to a number greater or lesser than 650, then your table is going to act screwy and not look right.

               

              For your image question, I think your only solution is to use some kind of Photo-Editing program and superimpose your images together as one ahead of time and put all your information there - maybe do it ALL in the Photo editing program. Then for your Email Newsletter, just insert the image into the table.

               

              Photoshop is good for this, but if you're on a budget, there's a Free alternative.....  try the 'Gimp' Program at this website

              http://www.gimp.org

               

              It does a lot of what many pay-for editing programs do.

               

              Good Luck, Frank B.

              • 4. Re: Table cell spacing in html email
                webgirl32

                I will recommend you to take crative stationery online courses here http://www.creative-stationery.net/getstart/introstat.html

                I have taken it. Learn a lot