HTML | rowspan Attribute

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 provide the same functionality as “merge cell” in spreadsheet program like Excel.

Usage: It can be used with <td> and <th> element in an HTML Table.

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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    rowspan

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

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


My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.