I have a simple HTML table used in an email template:
<table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;">
<tbody>
<tr>
<td style="height:4px"></td>
</tr>
<tr>
<td style="width:1%"></td>
<td style="width:49%; text-align:left; vertical-align:top"><em>Some text in here</em></td>
<td style="width:49%; text-align:right; vertical-align:top"><strong>Another text in here</td>
<td style="width:1%"></td>
</tr>
<tr>
<td style="height:4px"></td>
</tr>
</tbody>
</table>
it displays correctly (like in the snippet preview) in every client that I have tested, except for (obviously) Outlook, where it looks like this:
What can I do to fix it?
You can try to add a colspan property on the single two tds and a non breaking space ( ) to give them a with like so:
<table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;">
<tbody>
<tr>
<td style="height:4px" colspan="4"> </td>
</tr>
<tr>
<td style="width:1%"></td>
<td style="width:49%; text-align:left; vertical-align:top"><em>Some text in here</em></td>
<td style="width:49%; text-align:right; vertical-align:top"><strong>Another text in here</td>
<td style="width:1%"></td>
</tr>
<tr>
<td style="height:4px" colspan="4"> </td>
</tr>
</tbody>
</table>
Just update below code,
<table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;">
<tbody>
<tr>
<td style="width:1%;height:4px;"></td>
<td style="width:49%;"></td>
<td style="width:49%;"></td>
<td style="width:1%"></td>
</tr>
<tr>
<td style="width:1%"></td>
<td style="width:49%; text-align:left; vertical-align:top"><em>Some text in here</em></td>
<td style="width:49%; text-align:right; vertical-align:top"><strong>Another text in here</strong></td>
<td style="width:1%"></td>
</tr>
<tr>
<td style="width:1%;height:4px;"></td>
<td style="width:49%;"></td>
<td style="width:49%;"></td>
<td style="width:1%"></td>
</tr>
</tbody>
</table>
Related
I have started to draw a table in HTML. I desired to draw
Observe that 2.2 starts at center of 1.1 and 3.1 starts at center of 2.2.
The code I wrote for this is
<table border="3" width="400" height="200">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
You can see the output. Can any one tell me why the output is not as i desired by suggesting the changes in the code. Thanks in advance.
After going through the comments I found that code is working fine in chrome. Problem is only in Firefox and Edge.
I think you will need to specify cell height in order to get this work.
table {
text-align:center;
border-collapse:collapse;
}
<table border="3" width="400" height="200">
<tr>
<td height="40" rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
Try this style
<style media="screen">
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
and your code for table,
<table width="400" height="200">
<tr>
<td rowspan="2">
<div class="center"> 1.1 </div>
</td>
<td>
<div class="center"> 1.2 </div>
</td>
</tr>
<tr>
<td rowspan="2">
<div class="center"> 2.2 </div>
</td>
</tr>
<tr>
<td>
<div class="center"> 3.1 </div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="center"> 4.1 </div>
</td>
</tr>
<table>
use border-collapse: collapse; to table style
try this code
table{
border-collapse: collapse;
}
td{
text-align:center;
}
<table border="3" width="500" height="300">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
your code is written fine for rowspans, check this if it helps
<table border="3" width="400" height="200">
<tr>
<td rowspan="3">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="3">2.2</td>
</tr>
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
I am working on a table and for some reason, when I added rowspan, the border is popping out a little bit on the right side.
Is there a way I can merge the border?
<div class="row">
<table cellpadding="5" cellspacing="3">
<tr class="top_box" style="background-color:#001F5B;">
<td>Loan<br />Amount</td>
<td>Term</td>
<td>Monthly<br />Payment</td>
<td>Rate</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$1,000</td>
<td class="blue_1">24 months</td>
<td class="blue_2"> <br/>$45.68<br/> </td>
<td class="blue_3">8.99% APR</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$5,000</td>
<td class="blue_1">36 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$158.98<br/>$124.40<br/>$103.77</td>
<td rowspan="3" border-collapse="collapse" class="blue_3">Includes 0.75% <br/>promotional <br/>rate discount<br/> and 0.25% <br/>rate discount<br/> for auto debit</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$15,000</td>
<td class="blue_1">6 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$476.93<br/>$373.20<br/>$311.30</td>
<td rowspan="3" border-collapse="collapse" class="blue_3"></td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$25,000</td>
<td class="blue_1">6 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$794.88.93<br/>$622.01<br/>$518.84</td>
<td rowspan="3" border-collapse="collapse" class="blue_3"></td>
</tr>
</table>
table td{
border:1px solid #001F5B;
}
table .big_box td{
padding-top:16px;
padding-bottom:16px;
color:#001F5B;
}
table .top_box td{
padding:10px;
color:#F6F9FD;
}
table span{
font-size:.5em;
position:relative;
top:-9px;
font-weight:bold;
}
.blue_1{background-color:#C7DDF3;}
.blue_2{background-color:#C7DDF3;}
.blue_3
{background-color:#C7DDF3;
font-size: 15px;
border-collapse:collapse;
}
this is the CSS
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
You need only vertical-align:middle and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Fiddle Demo
Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.
Demo
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
how do i make a table like this?
abc |la
sa |___
cdef|hi
basically the borders like that
If I understood correctly, you want one high cell next to two smaller ones. That can be achieved with the rowspan attribute like this:
<table>
<tr>
<td rowspan="2">abc sa cdef</td>
<td>la</td>
</tr>
<tr>
<td>hi</td>
</tr>
</table>
a quick fix would be the following:
html:
<table>
<tr>
<td class="left">abc</td>
<td class="right1">la</td>
</tr>
<tr>
<td class="left">sa</td>
<td class="right2">&nbps;</td>
</tr>
<tr>
<td class="left">cdef</td>
<td class="right1">hi</td>
</tr>
</table>
css:
td.left { border-right:1px solid black; }
td.right2 { border-bottom:1px solid black; }
<table>
<tr>
<td class="border-r"> abc </td>
<td> la </td>
</tr>
<tr>
<td class="border-r"> sa </td>
<td class="border-b"> </td>
</tr>
<tr>
<td class="border-r">cdef</td>
<td> hi </td>
</tr>
</table>
css
td.border-r
{
border-right:1px solid #000000;
}
td.border-b
{
border-bottom:1px solid #000000;
}
<table>
<tr>
<td class="border-r"> abc </td>
<td> la </td>
</tr>
<tr>
<td class="border-r"> sa </td>
<td class="border-b"> </td>
</tr>
<tr>
<td class="border-r">cdef</td>
<td> hi </td>