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>
Related
Below is my html code in which I am trying to create a quotation form. I have added rate and below it I want to add the rates of each services.
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>
Browser Result
I want to set it to the right in line with Below are the services that you will be provided:
Any help would be highly appreciated
I found two issues:
two tags were missing: <a> and </table>
there was a colspan and a float that were unnecessary
So your example is working as expected:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
If you want "Rate" to be aligned right with a big gap between the two cells, you just need to give the nested table a width: 100%;:
#nested_table {
width: 100%;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
<table id="nested_table" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</section>
I don't know why you are nesting the tables since you get exactly the same result without nesting and a little css for the table row:
#secondTable tr {
display: flex;
align-items: center;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>
...and width right alignment:
#secondTable tr {
display: flex;
align-items: center;
}
#secondTable td {
width: 50%;
}
#secondTable td p {
text-align: right;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
<a></a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table id="secondTable" border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<h5>Thank you for showing your interest</h5>
</td>
<td></td>
</tr>
<tr>
<td>
<h5>Below are the services that you will be provided:</h5>
</td>
<td>
<p>Rate</p>
</td>
</tr>
</tbody>
</table>
</div>
</section>
Since you are using "h5" tag inside a "td" ;it create a margin , so you have to remove it:
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr >
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5 style="margin-block-start:0; margin-block-end:0;">
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
<p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>
Don't like tables approach, but starting from your snippet a possible solution is alter "Rate" td:
<td style="vertical-align:bottom;height:90px;">
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td style="vertical-align:bottom;height: 90px;">
<p>
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>
You may be able to utilize display: flex or display: grid to achieve this. I don't have a snippet that you can copy/paste, but these links above have a few.
maybe this can help,
you want result like this ?
table {
flex-wrap: nowrap;
}
table h5 {
display: inline-block;
}
table table {
display: inline-block;
vertical-align: middle;
}
<section class="content">
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td>
<p align="center">
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" width="550">
<tbody>
<tr>
<td valign="top">
<h5>
Thank you for showing your interest
</h5>
<table border="0" cellspacing="0" cellpadding="0" valign="center">
<tbody>
<tr>
<td colspan="2">
<h5>
Below are the services that you will be provided:
</h5>
</td>
<td>
<p style="float:right">
Rate
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</div>
</section>
I am creating a table inside another table. I have divided the columns to be the exact same ratio as the outer table. However, the columns are not aligned with outer table columns. Can anyone tell me what I am missing?
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%"test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
When I inspect the table with chromes web kit. I see that the tables with 3% then they are supposed to be, because of the text length. U can fix this by adding table-layout: fixed to both your <table> elements.
If U want to use a table header I suggest using <th> (see here)
<html>
<div style="overflow:scroll;height:140px;width:100%;overflow:auto" style="background-color:black">
<table width="100%" style="padding:0; margin:0;" cellpadding="0">
<tr class="tbl_header" cellpadding="0">
<td width="3%">test1</td>
<td width="7%">test2</td>
<td width="3%">test3</td>
<td width="12%">test4</td>
<td width="7%">test5</td>
<td width="10%">test6</td>
<td width="7%">test7</td>
</tr>
<tr style="background-color:yellow">
<td colspan="7" style="background-color:yellow">
<div style="overflow:scroll;height:110px;width:100%;overflow:auto;border:none;background-color:green">
<table width="100%" style="border:none;background-color:red" cellpadding="0">
<tr class="even">
<td width="3%">2</td>
<td width="7%" class="tdAlign">Testing </td>
<td width="3%" class="tdAlign">Testing </td>
<td width="12%" class="tdAlign">Testing Testing Testing</td>
<td width="7%">Testing_1</td>
<td width="10%">Testing_2</td>
<td width="7%">Testing_3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</html>
Looks like you missed a closing tag for a <TD>(<td width="10%">test6</td>). Hope this helps. Let me know
I'm trying to get the image to align to the right and the rows with text on the left in my table using colspan. This method usually works when the image is on the left but now I want it on the right it wont work. Please keep in mind this is for outlook email so you cannot use floats, align="right" etc.
heres my code:
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="580" style="border: 1px solid;">
<tr>
<td style="font-size: 10px;">sdfsdfsdfsdfdsdfhhhhhhhhlklkjlkj</td>
<td></td>
</tr>
<tr>
<td>sdfsdf</td>
</tr>
<tr>
<td rowspan="3" ><img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400"></td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/yk3fanoq/1/
You need to put the text and image in two columns (td)
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<tr>
<td align="left">
sdfsdfsdfsdfdsdfhhhhhhhhlklk
sdfsdf
</td>
<td rowspan="3" align="right">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400">
</td>
</tr>
</td>
</tr>
</table>
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
I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?
You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.