I am not able to get this HTML email to align center or at least Left in Outlook window. I need help figuring out what is set up incorrectly here. Thank you for all your help. I have tried different ways to update and try to center it. It shows like it's center on the minimized view, but when expanded in outlook window, it is all they way to the right.
Your help will be much appreciated to fix this.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
/**This is to overwrite Outlook.com’s Embedded CSS************/
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong><a href="https://plateau.com/">Internal Users</a></strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
</table>
</body>
</html>I wrapped an additional table around your 3 column layout, then wrapped that with a center tag, and set all of the surrounding tables and tds to 100% width and align center. See this on JSFiddle.
<html>
<head>
<title>Learning Assignment Changes Notification</title>
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align=" center " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px; " width="560 ">
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#ccffff; ">
<tr>
<td><img src="addlogo " /></td>
<td align="right ">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0 " cellspacing="0 " border="0 " width="100% ">
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText1 " />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Added</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD ">
<CPNT_ID_ADDED/>
</td>
<td class="myTD ">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD ">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText2 " />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Revision Date</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD ">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD ">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead "><label key="notification.ApmStudentLearningPlanNotification.MessageText3 " />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0 " class="myTable ">
<tr>
<th scope="col " class="myTH ">Type</th>
<th scope="col " class="myTH ">Course ID</th>
<th scope="col " class="myTH ">Date Deleted</th>
<th scope="col " class="myTH ">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD ">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD ">
<CPNT_ID_DELETED/>
</td>
<td class="myTD ">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD ">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px "> </td>
</tr>
<tr>
<td>
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF; ">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0 " cellspacing="0 " border="0 " style="padding:0px;margin:0px;width:100%;background-color:#ebebeb; ">
<tr>
<td valign="top ">
<table align="left " class="column " style="width:300px ">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong><a href="https://plateau.com/ ">Internal Users</a></strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px; "> </td>
</tr>
<tr>
<td colspan="3 " style="padding:0px;margin:0px;font-size:20px;height:20px; " height="20 "> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>
<!-- end snippet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Learning Assignment Changes Notification</title>
<style>
html, body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
table {
border-collapse: separate;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #2BA6CB
}
a:hover {
text-decoration: underline;
}
h2,
h2 a,
h2 a:visited,
h3,
h3 a,
h3 a:visited,
h4,
h5,
h6,
.t_cht {
color: #585858 !important
}
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td {
line-height: 100%
}
/**This is to center your email in Outlook.com************/
.ExternalClass {
width: 100%;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
p,
p.lead {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin-bottom: 15px;
color: #000;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
font-size: 60%;
color: #6f6f6f;
line-height: 0;
text-transform: none;
}
h1 {
font-weight: 200;
font-size: 44px;
}
h2 {
font-weight: 200;
font-size: 37px;
}
h3 {
font-weight: 500;
font-size: 27px;
}
h4 {
font-weight: 500;
font-size: 23px;
}
h5 {
font-weight: 700;
font-size: 17px;
}
h6 {
font-weight: 900;
font-size: 14px;
text-transform: uppercase;
color: #444;
}
p.lead {
font-size: 17px;
}
/* My Table Styles */
.myTable {
font-family: Sans-Serif;
font-size: 12px;
/*margin: 20px;*/
text-align: left;
width: 100%;
}
.myTH {
border-bottom: 2px solid #009999;
color: #009999;
font-size: 14px;
font-weight: normal;
padding: 10px 8px;
}
.myTD {
color: #585858;
padding: 9px 8px 0;
}
/* Odds and ends */
.column {
width: 300px;
float: left;
}
.column tr td {
padding: 15px;
}
.column-wrap {
padding: 0!important;
margin: 0 auto;
max-width: 600px!important;
}
.column table {
width: 100%;
}
.social .column {
width: 280px;
min-width: 279px;
float: left;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size: 12px;
margin-bottom: 10px;
text-decoration: none;
color: #FFF;
font-weight: bold;
display: block;
text-align: center;
}
a.fb {
background-color: #3B5998!important;
}
a.tw {
background-color: #1daced!important;
}
a.gp {
background-color: #DB4A39!important;
}
a.ms {
background-color: #000!important;
}
.sidebar .soc-btn {
display: block;
width: 100%;
}
</style>
</head>
<body width="100%">
<center style="width: 100%;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" width="100%">
<table role="presentation" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:0px;margin:0px;width:100%;">
<!-- begin 3 column layout -->
<tr>
<td colspan="3" width="align="center" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td>
</tr>
<tr>
<td style="padding:0px;margin:0px;" width="560">
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#ccffff;">
<tr>
<td><img src="addlogo" /></td>
<td align="right">
<h6>Learning Assignment Changes</h6>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<h3>Hi
<FIRST_NAME/>
</h3>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText1" />
<CPNTS_ADDED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Added</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_ADDED/>
</td>
<td class="myTD">
<CPNT_ID_ADDED/>
</td>
<td class="myTD">
<REVISION_DATE_ADDED/>
</td>
<td class="myTD">
<CPNT_TITLE_ADDED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText2" />
<CPNTS_MODIFIED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Revision Date</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_MODIFIED/>
</td>
<td class="myTD">
<CPNT_ID_MODIFIED/>
</td>
<td class="myTD">
<REVISION_DATE_MODIFIED/>
</td>
<td class="myTD">
<CPNT_TITLE_MODIFIED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
<LOOP>
<p class="lead"><label key="notification.ApmStudentLearningPlanNotification.MessageText3" />
<CPNTS_DELETED_ROLLUP/>
</p>
<p>
<table cellspacing="0" class="myTable">
<tr>
<th scope="col" class="myTH">Type</th>
<th scope="col" class="myTH">Course ID</th>
<th scope="col" class="myTH">Date Deleted</th>
<th scope="col" class="myTH">Course Title</th>
</tr>
<LOOP>
<tr>
<td class="myTD">
<CPNT_TYPE_ID_DELETED/>
</td>
<td class="myTD">
<CPNT_ID_DELETED/>
</td>
<td class="myTD">
<REVISION_DATE_DELETED/>
</td>
<td class="myTD">
<CPNT_TITLE_DELETED/>
</td>
</tr>
</LOOP>
</table>
</LOOP>
</p>
</td>
</tr>
<tr>
<td style="height: 40px"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="padding:20px;margin:0px;width:100%;background-color:#FFFFFF;">
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- column 1 -->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;background-color:#ebebeb;">
<tr>
<td valign="top">
<table align="left" class="column" style="width:300px">
<tr>
<td>
<p>Click below to go to the LMS:</p>
<p><strong><a href="https://plateau.com/">Internal Users</a></strong></p>
</td>
</tr>
</table>
<!-- /column 1 -->
</td>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr>
<td colspan="3" style="padding:0px;margin:0px;font-size:20px; height:20px;" height="20"> </td>
</tr>
</table>
</td></tr>
</center>
</body>
</html>