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>
<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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
30 May, 2023
Like Article
Save Article