Align tables in email from Jetpack

Since your theme stylesheet is not included in the email that is sent to your readers, your custom CSS isn’t there to be applied to the emails when readers open them.

Instead of adding that CSS to your theme stylesheet, I’d suggest adding it to the tables themselves. You could use that generator:
https://www.quackit.com/html/html_table_generator.cfm

I hope this helps.

It didn’t work. I can go back into my post, from this morning, and see the edits that I made under the text side:

<table vertical-align: top; empty-cells: show; margin-bottom: 1.2cm;>

but it didn’t relay these settings in the email.

Any other suggestions?

Did you try to make these changes in a new post, or did you edit a post that was already sent to your subscribers?

If you edit a post that’s already published, no new email will be sent. You will consequently need to publish a new post to see your new tables in an email client.

Could you give it a try and let me know how it goes?

The changes were made before the post went out.
This was a brand new post that I created yesterday afternoon and was sent out at 6:30am PST this morning. I only went back into the post today to verify that the css changes were in fact still there and didn’t somehow get erased.

Thanks for giving that a try.

I just subscribed to your site, and I’ll take a look at the next email that comes through to try to understand what goes wrong.

I’ll post again here as soon as I get a post from you!

Jeremy,

Thank you so much! The post that is scheduled for today, 3/29 at 6:30am PST, has a a small table at the bottom.

Just a FYI, my posts on Fridays always have a lot of tables.

I received the email, and the table looks good on my end:
https://i.wpne.ws/aRZg

It doesn’t look exactly like the table on your site, but that’s because your theme stylesheet adds some extra styles to your tables.

To reproduce the exact same look, you’d have to move some of your site’s CSS over to the post itself. That would include the borders you added around each image in the custom CSS editor, as well as the custom CSS you added to .post-content table.

If you look at the link you included above, you’ll notice that the 3rd picture is not aligning at the top.

Therefore, the code I’m putting into my posts isn’t relaying to the emails:
<table vertical-align: top; empty-cells: show; margin-bottom: 1.2cm;>

I’m not so much concerned about a border, hence why I haven’t tried to include it in the above code, but the alignment looks horrible on my Friday posts when I have 10+ rows and each row isn’t aligning at the top.

Thanks again,
Jen

It might be worth trying to add inline styles to the td elements as well to remove all margin and float each element to the left, and not just to table and tbody.

However, since the email’s width is not as wide as your site’s content width, I’m afraid it will always be hard to get a nice layout. As soon as the text gets too long, it pushes the next column a bit.

One alternative would be to split your posts into 2 parts:

• If you go to Settings > Reading in your dashboard, you can change your Feed Settings to “Summary”. Once you save your changes, all subscription emails will only include an excerpt of your post, with a link to continue reading on the site. If your tables are towards the end of your posts, they won’t be included in the subscription emails.
• If your Feed settings are set to “Full Post”, you can split the content of each one of your blog posts in 2 parts thanks to the More tag:
  <!--more-->

  Everything that is above the More tag will appear on your home page and in the subscription emails, followed by a link inviting users to click to continue reading; everything that is below that tag will only appear on the post’s page.

  You can read more about it here:
  https://en.support.wordpress.com/splitting-content/more-tag/

While none of these 2 solutions are ideal, they’ll allow you to control what your subscribers see in the emails.

Let me know if it helps.

Jeremy,
I removed the margin, added the float to the left, and included vertically aligning to the top for each of the following sections – <table>, <tbody> & <td> and it still didn’t work.

And we want our email subscribers to receive our full posts, so unfortunately using ‘Summary’ or ‘More’ isn’t an option for us.

So it’s looking like we can’t change the way tables are formatted in an email?

So it’s looking like we can’t change the way tables are formatted in an email?

You can, but only to a certain extent. The changes you’ve made to your tables by adding inline styles were included in the subscription emails.

However, the overall width of the email won’t change. As long as your site’s content width doesn’t match the email’s content width, things will look a bit different in the emails.
The emails can’t be wider than 560px at the moment.

You could try to make the tables 560px on your site, and see how that works.