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
Group Information
Group Information
| Group | Name | Location |
|---|---|---|
| Group 1 | Manish | Durg, India |
| Manoj | Bhopal, India | |
| Group 2 | Rohit | Bangalore, India |
| Nitesh | Bhopal, India |
HTML Colspan example
Group Information
Group Information
| Sr No | Name | Location |
|---|---|---|
| Group 1 | ||
| 1 | Manish | Durg, India |
| 2 | Manoj | Bhopal, India |
| Group 2 | ||
| 3 | Rohit | Bangalore, India |
| 4 | Nitesh | Bhopal, India |
HTML Rowspan and Colspan Example
Rowspan and Colspan Example
| Header 1 | Header 2 | Header 3 | |
|---|---|---|---|
| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 and 4 | |
| Row 2, Col 2 | Row 2, Col 3 | Row 2, Col 4 | |
| Footer | |||
College Time Table
College Timetable
College Timetable
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 8:00 AM - 9:30 AM | Mathematics | Physics | Chemistry | English | History |
| 9:45 AM - 11:15 AM | Computer Science | Physical Education | Biology | Mathematics | Physics Lab |
| 11:30 AM - 1:00 PM | English | Chemistry | Computer Science Lab | History | Lunch |
| 2:00 PM - 3:30 PM | Biology Lab | Mathematics | Physics | Physical Education | Chemistry |
Candidate Profile
Candidate Profile
|
Name | Jani Doe | |
|---|---|---|---|
| Age | 30 | ||
| Location | New York, USA | ||
| Skills |
|
||
HTML Invoice Format
Invoice with GST
Invoice
| Item | Description | Quantity | Unit Price | Total | |
|---|---|---|---|---|---|
| Ordered | Shipped | ||||
| Item 1 | Description of Item 1 | 5 | 5 | $10.00 | $50.00 |
| Item 2 | Description of Item 2 | 3 | 3 | $15.00 | $45.00 |
| Item 3 | Description of Item 3 | 2 | 2 | $20.00 | $40.00 |
| Item 4 | Description of Item 4 | 4 | 4 | $12.00 | $48.00 |
| Item 5 | Description of Item 5 | 6 | 6 | $8.00 | $48.00 |
| GST | GST Rate | 18% | |||
| GST Amount | $43.20 | ||||
| Total Amount (Including GST) | $283.20 | ||||
HTML table colspan and rowspan example for Hotel Menu
Hotel Menu
Hotel Menu
| Category | Items | Price | |
|---|---|---|---|
| Name | Description | ||
| Appetizers | Item 1 | Description of Item 1 | $8.00 |
| Item 2 | Description of Item 2 | $7.00 | |
| Item 3 | Description of Item 3 | $9.00 | |
| Main Course | Item 4 | Description of Item 4 | $15.00 |
| Item 5 | Description of Item 5 | $18.00 | |
| Desserts | Item 6 | Description of Item 6 | $6.00 |
| Item 7 | Description of Item 7 | $5.00 | |
| Item 8 | Description of Item 8 | $7.00 | |
Here we discussed the uses of HTML Table rowspan and colspan with examples.