I'm trying to get an HTML table that looks like the following:
I currently am trying to use the following markup to get this (basically, I multiplied 4 and 6 together to get 24 and used common factors to try to get what I wanted):
<table>
<tbody>
<tr>
<td rowspan="24">1</td>
<td rowspan="4">2</td>
<td rowspan="6">3</td>
</tr>
<tr>
<td rowspan="4">4</td>
<td rowspan="6">5</td>
</tr>
<tr>
<td rowspan="4">6</td>
<td rowspan="6">7</td>
</tr>
<tr>
<td rowspan="4">8</td>
<td rowspan="6">9</td>
</tr>
<tr>
<td rowspan="4">10</td>
</tr>
<tr>
<td rowspan="4">11</td>
</tr>
</tbody>
</table>
However, the above markup doesn't accomplish what I want at all.
Is it possible to get a table like the one shown above using rowspan?
If not with rowspan, are there other ways to get the table above in HTML?
Thanks.
You can achieve the same using following html structure
<table border="1" cellspacing="0" cellpadding="20">
<tbody>
<tr>
<td rowspan="24">1</td>
<td rowspan="4">2</td>
<td rowspan="6">3</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">4</td>
</tr>
<tr></tr>
<tr>
<td rowspan="6">7</td>
</tr>
<tr></tr>
<tr>
<td rowspan="4">6</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">8</td>
<td rowspan="6">7</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="4">10</td>
</tr>
<tr></tr>
<tr>
<td rowspan="6">9</td>
</tr>
<tr></tr>
<tr>
<td rowspan="4">11</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
Try this out...
table {
border-collapse: collapse;
border-spacing: 0;
}
table td {
width:60px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
border-color: black;
}
table th {
width:60px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
border-color: black;
}
table th {
text-align: left
}
<table class="tg">
<tr>
<th rowspan="12">1</th>
<th rowspan="2">2</th>
<th rowspan="3">3</th>
</tr>
<tr> </tr>
<tr>
<td rowspan="2">4</td>
</tr>
<tr>
<td rowspan="3">5</td>
</tr>
<tr>
<td rowspan="2">6</td>
</tr>
<tr> </tr>
<tr>
<td rowspan="2">7</td>
<td rowspan="3">8</td>
</tr>
<tr> </tr>
<tr>
<td rowspan="2">9</td>
</tr>
<tr>
<td rowspan="3">10</td>
</tr>
<tr>
<td rowspan="2">11</td>
</tr>
</table>
Related
It is the expected result and working fine in chrome.
But It broke in safari
JS Fiddle: https://jsfiddle.net/evpb3zLa/
<tbody>
<tr>
<td rowspan="6">6</td>
<td rowspan="6">6</td>
<td rowspan="2">2</td>
<td rowspan="3">3</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
</tr>
<tr>
<td rowspan="2">2</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2" colspan="3">2</td>
</tr>
</tbody>
</table>
Didn't found any solution on safari rowspan problem, but ended up using nested tables. That works like a charm xD.
table, td, th {
border: 1px solid;
border-collapse: collapse;
padding: 5px;
}
<table>
<tbody>
<tr>
<td rowspan="6">6</td>
<td rowspan="6">6</td>
<td rowspan="2">
<table class="sub-table">
<tbody>
<tr>
<td>fixed-1</td>
</tr>
<tr>
<td>fixed-2</td>
</tr>
<tr>
<td>fixed-3</td>
</tr>
</tbody>
</table>
</td>
<tr></tr>
<tr></tr>
<tr>
<td rowspan="3">3</td>
</tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
I'm trying to create a HTML table like in this image;
I tried the following but it did not work.
<table border="1">
<tr>
<th rowspan="2" colspan="2">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>
You can try this:
table {
border-collapse: collapse;
}
td {
text-align: center;
border: 1px solid;
}
<table>
<col width=100><col width=100><col width=100>
<tr>
<td colspan="2" style="border-bottom: none;">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td colspan="2" style="border-top: none;"></td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>
hi your code is good just add with to see the difference
<table border="1">
<tr>
<th rowspan="2" colspan="2" style="width: 95px;">1,1</th>
<td>1,1</td>
</tr>
<tr>
<td>1,1</td>
</tr>
<tr>
<td style="width: 20px;">1,1</td>
<td colspan="2">1,1</td>
</tr>
</table>
This is how you could build the table in your picture by using rowspan and colspan:
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
text-align: center;
width: 33%;
}
<table>
<tr>
<td colspan="2" rowspan="2">1,1</td>
<td>1,3</td>
</tr>
<tr>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td colspan="2">3,2</td>
</tr>
</table>
I am working on a pay slip design which should be implemented using table structure. I tried a lot but I am still very confused about rowspan and colspan. I also attached the html code below and I need to achieve the entire design in the attached png
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th colspan="2"> Employee Details</th>
<th colspan="2">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
<!--<th>ABC</th>-->
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="2">Item1</td>
<td colspan="4">Item1</td>
</tr>
<tr>
<td>Name1</td>
<td>Price1</td>
</tr>
<tr>
<td>Name2</td>
<td>Price2</td>
</tr>
<tr>
<td>Name3</td>
<td>Price3</td>
</tr>
<tr>
<td>Item2</td>
<td>Item2</td>
<td colspan="2">Item2</td>
<td>Item2</td>
</tr>
</tbody>
</table>
table {
font: 12px 'Arial';
margin: 10px auto;
background: #fff;
text-align: left;
border: 1px solid #000;
border-collapse: collapse;
}
table * { border: 1px solid #000; padding: 5px; white-space: nowrap; }
caption {
background: #fff;
text-transform: uppercase;
text-align: left;
font-weight: bold;
}
tr { background: #fafafb; }
th { color: #fff; background: #0080bf; }
.field { font-weight: bold; }
<table id="woSpTable" align="center" class="table table-bordered table-responsive table-striped fontsize">
<caption>MS. KUSUM KISHORI</caption>
<thead>
<tr>
<th colspan="4">Employee Details</th>
<th colspan="7">Payment & Leave Details</th>
<th colspan="2">Location Details</th>
</tr>
</thead>
<tbody>
<tr>
<td class="field">Emp No.</td>
<td colspan="3">929753</td>
<td class="field">Bank Name</td>
<td colspan="6">AXIS Bank</td>
<td class="field">Location</td>
<td>Item1</td>
</tr>
<tr>
<td class="field">Grade</td>
<td>C1</td>
<td class="field">UAN</td>
<td>10110101013999</td>
<td class="field">Acc No.</td>
<td colspan="6">10110101013999</td>
<td class="field">Base Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td class="field">PAN</td>
<td colspan="3">DROPK7729E</td>
<td class="field">Days paid</td>
<td colspan="6">31</td>
<td class="field">Depute Br.</td>
<td>TSC - Hyderabad</td>
</tr>
<tr>
<td colspan="4"></td>
<td class="field">Leave Balance</td>
<td class="field">EL</td>
<td>36.32</td>
<td class="field">SL</td>
<td>24.32</td>
<td class="field">CL</td>
<td>2.50</td>
<td class="field">WON/SWON</td>
<td>2874529</td>
</tr>
</tbody>
</table>
<table id="woSpTable2" class="table table-bordered table-responsive table-striped fontsize">
<thead>
<tr>
<th>Earnings</th>
<th>Arrears</th>
<th>Current</th>
<th>Deductions</th>
<th>Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">Total Earnings (Current + Arrears)</td>
<td>34,710.00</td>
<td>Total Deductions</td>
<td>2,817.00</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Op</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
For the following table structure table border is showing in some browsers, and in some browsers it is not showing.
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
border-bottom:0px !important;
}
<table class="test-table">
<tbody>
<tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="2" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody>
</table>
See the below screenshot of table in browsers:
Firefox table
Chrome table
The Firefox table structure is the correct structure, but in Chrome it is not showing properly. What is wrong in this code? How to make the table structure same in every browser?
Set rowspan=4 for that Cell like below
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
}
<table class="test-table">
<tbody><tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="4" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody></table>
Here is the solution might be it help.
You have to add rowspan=4
Here is the example
What I would like to do:
What did I wrote:
<table>
<TR>
<TD ROWSPAN="4">left</TD>
<TD ROWSPAN="12">middle</TD>
<TD ROWSPAN="3">right</TD>
</TR>
<TR>
<TD ROWSPAN="4">left2</TD>
<TD ROWSPAN="3">right2</TD>
</TR>
<TR>
<TD ROWSPAN="4">left3</TD>
<TD ROWSPAN="3">right3</TD>
</TR>
<TR>
<TD ROWSPAN="3">right4</TD>
</TR>
</table>
It turns out with this:
I would like the table have same height, I can work in this way, but it is not the same height:
<table>
<TR>
<TD>left</TD>
<TD ROWSPAN="12">middle</TD>
<TD>right</TD>
</TR>
<TR>
<TD>left2</TD>
<TD>right2</TD>
</TR>
<TR>
<TD>left3</TD>
<TD>right3</TD>
</TR>
<TR>
<TD>right4</TD>
</TR>
</table>
and the result like this:
Got it! The trick was having a total of twelve <tr>s, even though some of them are empty.
As a point of curiosity, I solved this by making the table in excel, saving as html, and deleting all of the inline styles that excel puts in there.
td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan=4>left</td>
<td rowspan=12>middle</td>
<td rowspan=3>right</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right2</td>
</tr>
<tr>
<td rowspan=4>left2</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right3</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=4>left3</td>
</tr>
<tr>
<td rowspan=3>right4</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>