The colspan and rowspan attributes in HTML tables allow you to merge cells either horizontally (across columns) or vertically (across rows), which is useful for organizing complex data.
colspan Attribute
The colspan attribute in a <th> or <td> element specifies the number of columns a cell should span. It merges the current cell with the adjacent cells to the right.
rowspan Attribute
The rowspan attribute specifies the number of rows a cell should span. It merges the current cell with the cells directly below it.
row-and-column-span.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Table with Colspan and Rowspan</title> </head> <body> <h1>HTML Table Example with Colspan and Rowspan</h1> <table border="1"> <caption>Employee Shift Schedule</caption> <thead> <tr> <th>Employee Name</th> <th>Shift</th> <th>Days</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Rama Krishna</td> <td>Morning</td> <td>Monday</td> </tr> <tr> <td>Morning</td> <td>Tuesday</td> </tr> <tr> <td>Gopi Battu</td> <td colspan="2">Afternoon Shift (Wednesday and Thursday)</td> </tr> <tr> <td>Joel Chelli</td> <td>Night</td> <td>Friday</td> </tr> </tbody> </table> </body> </html>
Previous Next Home
No comments:
Post a Comment