What is colspan?
Allows a single table cell to span the width of more than one cell or column.
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 Rowspan Examples
Example 1:
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 |
<!DOCTYPE html> <html> <head> <style> table,td{ border:3px solid #D33257; } td{ background:#FEC606; text-align: center; } </style> </head> <body> <table> <tr> <td colspan="3">10</td> </tr> <tr> <td>40</td> <td>50</td> <td>60</td> </tr> </table> </body> </html> |
Example 2:
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 |
<!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>Life Expectancy By Current Age</caption> <tr> <th colspan="2">65</th> <th colspan="2">40</th> <th colspan="2">20</th> </tr> <tr> <th>Men</th> <th>Women</th> <th>Men</th> <th>Women</th> <th>Men</th> <th>Women</th> </tr> <tr> <td>82</td> <td>85</td> <td>78</td> <td>82</td> <td>77</td> <td>81</td> </tr> </table> </body> </html> |
Example 3: HTML ColSpan with RowSpan
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 |
<!DOCTYPE html> <html> <head> <style> table,td,th{ border:3px solid #6C8784; text-align: center; } table{ width: 300px; } </style> </head> <body> <table> <tr> <th colspan="3">Product</th> </tr> <tr> <th >No</th> <th>P. Name</th> <th>P. Count</th> </tr> <tr> <td>1</td> <td>Pen</td> <td rowspan="3">50</td> </tr> <tr> <td>2</td> <td>Book</td> </tr> <tr> <td>3</td> <td>Dust</td> </tr> </table> </body> </html> |
[…] 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. […]