<th> - table header in table
<td> - table data in table
Colspan - A Colspan allows a space in a single table cell to span the horizontal width of more than one column cell or more.
Rowspan - A Rowspan are allowing space in vertical width of height of more than one-row cell or more.
see also : How to create Multiple table in html
Both the colspan and rowspan attributes are doing the same things it's "merge cell" and using of <th> and <td>.
Table of contents:
rowspan in html:
<style>
table, th, td {
border: 1px solid black;
padding:10px;
border-collapse: collapse;
}
#rowspan{background-color:#363636;color:#fff;}
</style>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding:10px;
border-collapse: collapse;
}
#rowspan{background-color:#363636;color:#fff;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Product name</th>
<th>Quatity</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" id="rowspan">1</td>
<td rowspan="4" id="rowspan">Ram</td>
<td>Realme c1</td>
<td>2</td>
<td>6000</td>
<td rowspan="4" id="rowspan">17550</td>
</tr>
<tr>
<td>Ram DDR3 8GB</td>
<td>2</td>
<td>5000</td>
</tr>
<tr>
<td>DairyMilk</td>
<td>10</td>
<td>500</td>
</tr>
<tr>
<td>cotton candy</td>
<td>5</td>
<td>50</td>
</tr>
<!---first row end--->
<tr>
<td rowspan="2" id="rowspan">2</td>
<td rowspan="2" id="rowspan">Veronica</td>
<td>Sony TV "50inch"</td>
<td>1</td>
<td>60000</td>
<td rowspan="2" id="rowspan">63000</td>
</tr>
<tr>
<td>chromecast</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
</tbody>
</body>
</html>
colspan in html:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding:10px;
border-collapse: collapse;
}
#colspan{background-color:#363636;color:#fff;}
#negative{background-color:red;color:#fff;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Product name</th>
<th>Quatity</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Realme c1</td>
<td>2</td>
<td>6000</td>
<td>12000</td>
</tr>
<tr>
<td>2</td>
<td>Chandra</td>
<td>Iphone12</td>
<td>1</td>
<td>160000</td>
<td>160000</td>
</tr>
<tr>
<td>3</td>
<td>Priya</td>
<td>samsung Z fold</td>
<td>1</td>
<td>69000</td>
<td>69000</td>
</tr>
<tr>
<td>4</td>
<td>veronica</td>
<td>Realme c20</td>
<td>5</td>
<td>9000</td>
<td>45000</td>
</tr>
<tr>
<td colspan="5" id="colspan">Total Amount:</td>
<td>2,86,000</td>
</tr>
<tr>
<td colspan="4" id="negative">Tax:</td>
<td> 35%</td>
<td id="negative">1,00,100</td>
</tr>
<tr>
<td colspan="5" id="colspan">Tax Dedution Balance Amount:</td>
<td id="color">1,85,900</td>
</tr>
</tbody>
</table>
</body>
</head>
</html>
rowspan and colspan in html:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding:10px;
border-collapse: collapse;
}
#colspan{background-color:#363636;color:#fff;}
#negative{background-color:red;color:#fff;}
#rowspan{background-color:yellow;color:#363636;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Product name</th>
<th>Quatity</th>
<th>Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" id="rowspan">1</td>
<td rowspan="4" id="rowspan">Ram</td>
<td>Realme c1</td>
<td>2</td>
<td>6000</td>
<td rowspan="4" id="rowspan">17550</td>
</tr>
<tr>
<td>Ram DDR3 8GB</td>
<td>2</td>
<td>5000</td>
</tr>
<tr>
<td>DairyMilk</td>
<td>10</td>
<td>500</td>
</tr>
<tr>
<td>cotton candy</td>
<td>5</td>
<td>50</td>
</tr>
<!---first row end--->
<tr>
<td rowspan="2" id="rowspan">2</td>
<td rowspan="2" id="rowspan">Veronica</td>
<td>Sony TV "50inch"</td>
<td>1</td>
<td>60000</td>
<td rowspan="2" id="rowspan">80550</td>
</tr>
<tr>
<td>chromecast</td>
<td>1</td>
<td>3000</td>
</tr>
<tr>
<tr>
<td colspan="5" id="colspan">Total Amount:</td>
<td>2,86,000</td>
</tr>
<tr>
<td colspan="4" id="negative">Tax:</td>
<td id="negative"> 35%</td>
<td id="negative">28192.50</td>
</tr>
<tr>
<td colspan="5">Tax Dedution Balance Amount:</td>
<td id="colspan">52357.50</td>
</tr>
</tbody>
</body>
</html>
In another attribute of types of the <th> in the table is scope
<th scope="col">Name</th><tr scope="row">Data</tr>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<style>
.container{max-width:600px;margin-top:140px;}
</style>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<tr>
<th scope="col">ID</th>
<th scope="col">Customer Name</th>
<th scope="col">Product name</th>
<th scope="col">Quatity</th>
<th scope="col">Price</th>
<th scope="col">Total Price</th>
</tr>
</tr>
</thead>
<tbody>
<tr scope="row">
<td>1</td>
<td>Ram</td>
<td>Realme c1</td>
<td>2</td>
<td>6000</td>
<td>12000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
