18 Replies Latest reply: Jul 9, 2013 11:10 PM by vincentccw RSS

    EDM Nested tables.

    Michael Farnbach Community Member

      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

        • 1. Re: EDM Nested tables.
          vincentccw Community Member

          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....

          • 2. Re: EDM Nested tables.
            MurraySummers ACP/MVPs

            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.

            • 3. Re: EDM Nested tables.
              vincentccw Community Member

              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 .

              • 4. Re: EDM Nested tables.
                vincentccw Community Member

                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.

                • 5. Re: EDM Nested tables.
                  Michael Farnbach Community Member

                  Hi Vincent and Murray,

                   

                  It's stil not working! Vincent could you please send me all of the code?

                   

                  I think i've put in your code

                   

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

                   

                  in the wrong spot.

                   

                  this is what I want to achieve:

                   

                  like-this-.jpg

                  thanks again, much appreciated.

                   

                  Michael


                  • 6. Re: EDM Nested tables.
                    vincentccw Community Member

                    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/9781449326999/6dot-tables/ id475695

                     

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

                    • 7. Re: EDM Nested tables.
                      Michael Farnbach Community Member

                      thanks so much Vincent!

                       

                      Looks great. Perfect.

                       

                      I'm using DW to do the tables, but as i'm unused to them, I've put them in the 'designer' way. ie. just clicking on 'intert tables'

                      tricky to operate.

                       

                      M

                      • 8. Re: EDM Nested tables.
                        Michael Farnbach Community Member

                        arrgh!

                         

                        So grateful for your help Vincent, but I'm at sixes and sevens with this! I can't work out how you did it so well..

                         

                        Is it possible to achieve this purely the non-codey way? any tutorials you can reccomend?

                         

                        cheers in advance

                         

                        Michael

                        • 9. Re: EDM Nested tables.
                          vincentccw Community Member

                          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.

                          • 10. Re: EDM Nested tables.
                            Michael Farnbach Community Member

                            geez! thanks mate! You've really gone to a lot of trouble. I'll try that and see if any of it penetrates my thick skull

                             

                            cheers.

                             

                            Michael

                            • 11. Re: EDM Nested tables.
                              Michael Farnbach Community Member

                              Thanks again Vincent. This is great, Muchas Gracias.

                               

                              One thing i did notice though was when I sent it to my gmail (I've set up various free web accouns for the purpose) it didn't read the CSS at all: you can see that the text is now centred and the grey text has dissapeared.

                               

                              is there anyway around this?

                               

                              . Picture 1.png

                              • 12. Re: EDM Nested tables.
                                vincentccw Community Member

                                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....

                                • 14. Re: EDM Nested tables.
                                  vincentccw Community Member

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

                                  • 15. Re: EDM Nested tables.
                                    Michael Farnbach Community Member

                                    I'm on a mac platform, so I'm using 'Mail'

                                     

                                    When I open up the HTML in safari, you can 'package it' and it automatically sends it to Mail.

                                    • 16. Re: EDM Nested tables.
                                      vincentccw Community Member

                                      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

                                      • 17. Re: EDM Nested tables.
                                        Michael Farnbach Community Member

                                        Hi Vincent,

                                         

                                        I tried the Youtube tutorial, and it works like a charm!

                                         

                                        Thanks so much...

                                         

                                        Michael

                                        • 18. Re: EDM Nested tables.
                                          vincentccw Community Member

                                          Glad it helps