HTML Table rowspan and colspan are useful to use multiple rows and columns.
HTML ROW SPAN
In HTML, the rowspan attribute is used to specify how many rows a table cell should span or cover vertically within an HTML table. It is an attribute that can be applied to <td> (table data) or <th> (table header) elements.
Here’s how rowspan works:
- Value: The
rowspanattribute takes a numerical value greater than or equal to 1. This value represents the number of rows the cell should span. - Usage: When you apply
rowspanto a cell, it causes that cell to extend vertically over the specified number of rows, merging the cells in those rows into one larger cell.
HTML COL SPAN
In HTML, the colspan attribute is used to specify how many columns a table cell should span or cover horizontally within an HTML table. It is an attribute that can be applied to <td> (table data) or <th> (table header) elements.
Here’s how colspan works:
- Value: The
colspanattribute takes a numerical value greater than or equal to 1. This value represents the number of columns the cell should span. - Usage: When you apply
colspanto a cell, it causes that cell to extend horizontally over the specified number of columns, merging the cells in those columns into one larger cell.
HTML rowspan Example
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 | <!DOCTYPE html> <html> <head> <title>Group Information</title> <style> table { width: 80%; border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>Group Information</h1> <table> <tr> <th>Group</th> <th>Name</th> <th>Location</th> </tr> <tr> <td rowspan="2">Group 1</td> <td>Manish</td> <td>Durg, India</td> </tr> <tr> <td>Manoj</td> <td>Bhopal, India</td> </tr> <tr> <td rowspan="2">Group 2</td> <td>Rohit</td> <td>Bangalore, India</td> </tr> <tr> <td>Nitesh</td> <td>Bhopal, India</td> </tr> </table> </body> </html> |
HTML Colspan example
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 | <!DOCTYPE html> <html> <head> <title>Group Information</title> <style> table { width: 80%; border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>Group Information</h1> <table> <tr> <th>Sr No</th> <th>Name</th> <th>Location</th> </tr> <tr> <td colspan="3"><b>Group 1</b></td> </tr> <tr> <td>1</td> <td>Manish</td> <td>Durg, India</td> </tr> <tr> <td>2</td> <td>Manoj</td> <td>Bhopal, India</td> </tr> <tr> <td colspan="3"><b>Group 2</b></td> </tr> <tr> <td>3</td> <td>Rohit</td> <td>Bangalore, India</td> </tr> <tr> <td>4</td> <td>Nitesh</td> <td>Bhopal, India</td> </tr> </table> </body> </html> |
HTML Rowspan and Colspan Example
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 | <!DOCTYPE html> <html> <head> <title>Rowspan and Colspan Example</title> </head> <body> <table border="1"> <tr> <th colspan="2">Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td rowspan="2">Row 1, Col 1</td> <td>Row 1, Col 2</td> <td colspan="2">Row 1, Col 3 and 4</td> </tr> <tr> <td>Row 2, Col 2</td> <td>Row 2, Col 3</td> <td>Row 2, Col 4</td> </tr> <tr> <td colspan="4">Footer</td> </tr> </table> </body> </html> |
College Time Table
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 63 64 65 66 67 68 | <!DOCTYPE html> <html> <head> <title>College Timetable</title> <style> table { width: 80%; border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>College Timetable</h1> <table> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> </tr> <tr> <td>8:00 AM - 9:30 AM</td> <td>Mathematics</td> <td>Physics</td> <td>Chemistry</td> <td>English</td> <td>History</td> </tr> <tr> <td>9:45 AM - 11:15 AM</td> <td>Computer Science</td> <td>Physical Education</td> <td>Biology</td> <td>Mathematics</td> <td>Physics Lab</td> </tr> <tr> <td>11:30 AM - 1:00 PM</td> <td>English</td> <td>Chemistry</td> <td>Computer Science Lab</td> <td>History</td> <td>Lunch</td> </tr> <tr> <td>2:00 PM - 3:30 PM</td> <td>Biology Lab</td> <td>Mathematics</td> <td>Physics</td> <td>Physical Education</td> <td>Chemistry</td> </tr> </table> </body> </html> |
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 | <!DOCTYPE html> <html> <head> <title>Candidate Profile</title> <style> table { width: 80%; border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: left; vertical-align: top; } th { background-color: #f2f2f2; } img { max-width: 100%; height: auto; } </style> </head> <body> <h1>Candidate Profile</h1> <table> <tr> <td rowspan="4" colspan="2"> <img src="https://source.unsplash.com/rDEOVtE7vOs/220x200" alt="Candidate's Photo"> </td> <th>Name</th> <td>Jani Doe</td> </tr> <tr> <th>Age</th> <td>30</td> </tr> <tr> <th>Location</th> <td>New York, USA</td> </tr> <tr> <th>Skills</th> <td> <ul> <li>Web Development</li> <li>Database Management</li> <li>Project Management</li> </ul> </td> </tr> </table> </body> </html> |
HTML Invoice Format
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <!DOCTYPE html> <html> <head> <title>Invoice with GST</title> <style> table { width: 80%; border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>Invoice</h1> <table> <tr> <th rowspan="2">Item</th> <th rowspan="2">Description</th> <th colspan="2">Quantity</th> <th rowspan="2">Unit Price</th> <th rowspan="2">Total</th> </tr> <tr> <th>Ordered</th> <th>Shipped</th> </tr> <tr> <td>Item 1</td> <td>Description of Item 1</td> <td>5</td> <td>5</td> <td>$10.00</td> <td>$50.00</td> </tr> <tr> <td>Item 2</td> <td>Description of Item 2</td> <td>3</td> <td>3</td> <td>$15.00</td> <td>$45.00</td> </tr> <tr> <td>Item 3</td> <td>Description of Item 3</td> <td>2</td> <td>2</td> <td>$20.00</td> <td>$40.00</td> </tr> <tr> <td>Item 4</td> <td>Description of Item 4</td> <td>4</td> <td>4</td> <td>$12.00</td> <td>$48.00</td> </tr> <tr> <td>Item 5</td> <td>Description of Item 5</td> <td>6</td> <td>6</td> <td>$8.00</td> <td>$48.00</td> </tr> <tr> <td rowspan="3">GST</td> <td colspan="4">GST Rate</td> <td>18%</td> </tr> <tr> <td colspan="4">GST Amount</td> <td colspan="2">$43.20</td> </tr> <tr> <td colspan="4">Total Amount (Including GST)</td> <td colspan="2">$283.20</td> </tr> </table> </body> </html> |
HTML table colspan and rowspan example for Hotel Menu
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!DOCTYPE html> <html> <head> <title>Hotel Menu</title> <style> table { width: 80%; border-collapse: collapse; margin: 20px auto; } th, td { border: 1px solid #ccc; padding: 10px; text-align: center; } th { background-color: #f2f2f2; } </style> </head> <body> <h1>Hotel Menu</h1> <table> <tr> <th rowspan="2">Category</th> <th colspan="2">Items</th> <th rowspan="2">Price</th> </tr> <tr> <th>Name</th> <th>Description</th> </tr> <tr> <td rowspan="3">Appetizers</td> <td>Item 1</td> <td>Description of Item 1</td> <td>$8.00</td> </tr> <tr> <td>Item 2</td> <td>Description of Item 2</td> <td>$7.00</td> </tr> <tr> <td>Item 3</td> <td>Description of Item 3</td> <td>$9.00</td> </tr> <tr> <td rowspan="2">Main Course</td> <td>Item 4</td> <td>Description of Item 4</td> <td>$15.00</td> </tr> <tr> <td>Item 5</td> <td>Description of Item 5</td> <td>$18.00</td> </tr> <tr> <td rowspan="3">Desserts</td> <td>Item 6</td> <td>Description of Item 6</td> <td>$6.00</td> </tr> <tr> <td>Item 7</td> <td>Description of Item 7</td> <td>$5.00</td> </tr> <tr> <td>Item 8</td> <td>Description of Item 8</td> <td>$7.00</td> </tr> </table> </body> </html> |
Here we discussed the uses of HTML Table rowspan and colspan with examples.