HTML RowSpan: Allows a single table cell to span the height of more than one cell or row.
Both colspan= and rowspan= are attributes of the two table-cell elements, <th> and <td>. They provide the same functionality as “merge cell” in spreadsheet programs like Excel.
You may also like: HTML Table ColSpan Examples
Example 1:
HTML Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:3px solid #D33257; } td{ background:#FEC606; text-align: center; padding:10px; } </style> </head> <body> <table> <tr> <td>10</td> <td>20</td> <td rowspan="2">30</td> </tr> <tr> <td>40</td> <td>50</td> </tr> </table> </body> </html> |
Example 2:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:3px solid #D33257; } td{ background:#FEC606; text-align: center; } th{ background-color: #3D8EB9; } </style> </head> <body> <table> <caption>Caption of Table</caption> <tr> <th rowspan="4">01</th> <th rowspan="2">Men</th> <td>15</td> <td rowspan="2">35</td> </tr> <tr> <td>20</td> </tr> <tr> <th rowspan="2">Women</th> <td>30</td> <td rowspan="2">60</td> </tr> <tr> <td>40</td> </tr> <tr> <th rowspan="4">02</th> <th rowspan="2">Men</th> <td>25</td> <td rowspan="2">65</td> </tr> <tr> <td>40</td> </tr> <tr> <th rowspan="2">Women</th> <td>10</td> <td rowspan="2">20</td> </tr> <tr> <td>10</td> </tr> </table> </body> </html> |
Example 3:
HTML Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <style> table, td { border: 3px solid #D33257; } td { background: #FEC606; text-align: center; padding: 10px; } </style> </head> <body> <table> <tr> <td>10</td> <td rowspan="2">30</td> <td rowspan="4">100</td> <td rowspan="8">360</td> </tr> <tr> <td>20</td> </tr> <tr> <td>30</td> <td rowspan="2">70</td> </tr> <tr> <td>40</td> </tr> <tr> <td>50</td> <td rowspan="2">110</td> <td rowspan="4">260</td> </tr> <tr> <td>60</td> </tr> <tr> <td>70</td> <td rowspan="2">150</td> </tr> <tr> <td>80</td> </tr> </table> </body> </html> |
[…] You may also like: HTML Table Rowspan Examples […]