I am trying to change the position of the text to the TOP of the center. I am using table which i need to use in email template.
Here is my fiddle
https://jsfiddle.net/g2sbhf7k/
<td height="1"><p>hello</p><p>hello</p> </td>
this is showing in middle left, but i need to show in top center
Thanks
See if this helps
<td style="vertical-align: top; text-align: center;" height="1">
<p>hello</p>
<p>hello</p>
</td>
Using all the rest of your code, I just added a class
html:
<td height="1" class="topCenter"><p>hello</p><p>hello</p> </td>
css:
.topCenter{
text-align: center;
vertical-align: top;
}
Your answer is here .... though I've shorten some code:
https://jsfiddle.net/SAS3000/tx6zfgba/
table table {
width: 191px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
border: 1px solid #ddd;
}
td {
text-align:center;
vertical-align:top;
}
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;width:600px;background-color: #ffffff;">
<tr>
<td align="left">
<table height="180px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1">
<p>hello</p>
<p>hello</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
This can be done at table level without CSS as well.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top">centered text</td>
</tr>
</tbody>
</table>
Related
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>
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>
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.
Below is my code for 2x tables. There is PHP & results I have removed. But I cannot get these on one line but next to each other.
I have tried Align Left/Right and this puts them on 2x separate lines? I have tried float as well and this has not helped either.
Does anybody have advice for me?
HTML
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Received Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent To</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="table">
<tr align="center">
<td colspan="16" class="header"><center>Last 5 Sent Transactions</center></td>
</tr>
<tr align="center">
<td class="header"><center>Transaction ID</center></td>
<td class="header"><center>Sent By</center></td>
<td class="header"><center>Amount</center></td>
<td class="header"><center>Date</center></td>
</tr>
</table>
CSS :
table
{
border: #000000 1px solid;
background-color: #363636;
}
You could also add a class of left and right to each table and define floats in your css if you want the tables to always align left and right.
table.left {
float: left;
}
table.right {
float: right;
}
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="left">
YOUR LEFT TABLE content
</table>
<table width="40%" border="0" cellpadding="0" cellspacing="2" class="right">
YOUR RIGHT TABLE content
</table>
You don't need the 'table' class because you can use the table tag as a selector.
Try adding display:inline-block;
Update CSS
table
{
border: #000000 1px solid;
background-color: #363636;
display:inline-block;
}
WORKING:DEMO
Float doesn't work on display: table which is the default table display property.
You have to put display: block on it in order to float them
table {
border: 1px solid #000;
display: block;
float: left;
width: 40%;
}
table:first-child {
margin-right: 40px;
}
Working Fiddle
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.