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>
Related
I want to make this template with html tables,
This is my html code
<table>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>
<table>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
</td>
<td>data</td>
</tr>
</table>
But it is not giving me the right format like the image above. How can i do it with table?
For the template as per the reference, you need to use this code
table { border: 1px solid #000; border-collapse: collapse; }
table th { padding: 5px 10px; border: 1px solid #000; }
table td { padding: 5px 10px; border-left: 1px solid #000; border-right: 1px solid #000; }
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th rowspan="2">Sr. No.</th>
<th rowspan="2">Description of Goods</th>
<th rowspan="2">HSN</th>
<th rowspan="2">Qty.</th>
<th rowspan="2">Unit</th>
<th rowspan="2">Rate (per item)</th>
<th rowspan="2">Total</th>
<th rowspan="2">Discount</th>
<th rowspan="2">Taxable Value</th>
<th colspan="2" align="center">CGST</th>
<th colspan="2" align="center">SGST</th>
<th colspan="2" align="center">IGST</th>
</tr>
<tr>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
<th>Rate</th>
<th>Amt.</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Several ways to do this. You could use a table in a td or you could make use of colspan and rowspan like in my example.
Good luck.
table {
border-collapse: collapse;
height: 100px;
font-size: 10px;
text-align: center;
}
td {
padding: 5px;
border: solid 1px black;
}
<table>
<tr>
<td rowspan=2>Sr.No</td>
<td rowspan=2>Description of Goods</td>
<td rowspan=2>HSN</td>
<td rowspan=2>Qty.</td>
<td rowspan=2>Unit</td>
<td rowspan=2>Rate(per item)</td>
<td rowspan=2>Total</td>
<td rowspan=2>Discount</td>
<td rowspan=2>Taxable value</td>
<td colspan=2>CGST</td>
<td colspan=2>SGST</td>
<td colspan=2>IGST</td>
</tr>
<tr>
<td>Rate</td>
<td>Amt.</td>
<td>Rate</td>
<td>Amt.</td>
<td>Rate</td>
<td>Amt.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
It is called as Table with Irregular Headers
You have to use
<th colspan="2" scope="colgroup">MainHeadername</th>
for main Header and
<th scope="col">SubHeaderName</th>
for Sub Headers
This Reference will be Helpful for further clarifications
https://www.w3.org/WAI/tutorials/tables/irregular/
You can do this using colspan:
table, th, td {
border: 1px solid black;
}
<table>
<tr>
<th>65</th>
<th>80</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</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>
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>
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
I am trying to create a table that looks like this using classic HTML table constructs:
Thinking left to right I came up with the following HTML which was a disaster. Am I missing something?
<html>
<body>
<table border = 1 width=640 height=480>
<tr>
<td rowspan=2 colspan=2>1</td>
<td rowspan=4 colspan=4>2</td>
<td rowspan=2 colspan=2>3</td>
<tr>
<td rowspan=2 colspan=2>4</td>
<td rowspan=2 colspan=2>5</td>
</tr>
<tr>
<td rowspan=4 colspan=4>6</td>
<td rowspan=2 colspan=2>7</td>
<td rowspan=1 colspan=1>8</td>
<td rowspan=1 colspan=1>9</td>
</tr>
<tr>
<td rowspan=1 colspan=1>10</td>
<td rowspan=1 colspan=1>11</td>
</tr>
<tr>
<td rowspan=2 colspan=2>12</td>
<td rowspan=2 colspan=2>13</td>
</tr>
</table>
</body>
</html>
One table styled with CSS.
HTML
<table>
<tr>
<td class="green"></td>
<td colspan="2" rowspan="2" class="red"></td>
<td class="green" colspan="2"></td>
</tr>
<tr>
<td class="green"></td>
<td class="green" colspan="2"></td>
</tr>
<tr>
<td colspan="2" rowspan="3" class="red"></td>
<td rowspan="2" class="green"></td>
<td class="blue"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="blue"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="green"></td>
<td colspan="2" class="green"></td>
</tr>
</table>
CSS
table {
table-layout: fixed;
border-collapse: collapse;
max-width: 8em;
width: 100%;
}
td {
border: 1px solid white;
}
.green {
background: rgb(155,187,89);
height: 2em;
width: 2em;
}
.red {
background: rgb(192,80,77);
height: 4em;
width: 4em;
}
.blue {
background: rgb(79,129,189);
height: 1em;
width: 1em;
}
Result
Here is the code for you. I hope this becomes useful to you because I spent an hour trying to create this for you. (notice HTML 5 recommends using CSS but since you wanted this in just classic html here is the solution for you)
<table width="800" height="400">
<tr width=50%>
<td width="33%" bgcolor="#6CBB3C"></td>
<td width="33%" rowspan="2" bgcolor="#C24641" width=40%></td>
<td width="33%" bgcolor="#6CBB3C"></td>
</tr>
<tr width=50%>
<td width="33%" bgcolor="#6CBB3C"></td>
<td width="33%" bgcolor="#6CBB3C"></td>
</tr>
</table>
<table width="800" height="400">
<tr width="50%">
<td width="50%" rowspan="2" bgcolor="#C24641" width=40%></td>
<td width="25%" bgcolor="#6CBB3C"></td>
<td width="25%" bgcolor="#6CBB3C" height="200pix" bgcolor="white">
<table width="100%" height="200pix" bordercolor="white"
bgcolor="white">
<tr>
<td bgcolor="#7A5DC7"></td>
<td bgcolor="#7A5DC7"></td>
</tr>
<tr>
<td bgcolor="#7A5DC7"></td>
<td bgcolor="#7A5DC7"></td>
</tr>
</table>
</td>
</tr>
<tr width="50%">
<td bgcolor="#6CBB3C"></td>
<td bgcolor="#6CBB3C"></td>
</tr>
</table>
here is the result for you: