How to set the number of rows a table cell should span in HTML ?
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" >w3wiki</ 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:
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" >w3wiki</ 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:
Contact Us