How to build this table in html ??
I want to make table using rowspan and colspan ?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<table class="table table-bordered">
<thead>
<th>Subject</th>
<th>Result</th>
</thead>
<tbody>
<tr>
<td>Science</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Other Science</td>
<td>Math</td>
<td>English</td>
</tr>
</tbody>
</table>
You can learn about <table> tags at MDN
You can do this:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">Subject</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Science</td>
<td>Physics</td>
<td>A</td>
</tr>
<tr>
<td>Chemistry</td>
<td>A</td>
</tr>
<tr>
<td rowspan="2">Other Science</td>
<td>Biology</td>
<td>B</td>
</tr>
<tr>
<td>Geography</td>
<td>A</td>
</tr>
<tr>
<td colspan="2">Math</td>
<td>A+</td>
</tr>
<tr>
<td colspan="2">English</td>
<td>A+</td>
</tr>
</tbody>
</table>
This is set-up with colspan and rowspan
table {
border-collapse: collapse;
}
table,
tr,
th,
td {
border: 1px solid #000;
}
th {
padding: 1ex;
background: #ccc;
}
td {
padding: 1ex;
}
.divide td {
border-top: 3px solid;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<table class="table table-bordered">
<thead>
<th colspan="2">Subject</th>
<th>Result</th>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="1" width="100px">
SCIENCE
</td>
<td>
Physics
</td>
<td>A</td>
</tr>
<tr>
<td>
<span>Chemistry</span>
</td>
<td colspan="1">A</td>
</tr>
<tr>
<td rowspan="2" colspan="1" width="100px">
SCIENCE
</td>
<td>
Physics
</td>
<td>A</td>
</tr>
<tr>
<td>
<span>Chemistry</span>
</td>
<td colspan="1">A</td>
</tr>
<tr>
<td colspan="2">
SCIENCE
</td>
<td>A</td>
</tr>
<tr>
<td colspan="2">
SCIENCE
</td>
<td>A</td>
</tr>
</tbody>
</table>
<br>
<br>
<table>
<tr>
<th>head</th>
<th>title</th>
<th>title</th>
<th>title</th>
<th></th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">white</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>white</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
</table>
Related
So i'm working on Crud java webbapp and i want to the desgin the table head so it will looks like this....
But i cannot make it through the html format.....
here is my try
Here is the Html Code
<div class="col-md-9">
<h3>Student Information From Database</h3>
<table class="table">
<thead class="bg-light">
<tr>
<th scope="col">ID</th>
<th scope="col">Full Name</th>
<th scope="col">Status</th>
<th colspan="2">Major 1</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
do you want something like this;
<table border="2">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3">Major1</td>
</tr>
<tr>
<td>ID</td>
<td>FullName</td>
<td>Status</td>
<td>physics</td>
<td>calculus</td>
<td>biologi</td>
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
</table>
Here is an example:
<table>
<thead>
<tr>
<th>ID</th>
<th>FULL NAME</th>
<th>STATUS</th>
<th colspan="3">
MAJOR 1
<table style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</th>
</tr>
</thead>
</table>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
.brdst{
text-align: center;
border-right:1px;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3" class="brdst"></td>
<td colspan="3" class="brdst">Major1</td>
</tr>
<tr>
<td>ID</td>
<td>Full Name</td>
<td>Status</td>
<td>Physics</td>
<td>Clculus</td>
<td>Bioloy1</td>
</tr>
<tr>
<td>Add col here</td>
strong text <td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
<td>Add col here</td>
</tr>
</table>
</body>
</html>
You can do this with colspan & rowspan attributes.
Demo: https://jsfiddle.net/ycnar3gv/
<table>
<thead>
<tr>
<th rowspan="2">ID</th>
<th rowspan="2">Full Name</th>
<th rowspan="2">Status</th>
<th colspan="3">Major 1</th>
</tr>
<tr>
<th>col1</th>
<th>col3</th>
<th>col3</th>
</tr>
</tr>
</thead>
</table>
I am working with a bootstrap table, which contains in the right corner a table with rowspan = "2", then it has 2 rows, and then at the other end another rowspan = "2", looking like this:
The problem I'm having is that I can't "shrink" the width of the table where the image is, that is, the first column, I tried with col-1, with colspan = "1" but so far I can't find a solution, could you help me ?, the TOTAL WIDTH OF THE TABLE WHERE THE IMAGE IS, SHOULD BE THE SAME ROWSPAN = "1".
This is the code:
<tr>
<td rowspan="2" colspan="1">
<img src="IMAGE">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>
If you need a set width for image row, you can use width="...px" into <td width="..px">
I try make a example like this
table {
border-collapse: collapse;
}
table,
tr,
th,
td {
border: 1px solid #000;
}
th {
padding: 1ex;
background: #ccc;
}
td {
padding: 1ex;
}
.divide td {
border-top: 3px solid;
}
<table>
<tr>
<td rowspan="2" colspan="1" width="200px">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2" colspan="1" width="150px">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2" colspan="1" width="100px">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" width="50px">
</td>
<td class="col-10">
PRODUCT NAME
</td>
<td rowspan="2" colspan="1">$PRICE</td>
</tr>
<tr>
<td>
<span>DESCRIPCION</strong></span>
</td>
</tr>
</table>
<br>
<br>
<table>
<tr>
<th>head</th>
<th>title</th>
<th>title</th>
<th>title</th>
<th></th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">white</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td>white</td>
</tr>
<tr class="divide">
<td>
<input type="checkbox">
</td>
<td>content</td>
<td>content</td>
<td>content</td>
<td rowspan="2">gray</td>
</tr>
<tr>
<td colspan="4">
lorem ipsum
</td>
</tr>
</table>
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 have two tables. One with additional invisible <td> and one without. The problem is that the second table's rowspan is not working, the entire row just collapses. How could I get the result like in the first table without adding that unnecessary <td>?
HTML:
.table-height td {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
<td className='invisible'></td>
</tr>
<tr>
<td className='invisible'></td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td className='invisible'></td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td className='invisible'></td>
</tr>
</tbody>
</table>
</p>
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>
Finally I got it right. I just need to set the height for <tr> too (same as for </td>)
.table-height td, tr {
height: 30px;
}
.invisible {
width: 1px;
}
<p>
<table border="2" class='table-height'>
<tbody>
<tr>
<td rowSpan="2">A1</td>
<td rowSpan="2">A2</td>
<td rowSpan="2">A3</td>
<td rowSpan="2">A4</td>
</tr>
<tr>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
</tr>
</tbody>
</table>
</p>
I want to remove borders (horizontal & vertical) lines both from the first row of the below snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive">
<tr style="border: none;">
<td colspan="4" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
I tried the below code but no change was detected!
Tried:
<tr style="border: none;">
<td colspan="4" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
I don't want any type of line (horizontal & vertical) to be displayed for the first row of the table. i.e: Company one.
Add a #media print rule to your stylesheet, and remove the border on both the table and first cell.
body {
/* for demo */
margin: 20px !important;
}
#myHeader > tbody tr:first-of-type td {
border-color: #f9f9f9;
border-bottom: 0;
}
#myHeader tr:nth-of-type(2) td {
border-top: none;
}
#media print {
table {
border: 0 !important;
}
#myHeader tr:first-of-type td {
border: 0 !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
<tr>
<td colspan="4">
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4">
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</table>
You don't have any border on company but you have border on table and number which is making border around company. Removing them will do the trick
#media print {
table {
border: 0 !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br /><br /><br />
<table id="myHeader" class="table table-bordered table-responsive" style="border:none;">
<tr class="rem" style="border: none;">
<td colspan="4" class="rem" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" class="rem" style="border:none;">
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
The border property was from the linked stylesheet. Updated your code by adding this - style="border:none !important" to both company and number.
Works fine now. But your code can be cleaner if you separate your css from your html.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive">
<tr style="border: none;">
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
_____________________________________________
Updated Code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<br /><br /><br /><table id="myHeader" class="table table-bordered table-responsive" style="border-top:none !important; border-right:none !important; border-left:none !important">
<tr style="">
<td colspan="4" style="border:none !important" >
<h1 class="text-center">Company</h1>
</td>
</tr>
<tr>
<td colspan="4" style="border:none !important; " >
<h1 class="text-center">Number</h1>
</td>
</tr>
<tr>
<td colspan="2">
<h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
</td>
<td colspan="2">
<h3><span style="float: right;">Date</span></h3>
</td>
</tr>
<tr>
<th>Sr.</th>
<th>Item</th>
<th>Qty</th>
<th>Amount</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>Shirt (D.C)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>2</td>
<td>Shirt (Iron)</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
<td><strong>Total:</strong></td>
<td><strong>400</strong></td>
</tr>
</tbody>
</table>
</body>
</html>