Is it possible to vertically align table 3 at the bottom in the following example?
This is for a mail signature, hence the use of tables and the hack with align to make the tables responsive (they'll stack underneath each other if viewport gets too small). Now, the client wants the logo in table 3 to be aligned at the bottom (see example image) and I'm beginning to wonder if this is even possible while keeping it mobile friendly.
I've tried vertical-alignment: bottom pretty much everywhere and margin-top: auto; margin-bottom: 0; on table 3 to no avail. I'm guessing the align="left" overrides pretty much ever vertical alignment styling I'm trying to make.
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;">
<tr>
<td>
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
You could use a vertical-align and give the cell a height using CSS.
#media (min-width: 1000px) {
.logoHolder td {
height: 50px;
vertical-align: bottom;
}}
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #000 solid; max-width: 903px; width: 100%">
<tr>
<td>
<!-- "responsive" tables -->
<!-- table 1 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #ff0000 solid; width: 300px;">
<tr>
<td>
Company logo
</td>
</tr>
</table>
<!-- table 2 -->
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #00ff00 solid; width: 300px;">
<tr>
<td>
Contact details<br>
<br>
<br>
</td>
</tr>
</table>
<!-- table 3 -->
<table class="logoHolder" align="left" border="0" cellpadding="0" cellspacing="0" style="border: 1px #0000ff solid; width: 300px;vertical-align: bottom;">
<tr>
<td style="vertical-align: bottom;">
Another logo
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I really hate email html. So I have created a new confirmation email for our business and I need the white blocks in the picture below to be the same width. On desktop they look completely fine and match.
Without pasting the full template, this is how the code is structured with the css I am using:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And the picture of the issue on mobile:
I am pretty sure that because 600px isn't available on a device that size that it's seeing how with the content is, but I can't use media queries, so not really sure where to turn.
the layout displaying as per your content width in TD. the above HTML code you have give "first heading" and "second heading " as content so characters of second heading are more than first heading so width will not match.
solution is:
<table width="800" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="background-color: #F7F7F7;" bgcolor="#F7F7F7">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>First heading</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="min-width: 600px; max-width: 600px; background-color: #ffffff; margin: 0 auto; border: #D0D0D0 1px solid; padding: 40px 35px; margin-bottom: 15px;">
<tr>
<td>
<p>Second heading</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
For some reason I can not get the td with 100% inside the table and align the text as center.
How can I make the <td class="order-details"> full width, so it full the 600px of the table obove?
JSFIDDLE: https://jsfiddle.net/61s1cdyo/1/
CODE:
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
<tr class="details">
<td align="center">
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px; display: block;">
<tr align="center" class="header">
<td class="order-details">
<h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
Assuming you want to keep the max-width: 600px, you need to remove the display: block from the inner table to make it act like a table.
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff">
<tr class="details">
<td align="center">
<table class="table-bestelling-content" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff; max-width: 600px;">
<tr align="center" class="header">
<td class="order-details">
<h1 style="text-align: left; display: table-cell; padding: 10px 0px;">ORDER DETAILS</h1>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here's a Fiddle
There is a max-width: 600px inline setting for the nested table. If you erase that, it's 100% wide:
https://jsfiddle.net/b594a5d5/1/
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here. I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html>
<head>
<style>
td > span {
font-family: trebuchet ms,verdana,arial,helvetica,sans-serif;
font-size: 12px;
}
td > img {
/* border-width: 0px; */
border-radius: 15px 0 0 50px;
}
body > table {
border-collapse: separate;
border-radius: 15px 50px;
border: 3px solid #000;
}
</style>
</head>
<body>
<table width="723" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span>
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders. The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
I have been trying to update our email from using a bunch of images to just code but I'm hitting an issue with using tables. I can't seem to get the 's to be as narrow as I need them to be. All I want is to have them be fairly close to each other and aligned left. I've never worked with tables before, but I read up on them and everything seems to be correct but nothings working. Any suggestions on what I need to edit? PS This will be seen a lot on Outlook so that is a big factor.
http://codepen.io/Mdadedesign/pen/qavwkg
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<tr style='mso-yfti-irow:4;mso-yfti-lastrow:yes; background-color:pink; width:300px'>
<td width="90" style="background-color:lightblue;">
<table width="90" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Android App
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td width="70" style="background-color:cornsilk;">
<table width="70" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#075aa0" width="70" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Apple App
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td width="70" style="background-color:lightblue;">
<table width="70" style="float:left;">
<tr>
<td>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="left" bgcolor="#075aa0" width="90" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 5px;width: 90px;display: block;text-decoration: none;text-align: center;font-weight: bold;font-size: 11.5px;font-family: sans-serif;color: #ffffff;border: 1px solid red;line-height:15px;">
<a href="http://premierdisability.com/" style="text-decoration:none;color:#fff;">
Refer A Friend
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
You're talking about the three buttons at the bottom, the "Android App", "Apple App" and "Refer a friend", right?
If you look at the styles you have, you have both a width set on the table, and a width in px set in the style for each button. Not that much to be done with the total width, really, but you can change the first one from 90px to 70px, the second one from 90px to 60px, and the last one from 90px to 80px. If you want to make them smaller than that, you'll have to put them under eachother, or reduce the size of the text and the clickable area.
How can I move the rows titled "border one" and "border two" to the top and bottom of the cell they reside in? If I try padding top/bottom, it messes up the structure upon zooming in/out.
Here's a fiddle: http://jsfiddle.net/0uzjyxa5/
<table align="center" border="1" cellpadding="0" cellspacing="0" width="680" height="942" style="border-top: 1px solid white;">
<td style="width: 288px; height:auto;">
</td>
<td>
<table border="1" width="100%">
<tr><td>border top</td></tr>
</table>
<table border="1" width="100%">
<tr><td>venue info</td></tr>
</table>
<table border="1" width="100%">
<tr><td>border bottom</td></tr>
</table>
<td style="width:17px;"></td>
</td>
</table>
You can align your table data using
table td {
vertical-align: bottom;
}
or
table td {
vertical-align: top;
}