Why does the below html yield a table of 2x2 cells instead of 3 rows, 1st with 2 cells and the next 2 with one cell spanning 2?
<table cellpadding="5" width="200">
<tr>
<td><img id="Button1_logoImg" src="" style="height:75px;width:75px;" alt="sButton1_logoImg" /></td><td><img id="Button1_errorImg" src="" style="height:50px;width:50px;" alt="Button1_logoImg" /></td>
</tr>
<tr>
<td width="100%" rowspan="2"><input name="Button1$mainTextTb" type="text" value="changed" id="Button1_mainTextTb" style="font-size:20pt;width:180px;" /></td>
</tr>
<tr>
<td rowspan="2" width="100%"><span id="Button1_subTextLbl" style="font-size:12pt;">sub text</span></td>
</tr>
</table>
Replace your rowspan with colspan in row 2 and 3.
your code
<table cellpadding="5" width="200">
<tr>
<td><img id="Button1_logoImg" src="" style="height:75px;width:75px;" alt="sButton1_logoImg" /></td><td><img id="Button1_errorImg" src="" style="height:50px;width:50px;" alt="Button1_logoImg" /></td>
</tr>
<tr>
<td width="100%" rowspan="2"><input name="Button1$mainTextTb" type="text" value="changed" id="Button1_mainTextTb" style="font-size:20pt;width:180px;" /></td>
</tr>
<tr>
<td rowspan="2" width="100%"><span id="Button1_subTextLbl" style="font-size:12pt;">sub text</span></td>
</tr>
</table>
Replace rowspan with colspan
Edited code
<table cellpadding="5" width="200">
<tr>
<td><img id="Button1_logoImg" src="" style="height:75px;width:75px;" alt="sButton1_logoImg" /></td><td><img id="Button1_errorImg" src="" style="height:50px;width:50px;" alt="Button1_logoImg" /></td>
</tr>
<tr>
<td width="100%" colspan="2"><input name="Button1$mainTextTb" type="text" value="changed" id="Button1_mainTextTb" style="font-size:20pt;width:180px;" /></td>
</tr>
<tr>
<td colspan="2" width="100%"><span id="Button1_subTextLbl" style="font-size:12pt;">sub text</span></td>
</tr>
</table>
Related
I am creating a table that has 2 rows, that has different colors. There appears to be a gap between the rows and I want to close the gap, how can I do that?
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>
I need to use the css <style> because I'm sending this via Email (PHPMailer) and all the text will only be in HTML (+CSS using )
You can try table {border-spacing: 0; }
table {border-spacing: 0; }`
<table width="100%">
<tr>
<td bgcolor="grey">
<table width="50%" style="margin:auto;">
<tr>
<td bgcolor="white" align="center">
<img src="">Test
</td>
</tr>
<tr>
<td align="center" bgcolor="#99CB55">
<img width="50%" src="xxx">
</td>
</tr>
</table>
</td>
</tr>
</table>
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
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="33%" border="0" border-spacing: 0px; cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="01.png" width="619" height="143" " /></td>
</tr>
<tr>
<td height="13" valign="top"><img 02.png" width="75" height="13" /></td>
<td width="32%" valign="top"><img src="03.png" width="200" height="13" /></td>
<td width="56%" colspan="2" valign="top"><04.png" width="344" height="13" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><img 05.png" width="619" height="150" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="85%"><img src="06.png" width="474" height="28" /></td>
<td width="11%"><img src="07.png" width="71" height="28" /></td>
<td width="4%"><img src="08.png" width="74" height="28" /></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="09.png" width="619" height="144" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%" height="32"><img src="10.png" width="474" height="32"/></td>
<td width="12%"><img src="11.png" width="71" height="32"/></td>
<td width="12%"><img src="12.png" width="74" height="32"/></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="13.png" width="619" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="99%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%"><img src="14.png" width="474" height="36"/></td>
<td width="12%"><img src="15.png" width="71" height="36" /></td>
<td width="12%"><img src="16.png" width="74" height="36"/></td>
</tr>
</table></td>
</tr>
<tr>
<td height="109" colspan="4" rowspan="2" valign="top"><img 19.png" width="619" /></td>
</tr>
</table>
I have this code in my email template. When I compile it on my local page, it works fine, but when I send it though email, gaps are appearing in between the lines and tables. I tried this also
<style>
table { border-spacing: 0px; }
</style>
But not worked. Anybody know about this issue?
Or how I should print it in php? so that it sends as an image in email. Because after receiving an email, when I forward it, then its shows me correct because it become an image. So I am thinking to make it as an image before shooting email in the script. But how can I print this html in php?
<table ... border-spacing: 0px; ...>
This isn't valid markup. border-spacing would be put within a style property:
<table ... style="border-spacing: 0px;" ...>
To remove the spacing, you'd simply add:
table {
border-collapse: collapse;
}
try this
<table cellspacing="0" cellpadding="0">
</table>
<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>