HTML Email CSS: Centering the table and table content, most supported solution

user_13940337 0
Viewed 1995

I'm preparing the email html file for mailing. I'm using the table, tr, td tags. The whole content of my html so far is placed within a table, including another small table within one of the cells (see pictures below). I would like the whole table to display always in the center. I would also like the small table to display in the middle of the cell. The width of outer table it fixed. I tried putting into CSS:

margin-left: auto;
margin-right: auto;

and

margin: 0px auto;

, all of which I have found in here. The preview looks fine with either, the preview after uploading the file into mass mailing system works ok as well. But after sending, the centering does not display at all (the inner table also doesn't display at all in Gmail, only content of it). So I'm looking for the most common, most widely used html property, which would most likely display the table in the middle in every browser/mail client. OR, for the advice regarding the possible wrong usage of class properties.

My whole section:

<style>
table, th, td {
    border-collapse: collapse;
    font-family: Verdana, sant-serif;
}

th, td {
    padding: 15px;
    text-align: left;
}

.main {
    width:1000px;
    border: 5px solid #114889;
    margin: 0px auto;
}

.inside {
  width: 500px; 
  border: 1px dotted #0000CC;
  background-color: #CCE5FF;
  text-align: center;
  font-size: 10px;
  margin: 0px auto;
}
    
</style>

I am not a pro with the topic so I apologize for the use of wrong terminology.

Edit: Display in Outlook. All is well but the left alignment: enter image description here

Display in Gmail. No tables whatsoever: enter image description here

html-email html-table css html
2 Answers

Outlook only works with tables, so you're right to approach it from that angle. However, some Gmail environments do not even look at embedded CSS (CSS within <head> section). You'll need to 'inline' the CSS (https://www.campaignmonitor.com/resources/tools/css-inliner/).

To center a table in Outlook, use the attribute align on the <table> element like so: <table width="300" align="center"...>. You may also need to wrap it all with <center>...</center>, even though that tag is deprecated (yes, email is that old!).

You'll find in general Outlook will support the attributes - e.g. for border colours, <td bgcolor="#abcdef"...> - whereas others will support the inline style, e.g. <td style="background-color:#abcdef"...>. You should use both, and not rely on embedded CSS.

I can update more specifically if you need, after posting the affected HTML.

user_89425660

Try this one.

.parentTable {
  position: relative;
}

.childTable {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
user_44981760
Related