I'm stuck on how I'd get this layout, achieved by nested tables and css..
This is my current code, but it's not working properly yet... Can someone tip me in the right direction? Can't seem to figure it out...
<body>
<div id="container">
<table>
<tr>
<td id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
<td class="img">
<img src="img/bal.png"/>
</td>
</tr>
<tr>
<td class="img">
<img src="img/bal.png"/>
<td class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
</tr>
EDIT:
Here an extra IMG example, provided by my teacher:
Here is a solution with different styling based on even-odd table rows.
I think this solution is right, if your teacher wants to drive your css knowledge more deep and wide.
table tr:nth-of-type(odd) .text {
text-align: right;
}
table tr:nth-of-type(odd) .img > img {
float: left;
}
table tr:nth-of-type(even) .text {
text-align: left;
}
table tr:nth-of-type(even) .img > img {
float: right;
}
.text::after {
content: attr(title);
text-align: right;
display: block;
}
<div id="container">
<table>
<tr>
<td class="text" title="myname">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
<td class="img">
<img src="img/bal.png"/>
</td>
</tr>
<tr>
<td class="img">
<img src="img/bal.png"/>
<td class="text" title="myname">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
</tr>
<tr>
<td class="text" title="myname">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
<td class="img">
<img src="img/bal.png"/>
</td>
</tr>
<tr>
<td class="img">
<img src="img/bal.png"/>
<td class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare orci at accumsan cursus. Donec orci nisi, mollis a lectus eu, tristique aliquam est. Sed et dui sit amet orci ornare dictum a a odio. Sed gravida elit sed est faucibus, vitae sollicitudin magna vestibulum. Sed non vestibulum metus. Vivamus efficitur molestie diam, et vulputate mauris sollicitudin id. Vestibulum ornare fermentum urna, at consectetur nibh vehicula eu. Sed bibendum consectetur congue. Aliquam nisl dolor, tempus vel nibh ac, bibendum ultrices enim. Donec condimentum eget arcu eget accumsan. Cras elementum odio et erat fermentum feugiat. Nulla sed vestibulum elit. Sed dictum hendrerit dui at condimentum. Donec ac leo ante.</p>
</td>
</tr>
</table>
</div>
Try this
<table border="1" width="400">
<tr>
<td width="200" style="text-align:justify";>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align:right;">myname</p>
</td>
<td width="200" style="text-align:left; vertical-align: middle;">
image <!-- put image tag here -->
</td>
</tr>
<tr>
<td width="200" style="text-align:right; vertical-align: middle;">
image <!-- put image tag here -->
</td>
<td width="200" style="text-align:justify";>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align:right;">myname</p>
</td>
</tr>
<tr>
<td width="200" style="text-align:right;">
Lorem Ipsum
<p style="text-align:right;">myname</p>
</td>
<td width="200" style="text-align:left; vertical-align: middle;">
image <!-- put image tag here -->
</td>
</tr>
</table>
<table border="1" width="800px" cellpadding="3" cellspacing="0">
<tr>
<td style="width: 400px;" align="right" valign="top">
<table width="100%">
<tr>
<td align="right">
<img src="img/bal.png" />
</td>
</tr>
</table>
</td>
<td style="width: 400px;" align="left" valign="top">
<table width="100%">
<tr>
<td align="left" valign="top">Akailash<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align: right;">myname</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 400px;" align="left" valign="top">
<table width="100%">
<tr>
<td align="left" valign="top">Akailash<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align: right;">myname</p>
</td>
</tr>
</table>
</td>
<td style="width: 400px;" align="right" valign="top">
<table width="100%">
<tr>
<td align="right" valign="top">
<img src="img/bal.png" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 400px;" align="right" valign="top">
<table width="100%">
<tr>
<td align="right" valign="top">
<img src="img/bal.png" />
</td>
</tr>
</table>
</td>
<td style="width: 400px;" align="left" valign="top">
<table width="100%">
<tr>
<td align="left" valign="top">Akailash<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<p style="text-align: right;">myname</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
hey u dont need nested tables here is the code
<table width="800" border="0" align="center">
<tr>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
<td align="left"> your text <p align="right">your name</p></td>
</tr>
<tr>
<td align="left"> your text<p align="right">your name</p></td>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
</tr>
<tr>
<td align="right" valign="top"><img src="image path" width="200"> your image here </td>
<td align="left"> your text <p align="right">your name</p></td>
</tr>
</table>
Related
I'm creating a new layout for my site and I'm starting with tables. Currently I've got a fairly simple code for my tables and you can see it here: (http://www.thelanternlight.com/misc/new01.html)
I'm trying to have NO scrollbars on the entire page but rather ONLY a vertical scrollbar in ONLY the teal cell you see on that page (the one with lowright written in it). That is where my content will be.
The main issue I'm facing is that I don't want to provide dimensions for my table or its cells because I want to use 100% for width and height so that it covers the entire page no matter what browser settings the user has. If at all possible I just want to add an overflow scrollbar to that teal TD cell alone.
I'll also provide the code I have currently:
<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal">
<div style="overflow-y:scroll; overflow-y:auto; width:100%">lowright
<p>
</div>
</td>
</tr>
</table>
Give that cell a height or it will keep growing as content is added never triggering the scroll:
<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal"><div style="overflow-y:auto;
height: 100px; width:100%">lowright
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan eleifend enim, nec vestibulum risus dignissim sit amet. In hac habitasse platea dictumst. Maecenas at enim eu magna laoreet rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac pellentesque enim, at pulvinar orci. Phasellus quis vestibulum nunc. Etiam mattis nulla orci. Donec elementum odio lacus, quis tempus ante eleifend sit amet. Nam congue ut dui vitae eleifend.
Nulla convallis consectetur diam vitae pulvinar. Nam varius hendrerit rutrum. Quisque finibus mattis turpis at dignissim. Praesent hendrerit libero lacinia nibh sodales pretium. Etiam in massa lacinia, posuere lectus non, efficitur nisl. Donec ut turpis vel lectus consequat ornare non molestie nulla. Sed at ante id diam laoreet facilisis vitae et nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc pulvinar, enim vitae hendrerit tincidunt, nibh libero egestas velit, mattis volutpat ante purus et nisi. Mauris feugiat, massa aliquet venenatis semper, ante lectus tempor orci, at tristique leo metus id magna. Sed vestibulum blandit orci, non facilisis felis mollis vel. Donec auctor tincidunt hendrerit. Donec sodales mollis consectetur. Nulla eget tristique felis, eget scelerisque massa. Aliquam nisi mi, feugiat eu ligula quis, dictum varius turpis. Praesent sed leo a dolor egestas rutrum vitae nec diam.
</p>
</div>
</td>
</tr>
</table>
<table style="width:100%" height="100%" bgcolor="pink" cellspacing=0 cellpadding=0 class="alignment">
<tr>
<td align="left" bgcolor="red" colspan="2" height="150">topleft</td>
<td align="right" bgcolor="yellow">topright</td>
</tr>
<tr>
<td align="left" bgcolor="magenta" width="100">lowleft</td>
<td align="center" bgcolor="blueviolet" width="100">lowcenter</td>
<td align="center" bgcolor="teal">
<div style="overflow-y:scroll; width:100%">lowright
<p>
</div>
</td>
</tr>
</table>
<div style="overflow-y:scroll; width:100%">lowright
Body overflow-y: hidden;
I put the overflow-y: hidden in the body and overflow-y:scroll in the div
Try it
I am attempting to vertically align my text in the center of its row regardless of how long the text is in my bootstrap table.
I am attempting to handle this with vertical-align: middle; line-height:90px; At the moment adjusting the line-height seems to work and allow me get text in the center but if the text is two-lines then the line-gap between the two is too large.
How can I vertically align my text in the right column to fit vertically be in the middle of the page?
Here is my code snippet :
.table-bordered th, tbody td:nth-child(2) {
vertical-align: middle;
line-height: 90px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead class="text-14 tx-light">
<tr class="d-flex">
<th class="col-6 blue-background" scope="col">LEFT</th>
<th class="col-6 red-background" scope="col">RIGHT</th>
</tr>
</thead>
<tbody class="text-18 tx-dark">
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-link">Link to the described article here </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-link">Link to longer url that takes up two lines here test test test test </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>ib
<td class="col-6"> <a class="text-underlined-18 ul-link"> Link to article here</a></td>
</tr>
</tbody>
</table>
I am expecting my text to sit in the center of the row similar to this photo without the huge line gap if the text is two-lines:
Change the desired table data element to display: flex;, make the flex-direction: column; and justify-content: center;.
.table-bordered th, tbody td:nth-child(2) {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 90px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<thead class="text-14 tx-light">
<tr class="d-flex">
<th class="col-6 blue-background" scope="col">LEFT</th>
<th class="col-6 red-background" scope="col">RIGHT</th>
</tr>
</thead>
<tbody class="text-18 tx-dark">
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to the described article here </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld">Link to longer url that takes up two lines here test test test test </a></td>
</tr>
<tr class="d-flex">
<td class="col-6" scope="row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum placerat sapien, vel consectetur dolor congue id. Duis posuere nisl eget magna posuere malesuada. Nunc ac euismod nulla. Nunc efficitur tincidunt facilisis. Proin sed efficitur velit. Donec non sem sed lorem faucibus finibus. Cras tristique turpis vitae scelerisque fringilla.
</td>
<td class="col-6"> <a class="text-underlined-18 ul-ibisworld"> Link to article here</a></td>
</tr>
</tbody>
</table>
Is it possible to make button stick to bottom of a column in an responsive HTML email?
Currently I am using MJML and able to achieve it on desktop version. Something like this:
(This is what I want, so stop giving answer that result in something different desktop output then the following)
The problem is that in mobile view, the button is not sticking with the text.
Here is my MJML code
I am using MJML, but answer that needs raw HTML and CSS is also welcomed, as long as it works in all major email client.
UPDATE: MJML 3.3.3 is now available, so it works in the try it live
So this work with MJML 3.3.3(beta 3 for now), so it doesn't work in current mjml try it live :
<mjml>
<mj-head>
<mj-style inline="inline">
div[style*="height:400px"] {
height: inherit !important;
}
</mj-style>
<mj-style>
#media only screen and (min-width:480px) {
.equal-text {
height: 400px !important;
}
.equal-text td {
vertical-align: top;
}
}
</mj-style>
</mj-head>
<mj-body>
<mj-container>
<mj-section>
<mj-column>
<mj-text css-class="equal-text" height="400px" font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .</mj-text>
<mj-button>Testing testing testing</mj-button>
</mj-column>
<mj-column>
<mj-text css-class="equal-text" height="400px" font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, in iaculis nibh. Suspendisse id odio urna. Cras nisi ipsum, mattis in dui id, pretium tincidunt purus. Mauris mi diam, molestie ac facilisis sed, scelerisque sit amet enim. .</mj-text>
<mj-button>Testing testing testing</mj-button>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Some insights : you have to set a height for mj-text to keep both column with same height. It's only a trick to achieve this because both div are independent and there's no way to achieve this in email with current MJML markup. Problem is, it will have a "gap" between text & button on mobile when column has less that 400px of text.
So... we're tweaking the output HTML a bit with a media query ( since almost every desktop client support them anyway ) :
setting height to initial to have a mobile version without any height
add a media query to add the heigh back.
Why keeping the height="400px" on the mj-text ? MJML generate some outlook conditionnals table when an height is set on mj-text : so we're keeping outlook compatibility with this :)
Side note: on your intial markup you have mj-text in a section, you have to put a column even if you have only one in a section.
Here's a small litmus link for compatibility https://litmus.com/checklist/emails/public/8b29552
<style>
#media screen and (max-width: 480px) {
.stack-column {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
}
</style>
<body>
<table>
<tr>
<td colpsan="2" style="font-size:20px; color:#F45E43; font-family: helvetica;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" aria-hidden="true" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 10px 0;">
<!--[if mso]>
<table role="presentation" aria-hidden="true" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="font-size:20px; color:#F45E43; font-family: helvetica;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
</td>
</tr>
<tr>
<td>
<mj-button>Testing testing testing</mj-button>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; width:100%; min-width:200px; max-width:330px; vertical-align:top;" class="stack-column">
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="font-size:20px; color:#F45E43; font-family: helvetica;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
</td>
</tr>
<tr>
<td>
<mj-button>Testing testing testing</mj-button>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td colpsan="2" style="font-size:20px; color:#F45E43; font-family: helvetica;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
</td>
</tr>
</table>
</body>
I'd suggest you to use <mj-table>. This way, you can add your button right below your text and it will keep this layout in mobile.
Snippet :
<mjml>
<mj-body>
<mj-container>
<mj-section>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .</mj-text>
</mj-section>
<mj-section>
<mj-column>
<mj-table>
<tr>
<td style="font-size:20px; color:#F45E43; font-family:'helvetica'; vertical-align: top;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .
</td>
<td style="font-size:20px; color:#F45E43; font-family:'helvetica'; vertical-align: top;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, in iaculis nibh. Suspendisse
id odio urna. Cras nisi ipsum, mattis in dui id, pretium tincidunt purus. Mauris mi diam, molestie ac facilisis sed, scelerisque sit amet enim. .
</td>
</tr>
<tr>
<td>
<button>Testing testing testing</button>
</td>
<td>
<button>Testing testing testing</button>
</td>
</tr>
</mj-table>
</mj-column>
</mj-section>
<mj-section>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tellus ac magna pellentesque vehicula. Vestibulum placerat elit non risus dapibus auctor. Pellentesque pretium ultrices iaculis. Donec ac iaculis massa, .</mj-text>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Add styling as you whish !
You need put buttons inside columns, but they don't will be on the same level
https://yadi.sk/d/JfegGMD13JSFuA
so I am trying to get basically just name, date, number down the bottom in its own row of the table although it works on two of the pages I cannot get it working on the homepage even if I copy/paste from the working ones. Was wondering if anyone out there could take a look and let me know whats wrong (knowing my luck its probably something small)
Here is the one not working;
<html>
<head>
<title>Home Page</title>
</head>
<body>
<table border = "1">
<tr valign = "top">
<th colspan = "4"><img src="C:\Users\Liam\Desktop\ICAWEB301A_AssessFiles\Images\Banner.PNG" width="1200" height="200"></th>
</tr>
<tr>
<th>Home</th>
<td rowspan = "3"><img src="C:\Users\Liam\Desktop\ICAWEB301A_AssessFiles\Images\MainPic.PNG" height = "250"></td>
<td rowspan = "3" width = "500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In id mi vitae velit tempus ultrices. Proin varius, nibh
dictum facilisis gravida, lacus nunc scelerisque nulla,
eget mollis nunc risus eu odio. Donec quis dolor interdum
odio molestie viverra. Duis dui ante, molestie in rhoncus
eget, tempor ac diam. Donec erat dui, imperdiet ac varius
eget, accumsan vel mi. Aliquam erat volutpat. Donec
condimentum congue tempus.<p>
Fusce aliquet vehicula euismod. Cras eleifend euismod nisl
eu congue. Donec placerat, felis ut feugiat tempor, arcu
lacus sollicitudin urna, vel ultricies mi dolor sit amet
quam. Ut sed justo nulla, id porttitor purus. Maecenas dolor
libero, laoreet pharetra tincidunt vitae, congue ornare erat.
Cras vitae interdum quam. Donec accumsan lectus mattis
neque adipiscing fringilla. Sed aliquam mi non metus
elementum ac elementum lectus pellentesque. Nullam risus
diam, gravida ac ullamcorper vel, placerat vitae lorem.
Cras in libero sit amet metus rhoncus semper iaculis nec
dui. Integer adipiscing auctor lectus vel hendrerit. </td>
<td rowspan = "3"><img src="C:\Users\Liam\Desktop\ICAWEB301A_AssessFiles\Images\latestNews.PNG"></td>
</tr>
<tr>
<th>Services</th>
</tr>
<tr>
<th width = "200">Contact</th>
</tr>
<tr valign = "bottom">
<td colspan = "4">Name: - ....... Number: - ....... Date: Janurary 27, 2015</td>
</tr>
</table>
</body>
</html>
and here is the working one;
<html>
<head>
<title>Services</title>
</head>
<body>
<table border = "1">
<tr valign = "top">
<th colspan = "4"><img src="C:\Users\Liam\Desktop\ICAWEB301A_AssessFiles\Images\Banner.PNG" width="1200" height="200"></th>
</tr>
<tr>
<th>Home</th>
<td rowspan = "3" width = "100"></td>
<td rowspan = "3" width = "700"><strong>SERVICES</strong><br>
<ul>
<li>class aptent taciti sociosqu ad litora</li>
<li>torquent per conubia nostra, per inceptos</li>
<li>himenaeos. Lorem ipsum dolor sit amet</li>
<li>consectetur adipiscing elit. In aliquam</li>
<li>dui quis auctor pharetra, odio risus </li>
<li>sodales mauris, non scelerisque ligula </li>
<li>justo eu ligula. Mauris metus neque</li>
<li>dictum cursus fermentum sit amet</li>
<li>lobortis nec sem. Fusce ante mauris</li>
<li>consequat id feugiat nec, venenatis </li>
<li>Quisque posuere accumsan orci, a faucibus</li>
</ul> </td>
<td rowspan = "3" colspan = "2"></td>
</tr>
<tr>
<th>Services</th>
</tr>
<tr>
<th width = "150">Contact</th>
</tr>
<tr valign = "bottom">
<th colspan = "4">Name: - ....... Number: - ....... Date: Janurary 27, 2015</th>
</tr>
</table>
</body>
</html>
Thanks a lot for the help :/ I just can't seem to understand why two work but the other one does not.
<center>
<tr valign = "bottom">
<th colspan = "4">Name: - ....... Number: - ....... Date: Janurary 27, 2015</th>
</tr>
It worked when I used th. Try putting this...
<tr valign = "bottom">
<th colspan = "4">Name: - ....... Number: - ....... Date: Janurary 27, 2015</th>
</tr>
Put this code as replacement to your footer code that is not working.
You used TD tag instead of TH.
I have a basic html email template as
<table width="100%">
<tr>
<td>
<table width="780" border="1" height="600" bgcolor="olive" align="center">
<tr>
<td valign="top">
<table border="1" width="780" bgcolor="white" style="text-align: center; min-height:20px; height: auto;">
<tr>
<td>
<p style="font-color:#ffffff;">Banner heading goes here
<br />
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
How do I make the Banner heading area as editable in the email? I am using magnet mail. -
With a HTML email you cannot do this.