Skip to content
Related Articles

Related Articles

Improve Article

HTML | rowspan Attribute

  • Difficulty Level : Medium
  • Last Updated : 03 Jul, 2021

The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row. It provides the same functionality as “merge cell” in the spreadsheet program like Excel.
Usage: It can be used with <td> and <th> element in an HTML Table.
 

Attribute Values: It contains a value i.e number Which specify the number of rows that a table cell should span. 

  • <td>: The rowspan attribute when used with <td> tag determines the number of standard cells it should span. 
    Syntax: 
<td rowspan = "value">table content...</td>

The value specifies the number of rows that the cell fills. The value must be a integer. 
Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>HTML rowspan Attribute</title>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 6px;
            }
        </style>
    </head>
 
    <body style = "text-align:center">
 
        <h1 style = "color: green;">GeeksforGeeks</h1>
        <h2>HTML rowspan Attribute</h2>
 
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Ajay</td>
                <!-- This cell will take up space on
                    two rows -->
                <td rowspan="2">24</td>
            </tr>
            <tr>
                <td>Priya</td>
            </tr>
        </table>
         
    </body>
</html>                   

Output: 

rowspan



  • <th>: The rowspan attribute when used with <th> tag determines the number of header cells it should span. 
    Syntax: 
<th rowspan = "value">table content...</th>

The value specifies the number of rows that the cell fills. The value must be a integer. 
Example: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>HTML rowspan Attribute</title>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 6px;
            }
        </style>
    </head>
     
    <body style = "text-align:center">
        <h1 style = "color: green;">GeeksforGeeks</h1>
        <h2>HTML rowspan Attribute</h2>
         
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <!-- This cell will take up space
                    in 3 rows -->
                <th rowspan="3">GeeksforGeeks</th>
            </tr>
            <tr>
                <td>Arun</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Priya</td>
                <td>25</td>
            </tr>
        </table>
    </body>
</html>                   

Output: 

rowspan

 

Supported Browsers: The browser supported by rowspan attribute are listed below:  

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :