Skip navigation
Currently Being Moderated

EDM Nested tables.

Jul 1, 2013 10:36 PM

Tags: #dreamweaver #tab_settings #nested_tables

Hello all,

 

Thanks to Vincent, I've managed to do one EDM email successfully.

 

Now, I'm not all that knowledgeable with tables, and I've created this for a client

 

http://makingdesign.com.au/debs.html

 

2 Questions: I need to get the red line in line with the left hand text, and I want to have a 'tab-like' space for the email, phone numbers, and website like this:

tab.png

 

how do I achieve these both these things? I feel quite silly not knowing how to do the tabs in CSS3!

 

Michael

 
Replies
  • Currently Being Moderated
    Jul 2, 2013 3:45 AM   in reply to Michael Farnbach

    Hello again Michael

     

    I have done a rough one using the table method(left is mine and and right is urs)

    http://wthdesign.net/test/lol.html

     

    the css part I didnt replace with urs completely but you get the ideas.

     

    so basically is just remove the entire div within the table and replace with a new table (this is call nested table)...

    to get the space you need you can either create more table and control with width

    or

    use  

     

    Another problems is that you shouldn't add ur css like that :

    ===================================================

    #wrapper { background-color: #9DF3FF; float: none; height: 400px; width: 800px; margin-right: auto; margin-left: auto; border-radius:5px; }

    ==================================================

     

    instead you should do like so:

    ===================================================

    <table style="background-color: #9DF3FF; float: none; height: 400px; width: 800px; margin-right: auto; margin-left: auto; border-radius:5px;">

              brabrabrabrabra........

    </table>

    ==================================================

     

    because in html email, the <head> tag will get remove entirely, so does your css, the only is to add it with the html tag.

     

    Sound messy and stupid, but that's the only choice you've got....

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 5:31 AM   in reply to vincentccw

    Sound messy and stupid, but that's the only choice you've got....

     

    Actually not - you can embed the CSS below the body tag - that works in HTML emails.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 5:59 AM   in reply to MurraySummers

    Oh really, haha I didnt know that.....because some website was saying it is the best to solution so far, but comes to think of it, your method should work too if embed within the body tag .

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 6:04 AM   in reply to vincentccw

    sorry I didnt finish my sentence, here is the continuation:

     

    so basically is just remove the entire div within the table and replace with a new table (this is call nested table)...

    to get the space you need you can either create more table and control with width

    or

    use

    html symbol &nbsp to get more space in between.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2013 7:51 PM   in reply to Michael Farnbach

    Hi Michael,

     

    Ther you go,

    http://wthdesign.net/test/lol2.zip

     

    I have completed all the html and css.

     

    If you are using dreamweaver to do your table coding, I can suggest using "table expended mode"

    http://ptgmedia.pearsoncmg.com/images/chap4_9780672330391/elementLinks /04fig30.jpg

    http://my.safaribooksonline.com/book/web-design-and-development/978144 9326999/6dot-tables/id475695

     

    It basically add padding/borders to all the tables and cells in the preview mode and let you debug more easily...

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2013 2:51 AM   in reply to Michael Farnbach

    hmm...yes it is possible but if you know how to edit the code would be an added advantage.

     

    Tutorials wise I think you can try google any tutorial base on "nested table". I think it is what you need the most for the  time being. For me I only learn the basic and just play around with it.

     

    I can give you some tips if you are willing get ur hand dirty with the code:

    1. For present stage, don't use "colspan" and "rowspan" on table as it has less control and hard to read.

    2. Use "nested table", with this you can control your layout which ever way you want to.

    3. use html "valign" to control the vertical alignment of your text (same as vertical-align in css)

    4. use html "align" to control the horizontal alignment of your text (same as text-align in css)

    5. If you wish to add space in your table (in div you would use, margin and padding or even float....), but in table I would recommend not using those, instead just add a table cell to it and adjust the height and width.

     

    ////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////

     

    and the table explanation(you can copy and paste this into dreamweaver and see how it works in the preview mode):

    <!--==============================this stand for 1 table with 1 table cell created====================-->

    <table>

         <tr>

              <td>1table cell</td>

         </tr>

    </table>

    <!--================================================================== =-->

     

    <!--====================this stand for 1 table with 2 table cell created=============-->

    <table>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

    </table>

    <!--================================================================== =-->

     

    Note:

    <th></th>- stand for header cell

    <td></td>- stand for standard cell

    The difference between both is <th> will make whatever text within bold and center align the text within but <td> won't.

     

    <!--====================this stand for 1 table with 1 header cell and 1 standard cell created=============-->

    <table>

         <tr>

              <th>1table cell</th>

              <td>1table cell</td>

         </tr>

    </table>

    <!--================================================================== =-->

     

    Note:

    <th> and <td> both work the same is just the text styling is different (for me I never use <th> only <td> as I can restyle it again using css)

     

     

    As you can see all the table cells created are in horizontal, but what if you want it appear on the second line? To make it on the second line you need to create another <tr> like so:

    <!--====================this stand for 1 table with 4 cells (2 on top and 2 on bottom)=============-->

    <table>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

    </table>

    <!--================================================================== =-->

     

    A more complicated will look like so

    <!--====================this stand for 1 table with 12 cells (3cell horizontally repeated 4 times vertically)=============-->

    <table>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

     

    </table>

    <!--================================================================== =-->

    Notes: Always remember this, using <td> will result in horizontal cell, <tr> will result in vertical cell.

     

     

    Now if you want to add width/height or some spacing to it just do it like:

    <!--===========this stand for 1 table with 12 cells (3cell horizontally repeated 4 times vertically, with width)==========-->

    <table>

         <tr>

              <td width="100">1table cell</td>

              <td width="120">1table cell</td>

              <td width="140">1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

     

    </table>

    <!--================================================================== ===============================-->

    Notes: Notice I only specify in the first <tr> width and the rest of the <tr> will follow and there is no need to apply width for the second and third <tr>. Same goes to height but slightly different, but you can experiment with it....

     

    Since the first <tr> width stretch the second and third <tr> to be the same as first, now the question comes, I want to control the second tr width,  how should I do that? That's where "nested table"  comes in.

    <!--====================1 table and 1 nested table======================-->

    <table>

         <tr>

              <td width="100">1table cell</td>

              <td width="120">1table cell</td>

              <td width="140">1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>

                        <table>

                          <tr>

                              <td>1table cell</td>

                             <td>1table cell</td>

                         </tr>

                         <tr>

                              <td>1table cell</td>

                             <td>1table cell</td>

                         </tr>

                </table>

              </td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

         <tr>

              <td>1table cell</td>

              <td>1table cell</td>

              <td>1table cell</td>

         </tr>

     

    </table>

    <!--=======================================================-->

     

    hope all these help.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2013 8:38 PM   in reply to Michael Farnbach

    hmmm, there might be few reasons,

    1. the html styling is overiding the css

    2. or there is something wrong in your css...

     

    can you upload the original html file that you use to send to you email accounts. I'll need to have a look....

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2013 9:56 PM   in reply to Michael Farnbach

    I use outlook 2007 to send a copy to myself but everything works fine. What email client are you using to send your email?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2013 10:24 PM   in reply to Michael Farnbach

    Hmmm, then I wont be able to help you much from here , because I don't have a mac to troubleshoot the errors......

     

    There is one more thing you can try is, since you already have the html and css , but the css is group together, try replacing all the css and put it inline with the html using style. e.g. style=" font-family:Arial, Helvetica, sans-serif;"

     

    See if it will work..... Normally I add all my css styling using the style tag to prevent the styling issue like yours.

     

    If you are ok with using gmail to send your email you can try this tutorial:

    http://www.youtube.com/watch?v=zEybFVWawII

     

    GOOD LUCK

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 9, 2013 11:10 PM   in reply to Michael Farnbach

    Glad it helps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points