Colspan and Rowspan allow us to combine adjacent cells to make "supercells". We'll use a 4x4 table to show how these work. I added some cellspacing so you see the individual cells and see that, yes, they actually become larger cells.
| Column 1 | Column 2 | Column 3 | Column 4 | |||||||||||||||||
| Row 1 |
| |||||||||||||||||||
| Row 2 | ||||||||||||||||||||
| Row 3 | ||||||||||||||||||||
| Row 4 | ||||||||||||||||||||
With colspan, you can combine adjacent cells in the same row to make "super wide" cells. Your super cell wiill span more than one column.
Sample code: <td colspan="4">
| Column 1 | Column 2 | Column 3 | Column 4 | |||||||||||||||||
| Row 1 |
| |||||||||||||||||||
| Row 2 | ||||||||||||||||||||
| Row 3 | ||||||||||||||||||||
| Row 4 | ||||||||||||||||||||
With rowspan, you can combine adjacent cells in the same column to make "super tall" cells. Your super cell will span more than one row.
Sample code: <td rowspan="4">
| Column 1 | Column 2 | Column 3 | Column 4 | ||||||||||||||
| Row 1 |
| ||||||||||||||||
| Row 2 | |||||||||||||||||
| Row 3 | |||||||||||||||||
| Row 4 | |||||||||||||||||
Using both colspan and rowspan in the same cell creates a super cell that spans both columns and rows.
Sample code: <td colspan="2" rowspan="2">
| Column 1 | Column 2 | Column 3 | Column 4 | |||||||||||||
| Row 1 |
| |||||||||||||||
| Row 2 | ||||||||||||||||
| Row 3 | ||||||||||||||||
| Row 4 | ||||||||||||||||
Post a table that uses colspan or rowspan or both.
Can you think of any ways to combine cells for imaging purposes or to make decorative tables?
As always, questions and comments are welcome.
Happy tabling,
Gnubee