I have designed a email template but I am facing alignment issue on iPhone 5 and yahoomail .The contents could not be aligned to center. I am using reply manager to send email template.
Heres my code :
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/brochure.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Handing out brochures is a very cost-effective way to advertise your brand.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End Image 1 -->
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/imggz2.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Wow clients by using an animated logo for your website or email.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 2 -->
</tbody>
</table>
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/invite.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Promoting events means attracting people. You need attractive designs!</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 3 -->
</tbody>
</table>
<!-- 3Column ends --><!--1 img starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="10" cellspacing="10" style="width:600px">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/moreinfo.jpg" style="width:60%" /></td>
</tr>
</tbody>
</table>
<!--1 img ends--><!--clients logo starts--><!--1 img ends--><!--clients logo starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_all.jpg" style="width:600px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_microsoft.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_gilette.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_oreck.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_whirlpool.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_bluething.jpg" style="height:37px; width:98px" /></td>
<td dir="rtl"><img src="http://websamplenow.com/129/ems1/images/fc_oprah.jpg" style="height:37px; width:126px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
The button 3 boxes are not aligned to center.
Can anyone help me to solve it out?
Related
Hi working to create a newsletter template. At the moment I am stuck as i am unable to change the alignment of the td
I have attached a CodePen, but below is the code! Firstly I don't understand why the elements on the right are aligned left-center? Eitherway I need them to be top-center. Any ideas?
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td>
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
Mind you this is for a newsletter template so think web 1998, most of the fancy web stuff is not usefull here!
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top; text-align:center">
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
You have put align="center" in the td tag.
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td align="center" >
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top;">
<table width="393px" align="center">
<tr>
<td align="center" >
name
</td>
</tr>
<tr>
<td align="center" >
country
</td>
</tr>
<tr>
<td align="center" >text</td>
</tr>
</table>
</td>
</tr>
</table>
I created an HTML page and I used table, but i have a problem in first TD on top and I get a empty space.
Demo.
My Table Style
<table width="100%">
<tbody>
<tr>
<td style="" width="25%">
<table cellspacing="0">
<tbody>
<tr>
<td>
<img src="/avatar/thumb/1479077526.png" style="width:200px; height:200px;">
</td>
</tr>
<tr>
<td><strong>und3rc00d3</strong>
</td>
</tr>
<tr>
<td>UserID: <strong>1</strong>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<br>
<div id="akt">
<div style="overflow-y:scroll; height:640px;">
<table>
<tbody>
<tr>
<th>Aktivitetet e fundit</th>
</tr>
<tr>
<td>............
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
For the first TD I tried to style with: position: absolute; but again it did not work http://prntscr.com/ddom11
Try adding style="vertical-align: top"; as in the code below
<table width="100%">
<tbody>
<tr>
<td style="vertical-align:top" width="25%">
<table cellspacing="0">
<tbody>
<tr>
<td><img src="/avatar/thumb/1479077526.png" style="width:200px; height:200px;"></td>
</tr>
<tr>
<td><strong>und3rc00d3</strong></td>
</tr>
<tr>
<td>UserID: <strong>1</strong></td>
</tr>
</tbody>
</table>
</td>
<td>
<br>
<div id="akt">
<div style="overflow-y:scroll; height:640px;">
<table>
<tbody>
<tr>
<th>Aktivitetet e fundit</th>
</tr>
<tr>
<td>............</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I am trying to create a table where the left column is pushed top to fit its contents. Note that the right column requires to be height=300.
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 3rd cell
</td>
</tr>
</table>
This is what I have come out so far: https://jsfiddle.net/5y33rtm3/1/
Desired outcome:
You can add rowspan="5" for the third row in the left:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" rowspan="5"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
or you can add height: 100% to it:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" style="height: 100%"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" style="height:100%" width="65%">
<img src="ant.jpg" style="height:40%;width:40%;" />
</td>
</tr>
</table>
Specifically, the main header is separate from the imagery and footer of the email, pushed too far left for some reason. However, it works perfectly on all other email clients (See SendinBlue campaign builder preview).
Here is the full code I'm using for the address bar at the top:
<table class="ecxw320" align="center" border="0"
cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr bgcolor="#000000">
<td height="50">
<table align="center" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a
moz-do-not-send="true"
href="http://partofthekult.com/"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">
</a></td>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/tees"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TEES
</a></td>
<td width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/tanks"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TANKS</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/accessories"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">ACCESSORIES
</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/sale"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">SALE</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Images of how it renders on my iPhone 6s:
First Image
Second Image
I have a problem with writing a proper code for my table. Using the table feature in Dreamweaver it does help but when it comes on styling a single column or a row with CSS I see that my code is not properly written. For example if I want to style the first column I have to add class to each tr element. So I need your advice on how my table could be written in a more tidier way.
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe3">title</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr class="qwe1">
<td>1</td>
</tr>
<tr class="qwe1">
<td>2</td>
</tr>
<tr class="qwe1">
<td>3</td>
</tr>
<tr class="qwe1">
<td>4</td>
</tr>
<tr class="qwe1">
<td>5</td>
</tr>
<tr class="qwe1">
<td>6</td>
</tr>
<tr class="qwe1">
<td>7</td>
</tr>
<tr class="qwe1">
<td>8</td>
</tr>
<tr class="qwe1">
<td>9</td>
</tr>
<tr class="qwe1">
<td>10</td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
You can see my code live here: http://codepen.io/mariomez/pen/XJqwYy
Ps: I don't want you to write the whole code or something just some tips on what things I should change in my code. :)
First of all, I'd say write just a single table instead of the tables per column you have right now. You can still keep the big title with red background using <td colspan="8">title</td> for that cell.
Once you have this single cleaned table you can use :first-child to select only the first tds inside a row, excepy maybe the main header. Then unleash your CSS magic.
I included a snippet doing just that here.
EDIT: Improved snippet here.
You don't need nested tables! Use colspan and rowspan to achieve desired output.
This is a great starting point to learn table element: complete guide table element.
This is a quick edit of your code: codepen.
Notice how I used colspan for the first row:
<td colspan="8" class="qwe3">title</td>