Creating tables in html - html

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>

Related

CSS table background not working properly in Outlook

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>

HTML Table Query not Sequence

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>

Making a wide table, collapse into rows on mobile

We have some product data that has varying table data. Sometimes there is 2 column, then perhaps 4. When there is 4 columns, it causes problems on mobile and doesn't fit with our responsive layout.
Can anyone help get the table to work better on mobile.
Here is the original table: https://jsfiddle.net/Lnjsv48g/
A guide I am using: https://css-tricks.com/examples/ResponsiveTables/responsive.php
Here is my responsive attempt: https://jsfiddle.net/f1z6czeo/
<table align="center" border="2" style="height:445px; width:761px">
<caption>Technical Information</caption>
<tbody>
<tr>
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr>
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr>
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr>
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr>
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Warranty (Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<table border="0" style="height:82px; width:273px">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0">
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

Here is an solution: look at snippet
#media only screen and (max-width: 760px){
table {
width: 100%;
border-collapse: collapse;
border: none;
}
table, thead, tbody, th {
display: block;
}
tbody, td, tr {
display: inline-block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr.techinfo {
border: 1px solid #aaa;
width: 100%;
background: #eee;
box-sizing: border-box;
}
.techinfo > td {
float: right;
width: 60%;
display: inline-block;
background: #eee;
padding-left: 3px;
border: none;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.techinfo > td:first-child {
width: 39%;
float: left;
line-height: 4em;
}
.techinfo > td:nth-child(2){
background: #bbb;
}
.techinfo > td:nth-child(3){
background: #ccc;
}
.techinfo > td:nth-child(4){
background: #ddd;
}
.docs {
width: 100%;
border: none;
}
.docs > td {
width: 100%;
box-sizing: border-box;
background-color: #eee;
}
.docs > td > table {
box-sizing: border-box;
padding: 0 3px;
}
.docs > td tr {
border: none;
box-sizing: border-box;
}
}
<table align="center" border="2">
<caption>Technical Information</caption>
<tbody>
<tr class="techinfo">
<td>Washer Speeds</td>
<td>Speed 1</td>
<td>Speed 2</td>
<td>Speed 3</td>
</tr>
<tr class="techinfo">
<td>Revs per minute squared</td>
<td>480m³/hr</td>
<td>600m³/hr</td>
<td>950³/hr</td>
</tr>
<tr class="techinfo">
<td>Extraction Rate ³/hr Recirculated</td>
<td>322m³/hr</td>
<td>402m³/hr</td>
<td>636m³/hr</td>
</tr>
<tr class="techinfo">
<td>Noise Levels DB/A</td>
<td>54 DB</td>
<td>57 DB</td>
<td>63 DB</td>
</tr>
<tr class="techinfo">
<td>Minimum Height of Product</td>
<td>No Less Than 650mm From Your Base</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>DPP Rating</td>
<td>D</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Backup Filter (Optional Extra)</td>
<td>Round 5 (2 Filters required)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Light Options</td>
<td>2x 1.2w LED Bulk BBT299</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Marble Size (Marble Kit optional Extra)</td>
<td>125mm Minimum(150mm is recommended)(Up to 4 Mtr Only)</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Remote Control</td>
<td>No</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Warranty(Subject to registration)</td>
<td>3 years</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BPP Scheme Colour Code</td>
<td>N/A</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>BOR Rand Filters (Cleaner Safe)</td>
<td>Y</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Box Type</td>
<td>3 Amp</td>
<td> </td>
<td> </td>
</tr>
<tr class="techinfo">
<td>Gang Type</td>
<td>Toggle Control</td>
<td> </td>
<td> </td>
</tr>
<tr class="docs">
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Installation Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td><img alt="pdf icon" src="https://s18.postimg.org/wlzpg6c21/PDF_Logo_2.png" style="float:left; height:75px; margin-right:20px; width:75px"></td>
<td>Product Specification Guide<br>
PDF File - Opens in a New Window</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

i would suggest using text-align:center instead of padding:50% as this doesn't align very well.
That said, it does appear that your table re-renders at the appropriate size. What is it you are wanting it to do specifically? Could you mock-up an 'after' image?
Lastly, this may not be helpful for you if this is just a learning exercise, but a jQuery plugin exists to do exactly this: tablesaw

Merging cells in a table doesn't work as expected

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>

Space on html table

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>