Momin
Reputation: 3320
html email template table header alignment
I have to float two header alignment left and right, the logo will be float left and navigation will be right but vertically center
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<table align="left">
<tr class="gf-e-header">
<td class="gf-e-header">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
</td>
<td valign="middle" align="right">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">[email protected]</a> <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>And the responsive links will go down after the logo.
Upvotes: 0
Views: 1464
Answers (4)
R. Brouwers
Reputation: 76
You can change valign="middle" attributes to align="center" and add height="70px" to the navigation table. There are better options, but I think it does what you want it to do.
<table align="right" width="70%" height="70px">
<tbody>
<tr align="center">
<td>
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</tbody>
</table>
Upvotes: 0
Lakshmi
Reputation: 85
You used a table inside a td tag. So when u align the list items right , it's not working. I updated that part pls go through and update it in your code.. Happy Coding!!! I just put the list items inside another div.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900" id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
html,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.gf-e-header td a {
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body style="background-color: #eeeeee;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" style="" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td class="cus-pad" style="padding-top: 20px">
<div style="float: left">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
</div>
<div style="float:right;">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit our website. The term „personal data“ comprises all data that can be used to personally identify you.
For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span style="font-size: 15px; color:#454545">The data on this website is processed by the operator of the website, whose contact
information is available under section „Information Required by Law“ on this website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://" style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp" style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px" href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px " href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">[email protected]</a> <br/> © 2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<br clear="all" />
</body>
</html>Upvotes: 0
MattHamer5
Reputation: 1491
Your header is currently not taking up the full width of the email, so first add width:100%; to this element. Next, just add either text-align:right; or just align="right" to the navigation section. See below:
<table align="left" style="width: 100%;">
<tbody>
<tr class="gf-e-header">
<td class="gf-e-header">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F" target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130">
</a>
</td>
<td style="text-align: right;">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</td>
</tr>
</tbody>
</table>Upvotes: 1
Sudarshan Rai
Reputation: 306
First of all you have pretty messed up code , I have filtered some. I fixed your issue using display:grid; to header logo and nav container and giving them both 1fr , so they can take space evenly ,
body {
font-family: 'Nunito Sans', Helvetica, Arial;
margin: 0 !important;
padding: 0 !important;
text-size-adjust: none !important;
-ms-text-size-adjust: none !important;
-webkit-text-size-adjust: none !important;
-webkit-font-smoothing: antialiased;
background-color: #EEEEEE;
font-size: 16px;
}
body {
height: 100% !important;
width: 100% !important;
}
a {
text-decoration: none;
color: #002173;
}
h1 {
font-family: 'Nunito Sans', Helvetica, Arial;
}
.cus-pad {
padding-left: 20px;
padding-right: 20px;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass span,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
#outlook a {
padding: 0;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
img {
-ms-interpolation-mode: bicubic;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
/*no linky*/
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.link-hover:hover {
text-decoration: none !important;
}
table {
border-collapse: collapse;
margin: 0 auto;
padding: 20px;
}
.button:hover {
background-color: #ffd251 !important;
}
.button-2:hover {
background-color: #777671 !important;
}
tr.social-link td a img {
height: 20px;
width: auto;
}
@media only screen and (max-width: 481px) {
/**generic styles for content added through editor**/
table {
width: auto !important;
}
td {
display: block;
margin: 0 auto;
width: auto !important;
}
/**all tds added to template will wrap!**/
img {
float: none !important;
display: block;
padding: 0;
max-width: 100%;
height: auto !important;
}
/****/
.container {
padding: 0 !important;
}
.no-wrap {
width: 100% !important;
}
table.no-wrap td {
/**add class no-wrap to table to keep it from wrapping**/
display: table-cell !important;
}
table[class="resp"] {
width: auto !important;
padding: 5px !important;
}
.main-content-area {
-webkit-text-size-adjust: 90% !important;
line-height: 21px;
text-align: left;
}
.promo-code {
padding: 20px !important;
}
td[class="main-content-area"] h2 {
-webkit-text-size-adjust: 80% !important;
}
td[class="force-col"] {
/**add this class to any td you'd like to wrap in a one-column layout**/
display: block;
margin: 0 auto;
width: auto !important;
padding: 0;
}
img {
max-width: 100% !important;
height: auto !important;
}
/**hide content**/
*[class="hide-me"] {
display: none !important;
}
img[class="show-img"] {
display: block !important;
padding-top: 10px;
max-height: none !important;
width: auto !important;
height: auto !important;
}
}
.header-top{
display:grid;
grid-template-columns:1fr 1fr;
place-items:center;
padding: 30px;
}
.header-top .logo{
justify-self:left;
}
.header-top .nav{
text-align:right;
display:flex;
flex-direction:row;
justify-content: right;
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" style="" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<!--xmlns fix Outlook Scaling-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Fix Outlook Scaling-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700|Nunito+Sans:300,400,600,700,900"
id="google-fonts-css" media="all" rel="stylesheet" type="text/css" />
<title></title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, Helvetica, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body style="background-color: #eeeeee;">
<table cellpadding="0" cellspacing="0" width="100%" style="margin-top: 30px">
<tr>
<td class="container" width="100%">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" class="resp" width="600">
<tbody>
<tr>
<td>
<div class="header-top">
<a class="logo" href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="130" />
</a>
<div class="nav">
<a href="">Company</a>
<a href="">Services</a>
<a href="">Locations</a>
<a href="">Resources</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="padding-bottom: 25px;padding-top: 20px;padding-right: 20px;padding-left: 20px;">
<div style="border:1px solid #002173"></div>
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">General information</h1>
<p style="color:#454545">The following information will provide you with an easy to
navigate overview of what will happen with your personal data when you visit our
website. The term „personal data“ comprises all data that can be used to personally
identify you.
For detailed information about the subject matter of data protection, please consult
our Data Protection Declaration, which we have included beneath this copy.</p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#FFFfFF" class="hero cus-pad">
<img src="https://i.imgur.com/f1OWoqx.jpg" width="560px" />
</td>
</tr>
<tr>
<td class="cus-pad">
<h1 style="color:#002173">Data recording on our website</h1>
<h4 style="color:#454545">Who is the responsible party for the recording of data on this
website (i.e. the„controller“)?
</h4>
</td>
</tr>
<tr>
<td align="left" class="main-content-area cus-pad"><span
style="font-size: 15px; color:#454545">The data on this website is processed by the
operator of the website, whose contact
information is available under section „Information Required by Law“ on this
website.</span>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom: 50px;padding-top:10px;">
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://" style="height:40px;v-text-anchor:middle;width:150px;" stroke="f"
fillcolor="#70002c">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#70002c;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;">Learn
More</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]-->
</div>
</td>
</tr>
<tr>
<td class="cus-pad" style="padding-top: 40px;padding-bottom:40px">
<div style="border:1px solid #002173;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 0">
<table border="0" cellpadding="0" cellspacing="0" class="resp"
style="background: #FFFFFF; padding-left: 15px; padding-right: 15px;" width="600">
<tbody>
<tr>
<td align="right" style="padding: 0 0 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="padding: 0 0 30px 0;">
<a href="https://emfluence.com?emfl_e=916958C94AF9D49E069A3B6512D798B4&emfl_c=68E0D107B451EDAAC017E81290098F6D4F1A98D9FF722E2FE743BFB4C178E43F"
target="_blank">
<img border="0" src="https://i.imgur.com/rczT2MV.png" width="100" />
</a>
</td>
</tr>
<tr class="social-link">
<td align="center" style="padding-bottom: 30px;">
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/gWSZvGP.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/cCgx01J.png" alt="">
</a>
<a style="margin-right: 10px;" href="">
<img height="18px" src="https://i.imgur.com/HKXV4wh.png" alt="">
</a>
<a href="">
<img height="18px" src="https://i.imgur.com/Akw0TqM.png" alt="">
</a>
</td>
</tr>
<tr>
<td style=" color:#6C6C6C; font-size:14px;padding-bottom: 30px;">
<a style="color:#6C6C6C; border-right: 1px solid #6C6C6C; padding-right: 12px;font-weight: bold;line-height: 14px"
href="">Privacy Policy</a>
<a style="color:#6C6C6C; padding-left: 10px;font-weight: bold; line-height: 14px "
href="">Terms of
services</a>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td style="padding-bottom: 30px;font-size: 10px">
This email was sent to <a href="">[email protected]</a> <br /> ©
2004-2020 All rights reserved - Global Fairways®
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br clear="all" />
</body>
</html>Upvotes: 0
Related Questions
- Align table side by side in html email template
- HTML table alignment not working correctly
- Html table alignment issue in outlook
- Styling tables in emails
- aligning HTML table for use in outlook email
- How to format an html table for email
- Tables Cells In Email Layout
- HTML email - td not aligning properly
- HTML Image in Table Alignment For Email
- HTML Email - Table Position