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>
Related
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>
I trying to query my html table but somehow it did not show correctly.
First row is correct.
Second row start from No.1,16/Sept/2020,36.5,Q1- Y,Q2- Y,Q3- YQ4- Y did not follow up the First row.
Please see my jsFiddle for better understanding.
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<td rowspan=4>S/No.</td>
<td rowspan=6>Date</td>
<td rowspan=3>Temperature</td>
<td colspan=4>Please answer the above 4 questions</td>
<td rowspan=8>Submit</td>
</tr>
<tr>
<td >Q1</td>
<td >Q2</td>
<td >Q3</td>
<td >Q4</td>
</tr>
<tr>
<td colspan=4>Y - Yes , N- No</td>
</tr>
<tr>
<td>No 1</td>
<td>16/Sept/2020</td>
<td>36.5</td>
<td>Q1- Y</td>
<td>Q2- Y</td>
<td>Q3- Y</td>
<td>Q4- Y</td>
</tr>
</table>
Hope this is what you are looking for.
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan=3>S/No.</td>
<td rowspan=3>Date</td>
<td rowspan=3>Temperature</td>
<td colspan=4>Please answer the above 4 questions</td>
<td rowspan=4>Submit</td>
</tr>
<tr>
<td >Q1</td>
<td >Q2</td>
<td >Q3</td>
<td >Q4</td>
</tr>
<tr>
<td colspan=4>Y - Yes , N- No</td>
</tr>
<tr>
<td>No 1</td>
<td>16/Sept/2020</td>
<td>36.5</td>
<td>Q1- Y</td>
<td>Q2- Y</td>
<td>Q3- Y</td>
<td>Q4- Y</td>
</tr>
</table>
I want to create a table as given. I have written the code for the first two columns but the output is incorrect. Need help figuring out my mistakes.
Ignore the little imperfections of the image of the table given in the question. They are not part of the output I desire.
Question-
My attempt for first two columns-
<table border="1" width="50%" height="50%">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="1"></td>
</tr>
<tr>
<td rowspan="0" colspan="0"></td>
<td rowspan="3"></td>
<td rowspan="1"></td>
</tr>
</table>
Output-
What am I missing here?
I believe that this is what you're after:
table, td {
border: 1px solid #999;
}
table {
width: 100%;
}
td {
height: 50px;
}
<table>
<tr>
<td rowspan="4"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
The following HTML code displays the value of Heading9 and Heading10 in a separate row instead of displaying right after Heading8 (see ActualOutput image)
Code 1:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
</TABLE>
</html>
Actual Output:
I can get the desired output by changing the code 1 to code 2, however, my bash script gathers Heading9 and Heading10 data only after Heading8 is framed for each body, so I cannot inject Heading9 and 10 in between.
Appreciate if experts can provide a better solution to get the expected output by restructuring the code 1. Unfortunately, code 2 doesn't work in my scenario.
Code 2:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
</tbody>
</TABLE>
</html>
Expected Output:
Add Following may this help...
<style>
table
{
border: 1px solid #000000;
border-collapse: collapse;
display:table;
position:relative;
width:100%;
}
table tr
{
display: table-row;
height: 35px;
line-height: 30px;
width: 100%;
}
table td
{
direction: ltr;
display: table-cell;
margin: 0;
padding: 5px;
table-layout: fixed;
}
</style>
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>