Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to set the number of rows a table cell should span in HTML ?

  • Last Updated : 26 May, 2021

In this article, we will show how multiple rows are spanned by a table header cell. The task can be done by using the rowspan attribute while using the <th> tag. This property is used to merge one or more cells as well as increase the height of the single header cell automatically. 

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<th rowspan = "value">table content...</th>

Example:

HTML




<!DOCTYPE html>
<html>
  <body>
    <center>
      <h2 style="color: green">GeeksforGeeks</h2>
  
      <b
       Set the number of rows a table header 
       cell should span in HTML 
      </b>
      <table border="4" width="400">
        <tr>
          <th>NAME of BANK</th>
          <th rowspan="3">SUNDAY HOLIDAY</th>
          <th>Open Timings</th>
        </tr>
  
        <tr>
          <td>SBI</td>
          <td>10am to 5pm</td>
        </tr>
  
        <tr>
          <td>PNB</td>
          <td>10am to 5pm</td>
        </tr>
      </table>
    </center>
  </body>
</html>

Output: 



header span on rows

Example 2: In this example. we will learn, how rows can be made to span over multiple cells.

The task can be done by using the rowspan attribute when using the <td> tag within <tr> tag.  It allows the single table cell to span the height of more than one cell. It contains a numeric value that defines the number of rows that should be spanned. 

Syntax:

<tr>
  <td rowspan = "value">table column content...</td>
</tr>

HTML




<!DOCTYPE html>
<html>
  <head>
    <style>
      table {
        border: 2px solid black;
        border-collapse: collapse;
        padding: 6px;
      }
      td {
        border: 1px solid green;
        text-align: center;
      }
    </style>
  </head>
  
  <body style="text-align: center">
    <center>
      <h2 style="color: green">GeeksforGeeks</h2>
      <b
       Set the number of rows a table
       cell should span in HTML 
      </b>
  
      <br />
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>ID</th>
        </tr>
        <tr>
          <td>Raj</td>
          <!-- This cell will take up space on
                    two rows -->
          <td rowspan="2">24</td>
          <td>123</td>
        </tr>
        <tr>
          <td>sandeep</td>
          <td>1234</td>
        </tr>
  
        <tr>
          <td>fahad</td>
          <td>21</td>
          <td>12345</td>
        </tr>
      </table>
    </center>
  </body>
</html>
               

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :