I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious.
I'm stuck right now on a seemingly unsolvable problem.
Here is the problem : I have a table with 3 columns (column 1 is a table, column 2 a spacer colum, column 3 is a table).
When I go mobile, I want the third column to go under the column 1. But no matter what I try I cant do it.
Please note that the display parameter CANT be used. That's very important. Google mail doesnt know what display means (...)
The only thing that seem ok to use are : float and align.
Here is my jsfiddle
https://jsfiddle.net/cnw0o3wy/
the follow us and contact us cells are in the same table; that table must go under the first table. I fail to achieve that effect for now
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<img src="images/appstore.png" title="Apple Store" />
</td>
<td>
<img src="images/googleplay.png" title="Google Play" />
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<img class="social" src="images/fb.png" alt="Facebook" />
<img class="social" src="images/twitter.png" alt="Twitter" />
<img class="social" src="images/mail.png" alt="Mail" />
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier#mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
solved my problem with the following lines :
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
basically float left on all three columns
Related
I am trying to figure out how to have a row of a table with two td tags stay on top of another row with only one td tag and align perfectly. I've tried colspan="2" on the bottom row but that doesn't work.
Here is what I have so far:
<table cellpadding="0" cellspacing="0" border="0" width="800"><!--wrapper-->
<table border="1">
<tr>
<td style="width: 50px"><img src="images/img1.jpg" />
</td>
<td><img src="images/img2.jpg" />
</td>
</tr>
<tr colspan="2">
<td><img src="images/img3.jpg" />
</td>
</tr>
</table>
</table>
Change
<tr colspan="2">
<td><img src="images/img3.jpg" />
</td>
to
<tr>
<td colspan="2"><img src="images/img3.jpg" />
</td>
The colspan should be on the td
colspan belongs on the <td> not the <tr>
<table cellpadding="0" cellspacing="0" border="0" width="800">
<!--wrapper-->
<table border="1">
<tr>
<td style="width: 50px">
<img src="images/img1.jpg" />
</td>
<td>
<img src="images/img2.jpg" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/img3.jpg" />
</td>
</tr>
</table>
</table>
jsFiddle example
<table width="980" border="0">
<tbody>
<tr>
<td width="25%">
<img width="300" style="overflow: hidden;" alt="" src="1.jpg">
</td>
<td width="75%">
<h1>ttt</h1>
<p>dgggg</p>
</td>
</tr>
<tr>
<td width="25%"><img alt="" src="98.jpg"></td>
<td width="25%"><img alt="" src="57_998.jpg"></td>
<td width="25%"><img alt="" src="7_998.jpg"></td>
<td width="25%"><img alt="" src="98.jpg"></td>
</tr>
</tbody>
</table>
Why is the second row td the same width with the first one(the first row td). the width="25%" doesn't work. how to correct it?
use colspan attribute to achieve this
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><h1>A</h1></td>
<td width="75%" colspan="3"><h1>B</h1></td>
</tr>
<tr>
<td width="25%">1</td>
<td width="25%">2</td>
<td width="25%">3</td>
<td width="25%">4</td>
</tr>
</tbody>
</table>
A good intro on the colspan attribute can be found here: http://reference.sitepoint.com/html/td/colspan
Here's a quick example similar to what you tried to achieve
http://jsbin.com/egahey/1/
by default in html, the column in a row takes the inherited width of the column in the preceding row ,
for achieving desired you have to use col span.
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><img width="300" src="1.jpg"></td>
<td width="75%" colspan="3"><h1>ttt</h1><p>dgggg</p></td>
</tr>
<tr>
<td width="25%"><img alt="" src="98.jpg"></td>
<td width="25%"><img alt="" src="57_998.jpg"></td>
<td width="25%"><img alt="" src="7_998.jpg"></td>
<td width="25%"><img alt="" src="98.jpg"></td>
</tr>
</tbody>
</table>
Imagine a table as an excel worksheet. All the rows in the same column must be the same width (of course, you can combine them just like excel too).
As for your question, you need to split the table into 2 tables to achieve different width:
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><img width="300" style="overflow: hidden;" alt="" src="1.jpg"></td>
<td width="75%"><h1>ttt</h1><p>dgggg</p></td>
</tr>
</tbody>
</table>
<table width="980" border="0">
<tbody>
<tr>
<td width="25%"><img alt="" src="98.jpg"></td>
<td width="25%"><img alt="" src="57_998.jpg"></td>
<td width="25%"><img alt="" src="7_998.jpg"></td>
<td width="25%"><img alt="" src="98.jpg"></td>
</tr>
</tbody>
</table>
I looked for a similar question but no solutions.
I have a webpage with a table and a Youtube movie at the middle: http://www.zofim.org.il/magazin_item.asp?item_id=531438084004
it looks good in Chrome, but in Internet explorer the movie is too low and not in the right place.
Here is the code:
<table background="http://www.zofim.org.il/pics/magazin/Page-1 (1).jpg" width="650" height="700" border="0" align="center" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
<table border="0" width="600">
<tbody>
<tr>
<td colspan="4"><span style="font-size: 8; "> </span>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><br />
</p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "><br />
<br />
<br type="_moz" />
</span></p>
<p> </p>
</td>
</tr>
<tr>
<td height="440" width="23%" rowspan="2">
<table border="0" width="100%" height="430">
<tbody>
<tr>
<td height="131"> </td>
</tr>
<tr>
<td height="63"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="76" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td height="142" width="12%">
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p> </p>
<p> </p>
</td>
<td height="142" width="35%">
<p style="margin-top: 10px; margin-bottom: 0px; text-align: center; "><iframe width="250" height="150" src="http://www.youtube.com/embed/wnBGKeXF8X0?rel=0&controls=0&autoplay=1" frameborder="0" allowfullscreen="" name="I1" scrolling="no" marginheight="2"></iframe></p>
</td>
<td height="142" width="31%">
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td height="285" colspan="3">
<table border="0" width="100%" height="292">
<tbody>
<tr>
<td width="135">
<table border="0" width="100%" height="280">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" width="104%" height="278">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="175" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td width="153">
<table border="0" width="100%" height="281">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="152" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
thanks!
Dor.
By the looks of the markup you provided you are using tables to layout your website. This is considered bad practice. You should consider changing to using best practices (divs etc) and using CSS to style your layout instead of using inline-styles. When you have done this you can use prefixr.com to create cross-browser friendly CSS.
I have a HTML table with each td having a rounded corner image i put the images together and manage to get table with rounded corners .
Here's how it looks,
Here's the HTML for the below along with the css
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
style="width: 100%;">
<tr>
<td width="1%">
<img alt="" src="Images/frame_top_left.jpg" />
</td>
<td class="top_frame">
</td>
<td width="1%" align="right">
<img alt="" src="Images/frame_top_right.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" src="Images/frame_bottom_left.jpg" />
</td>
<td class="bottom_frame">
</td>
<td align="right">
<img alt="" src="Images/frame_bottom_right.jpg" />
</td>
</tr>
</table>
And heres the css
Now data is placed dynamically in the td with the css class "bottom_frame" whenever there's data placed the whole table gets changed heres how it looks when data is placed
heres the image of the HTML data inserted.
How do i let my table be maintained with any loss to it ????
Thanks & Regards,
Francis P.
You'd better add one more row to your table to put a content in it. Something like this:
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
style="width: 100%;">
<tr>
<td width="1%">
<img alt="" src="Images/frame_top_left.jpg" />
</td>
<td class="top_frame">
</td>
<td width="1%" align="right">
<img alt="" src="Images/frame_top_right.jpg" />
</td>
</tr>
<tr>
<td colspan="3" class="middle_frame">
-- Put your content right here --
</td>
</tr>
<tr>
<td>
<img alt="" src="Images/frame_bottom_left.jpg" />
</td>
<td class="bottom_frame">
</td>
<td align="right">
<img alt="" src="Images/frame_bottom_right.jpg" />
</td>
</tr>
</table>
how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>