{"id":15929,"date":"2014-10-09T15:56:00","date_gmt":"2014-10-09T15:56:00","guid":{"rendered":"https:\/\/www.litmus.com\/?p=15929"},"modified":"2025-12-12T16:41:40","modified_gmt":"2025-12-12T21:41:40","slug":"fixing-table-alignment-in-yahoo-mail","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail","title":{"rendered":"Fixing Table Alignment in Yahoo Mail"},"content":{"rendered":"\n\n\t<div id=\"simple-text-block-block_e333b81230d42b881b96f18871555c82\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p>While many people dismiss Yahoo as an outdated company, their web-based Mail service is still a force to be reckoned with. Currently holding the #4 position in our <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/emailclientmarketshare.com\/\">Email Client Market Share<\/a> rankings, Yahoo Mail has a huge user base. Even the smallest email lists are sure to have a few Yahoo users, which can be disconcerting when Yahoo introduces a new bug that affects how email designs are displayed, like the recent Yahoo Mail layout problem we&#8217;ve been seeing.<\/p>\n<div class=\"cta\">\n<table>\n<tbody>\n<tr>\n<td class=\"block-1\"><img decoding=\"async\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2016\/03\/laptop_email-analytics.png\" \/><\/td>\n<td class=\"block-2\">\n<h4>How many of your subscribers use Yahoo?<\/h4>\n<p>When it comes to email marketing, it\u2019s all about your audience. Use <a rel=\"noopener\" href=\"https:\/\/litmus.com\/email-analytics\">Litmus Email Analytics<\/a> to discover which email clients are most popular with your subscribers.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/litmus.com\/hello\" target=\"_blank\" rel=\"noopener\">Learn more \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n<p>Such was the case a few months ago when email designers noticed that Yahoo was no longer properly aligning tables.<\/p>\n<h2>The Problem<\/h2>\n<p>As a necessity, email designers rely on HTML tables to structure the content of their campaigns. While there are a lot of hacks and tricks to working with HTML tables, one of the most commonly used techniques is relying on the align attribute to position the table. There are three values for the align attribute:<\/p>\n<ul>\n<li><strong>Left<\/strong> &#8211; aligns the table to the left of the display.<\/li>\n<li><strong>Center<\/strong> &#8211; aligns the table to the center of the display.<\/li>\n<li><strong>Right<\/strong> &#8211; aligns the table to the right of the display.<\/li>\n<\/ul>\n<figure id=\"post-8883 media-8883\" class=\"aligncenter nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2014\/10\/yahoo-fix-alignment-example.jpg\" alt=\"yahoo-fix-alignment-example\" \/><\/figure>\n<p>Many email designers use the align=\u201ccenter\u201d attribute to center tables in their campaigns. It helps prevent content from pushing up against the edges of a preview pane and generally makes for a better looking email. It\u2019s a technique we use in our own emails.<\/p>\n<p>Unfortunately, a while back, Yahoo updated their Mail application and created a bug with the align attribute. One of our <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\">Community<\/a> members, Mark,<a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/code\/217-yahoo-change\"> identified an issue<\/a> where the align=\u201ccenter\u201d attribute doesn\u2019t work, and tables are displayed to the left of their intended position, like so:<\/p>\n<figure id=\"post-8886 media-8886\" class=\"aligncenter nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2014\/10\/yahoo-fix-broken.jpg\" alt=\"The broken email before the fix.\" \/><figcaption>The broken email before the fix.<\/figcaption><\/figure>\n<p>As you can imagine, this is a significant issue for designers who have labored over every detail of their email campaign.<\/p>\n<h2>The Fix<\/h2>\n<p>After a few false starts and some haphazard testing, a solution was discovered. Mark Robbins <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/code\/217-yahoo-change\">posted a solution<\/a> in the Community that used the CSS table-layout property to fix the issue. When applied to the outermost container table, the table-layout property set with a value of \u2018fixed\u2019 ensures that the align=\u201ccenter\u201d attribute works as intended for any nested tables.<\/p>\n<h3>Pre-Fix<\/h3>\n<pre><code style=\"background-color: #222222 !important;\">&lt;!-- CONTAINER TABLE --&gt;\r\n&lt;table  width=\"100%\"&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;\r\n      &lt;!-- NESTED TABLES AND EMAIL CONTENT --&gt;\r\n    &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\n<h3>Post-Fix<\/h3>\n<pre><code style=\"background-color: #222222 !important;\">&lt;!-- CONTAINER TABLE --&gt;\r\n&lt;table  width=\"100%\" style=\"table-layout: fixed;\"&gt;\r\n  &lt;tr&gt;\r\n    &lt;td&gt;\r\n      &lt;!-- NESTED TABLES AND EMAIL CONTENT --&gt;\r\n    &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\n<p>Fortunately, including this CSS property doesn\u2019t affect how other email clients render campaigns, meaning it\u2019s safe to include in your emails from here on out. Better yet, there is <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.stubbornella.org\/content\/2009\/03\/27\/reflows-repaints-css-performance-making-your-javascript-slow\/#tables\">some evidence<\/a> that the the table-layout: fixed; declaration can actually improve rendering performance.<\/p>\n<p>With that update to our code, you can see that our layouts display exactly as intended!<\/p>\n<figure id=\"post-8885 media-8885\" class=\"aligncenter nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/litmus.com\/blog\/wp-content\/uploads\/2014\/10\/yahoo-fix-intended.jpg\" alt=\"The intended email design.\" \/><figcaption>The intended email design.<\/figcaption><\/figure>\n<h3>A Note on Safari<\/h3>\n<p>After posting this article, one of our readers noticed an issue with the fix when viewing in Safari:<\/p>\n<p>https:\/\/twitter.com\/joon82\/status\/520307675289378816<\/p>\n<p>After investigating, we found that older versions of Safari likely don&#8217;t support the table-layout property. I tested the fix in Safari 7.0.6, where it worked flawlessly, but in Safari 5.1.10, the fix did not work\u2014resulting in the left-aligned tables.<\/p>\n<h2>Always Test Your Emails<\/h2>\n<p>Undocumented changes to email clients can cause your emails to break for subscribers, which is why it\u2019s important to test every campaign before you hit \u201csend\u201d. Litmus allows you to send with confidence by quickly testing your emails in over 50 different email clients.<\/p>\n<p><a class=\"btn orange medium\" style=\"color: #fff !important; font-weight: bold; font-size: 16px;\" rel=\"noopener\" href=\"https:\/\/litmus.com\/pricing\">Book a demo \u2192<\/a><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Email clients constantly make updates that affect how emails are displayed. Recently, Yahoo Mail made one such update and left designers in the dark. Here&#8217;s the lowdown on exactly what changed and how to fix it. <\/p>\n","protected":false},"author":10,"featured_media":15934,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"blog_category":[53],"class_list":["post-15929","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Fixing Table Alignment in Yahoo Mail - Litmus<\/title>\n<meta name=\"description\" content=\"Email clients constantly make updates that affect how emails are displayed. Recently, Yahoo Mail made one such update and left designers in the dark. Here&#039;s the lowdown on exactly what changed and how to fix it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fixing Table Alignment in Yahoo Mail\" \/>\n<meta property=\"og:description\" content=\"Email clients constantly make updates that affect how emails are displayed. Recently, Yahoo Mail made one such update and left designers in the dark. Here&#039;s the lowdown on exactly what changed and how to fix it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-09T15:56:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-12T21:41:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-yahoo-fix.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"690\" \/>\n\t<meta property=\"og:image:height\" content=\"362\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Fixing Table Alignment in Yahoo Mail - Litmus","description":"Email clients constantly make updates that affect how emails are displayed. Recently, Yahoo Mail made one such update and left designers in the dark. Here's the lowdown on exactly what changed and how to fix it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail","og_locale":"en_US","og_type":"article","og_title":"Fixing Table Alignment in Yahoo Mail","og_description":"Email clients constantly make updates that affect how emails are displayed. Recently, Yahoo Mail made one such update and left designers in the dark. Here's the lowdown on exactly what changed and how to fix it.","og_url":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2014-10-09T15:56:00+00:00","article_modified_time":"2025-12-12T21:41:40+00:00","og_image":[{"width":690,"height":362,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-yahoo-fix.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail"},"author":{"name":"","@id":""},"headline":"Fixing Table Alignment in Yahoo Mail","datePublished":"2014-10-09T15:56:00+00:00","dateModified":"2025-12-12T21:41:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail"},"wordCount":6,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-yahoo-fix.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail","url":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail","name":"Fixing Table Alignment in Yahoo Mail - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-yahoo-fix.jpg","datePublished":"2014-10-09T15:56:00+00:00","dateModified":"2025-12-12T21:41:40+00:00","description":"Email clients constantly make updates that affect how emails are displayed. Recently, Yahoo Mail made one such update and left designers in the dark. Here's the lowdown on exactly what changed and how to fix it.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-yahoo-fix.jpg","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/05\/featured-image-yahoo-fix.jpg","width":690,"height":362},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/fixing-table-alignment-in-yahoo-mail#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Fixing Table Alignment in Yahoo Mail"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=15929"}],"version-history":[{"count":3,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15929\/revisions"}],"predecessor-version":[{"id":121656,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/15929\/revisions\/121656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/15934"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=15929"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=15929"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=15929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}