Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

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

Example: In this example, we will set the number of rows a table header cell should span in HTML

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:



Last Updated : 30 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads