Dailyaspirants

Advertisement

Ad Code

Advertisement

Most Popular

Dailyaspirants

SEO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Home
Html

How to create rowspan and colspan together in html

rowspan and colspan together in html,rowspan in html ,colspan in html , rowspan and colspan together in html,Both the colspan and rowspan attributes


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>


create rowspan and colspan together in html

Hi, Am Chandra Kumar, I have completed my graduation in B.E computer science and Engineering. I am the founder of Dailyaspirants and I have been doing blogging and website design and development .since 2018 and 8+experience gained in this field.