rowspan and colspan in html


<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>
  
  



rowspan

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> 
  
  



colspan

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>  
  
  



both rowspan and colspan


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>
  
  




Post a Comment

Previous Post Next Post