Spacing is off when I paste my table's code into an HTML block

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: resolved

I tried the HTML workaround, and it didn't work well at all.  When I inserted the code and clicked save, the text from the table appeared, but the spacing was completely different (essentially, my text was all close together instead of being spread out like it was in the table). I'm trying to create a horizontal navigation bar to include at the top of my emails that will link to different areas of our website. Any tips on how to do this?
Note: This conversation was created from a reply on: Turn off or adjust table borders.
Photo of Florence-Lauderdale Public Library

Florence-Lauderdale Public Library

  • 25 Posts
  • 1 Reply Like

Posted 4 years ago

  • 0
  • 1
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Hey there -- I think we can make this work! I made a copy of your mailing (Navigation bar test - emma copy) and opened the HTML view for your text block with the table. I first removed the non-breaking spaces ( ) in there so that we could better control that spacing, then I pasted that into the new HTML block. I manually added non-breaking spaces into the HTML to space those nav bar options out more appropriately.

Here's what that looks like in the code:



and in the editor:


You can work from my copy and add more spaces in the code if you need to! Let me know if that doesn't do the trick. :)
Photo of Florence-Lauderdale Public Library

Florence-Lauderdale Public Library

  • 25 Posts
  • 1 Reply Like
Thanks for the tip! I'll tinker with it and see what I can do.
Photo of AustinTexas.org

AustinTexas.org

  • 6 Posts
  • 0 Reply Likes
I am having the same issue with the table border. Went the route of copying the code and dropping into a new HTML drag and drop but the spacing is off. I've been trying to edit the code by hand with no luck. Any help?
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Just to clarify, are you referring to Emma's table tool, or the borders you've coded into your HTML? Can you point me to the mailing you're working in? Thanks!
Photo of AustinTexas.org

AustinTexas.org

  • 6 Posts
  • 0 Reply Likes
The table tool. The mailing is the only in our account. :) Campaign is called "Inside Austin Sports"
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
As mentioned in this conversation (where I merged your other post), there isn't a way to turn off borders on the Emma table tool. I don't see a table in your mailing, though. They're added from the formatting toolbar and look like this:



I do see that you've created a calendar using an HTML block, which looks great! Can you help me understand what I'm missing here? :)
Photo of AustinTexas.org

AustinTexas.org

  • 6 Posts
  • 0 Reply Likes
I initially created the table in a text box, not realizing then that you can't get rid of the border. So after researching in the community forum, copied the code from that table and pasted into an HTML block. When I did that, the table appears without a border but the spacing is now off. I have tried to adjust myself but am stuck.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
Ah, I see! You haven't applied any vertical alignment to the <td> tags, you'll want to be sure to include 
<td style="vertical-align: top;> in each <td>.

I've updated the HTML in my copy of your mailing so you can see that in action!
Photo of AustinTexas.org

AustinTexas.org

  • 6 Posts
  • 0 Reply Likes
I copied that updated code into the HTML block and in the template it looks great. When I send a test send to myself and a co-worker, the alignment of that entire block and the footer of the email is off - now left justified (and out of line with the rest of the template). We've also lost the black background behind the footer. Would the revised code you provided affect the footer? We weren't having this issue prior to that.
Photo of Emily Hollingsworth

Emily Hollingsworth, Alum

  • 2203 Posts
  • 158 Reply Likes
You'll need to add table alignment in your HTML to make that table stick to the center, since now, the inbox is determining that for you. In my copy, I added <table align="center"> to your table tag, and that table came through centered in my inbox. I'm also seeing the black footer as expected in my Gmail inbox. What email client are you using?

You may also want to take a look at our HTML best practices here and here to make sure everything is in tip top shape to render consistently across various inboxes!