The tables below have merged cells. The concept is similar to merging cells in a spreadsheet.
Merging (spanning) in HTML tables is always applied to the right and down.
You need to look at the comments in the source code to fully understand this.
Row 1 Cell 1 |
Row 1 Cell 2 |
Row 2 Cell 1 |
This is how the merging for the table above was done using the rowspan attribute.
Here is a more involved example.
Row 1 Cell 1 |
Row 1 Cell 2 |
Row 2 Cell 1 |
Row 2 Cell 2 |
Row 2 Cell 3 |
Row 3 Cell 2 |
Row 3 Cell 3 |
Row 4 Cell 2 |
Row 4 Cell 3 |
This is how the merging for the table above was done using colspan and rowspan attributes.
Here is another diagram for creating an irregular table by merging (spanning) cells.
The HTML code to create this table is not supplied in this example.
Can you figure out how to create a table like this?