So, now you've learned to create a basic table with some rows and columns. You also know that you can nest tables as much as needed to get the effect that you desire on your web pages.
There are some other things that you can do with tables which make them even more useful.
Spanning Rows
The example below shows how the ROWSPAN construct works. As you can see, this allows you to have a column which spans more than one row.
| ROWSPAN |
| Cell 1 | Rowspan | Cell 3 | | Cell 2 | Cell 4 | |
| Cell 1 | Rowspan | Cell 3 | | Cell 2 | Cell 4 | |
Spanning Columns
In addition you can also span columns, as shown in the example below.
| COLSPAN |
| Cell 1 | Cell 2 | Cell 3 | | Colspan | | Cell 4 | Cell 5 | Cell 6 | |
| Cell 1 | Cell 2 | Cell 3 | | Colspan | | Cell 4 | Cell 5 | Cell 6 | |
Combining Rowspan and Colspan
The example below shows how the COLSPAN and ROWSPAN can be combined in the same table to form some very interesting and useful shapes.
| Combining COLSPAN and ROWSPAN |
| Cell 1 | Cell 2 | Rowspan | | Colspan | | Cell 3 | Cell 4 | |
| Cell 1 | Cell 2 | Rowspan | | Colspan | | Cell 3 | Cell 4 | |
Adding headers to a table
You can put headers on a table, as shown below. Notice how the
and | are used instead of the
and | tags.
| Adding table headers |
| Head 1 | Head 2 | Head 3 | | Cell 1 | Cell 2 | Cell 3 | | Cell 4 | Cell 5 | Cell 6 | |
| Head 1 | Head 2 | Head 3 | | Cell 1 | Cell 2 | Cell 3 | | Cell 4 | Cell 5 | Cell 6 | |
Combining headers with COLSPAN
You might want a header to span multiple columns. The technique is shown in the example below.
| Adding table headers with COLSPAN |
| Head 1 | Head 2 | | Cell 1 | Cell 2 | Cell 3 | | Cell 4 | Cell 5 | Cell 6 | |
| Head 1 | Head 2 | | Cell 1 | Cell 2 | Cell 3 | | Cell 4 | Cell 5 | Cell 6 | |
Adding headers to rows
You can also put headers on rows, as shown below.
| Adding table headers to the rows |
| Head 1 | Cell 1 | Cell 2 | | Head 2 | Cell 3 | Cell 4 | | Head 3 | Cell 5 | Cell 6 | |
| Head 1 | Cell 1 | Cell 2 | | Head 2 | Cell 3 | Cell 4 | | Head 3 | Cell 5 | Cell 6 | |
Adding headers to rows with ROWSPAN
You can also put headers on rows and use the ROWSPAN to span rows, as shown below.
| Adding table headers to the rows and using ROWSPAN |
| Head 1 | Cell 1 | Cell 2 | | Head 2 | Cell 3 | Cell 4 | | Cell 5 | Cell 6 | |
| Head 1 | Cell 1 | Cell 2 | | Head 2 | Cell 3 | Cell 4 | | Cell 5 | Cell 6 | |
Adding multiple headers to the columns
Now to get a little more fancy.
| Adding multiple headers to the columns |
| Top 1 | Top 2 | | Head 1 | Head 2 | Head 3 | Head 4 | | Cell 1 | Cell 2 | Cell 3 | Cell 4 | | Cell 5 | Cell 6 | Cell 7 | Cell 8 | |
| Top 1 | Top 2 | | Head 1 | Head 2 | Head 3 | Head 4 | | Cell 1 | Cell 2 | Cell 3 | Cell 4 | | Cell 5 | Cell 6 | Cell 7 | Cell 8 | |
Adding multiple headers to the columns and rows
Now to get a lot more fancy.
| Adding multiple headers to the columns and rows |
| | Top 1 | Top 2 | | Head 1 | Head 2 | Head 3 | Head 4 | | Merged Row | Row Head 1 | Cell 1 | Cell 2 | Cell 3 | Cell 4 | | Row Head 2 | Cell 5 | Cell 6 | Cell 7 | Cell 8 | |
| Top 1 | Top 2 | | Head 1 | Head 2 | Head 3 | Head 4 | | Merged Row | Row Head 1 | Cell 1 | Cell 2 | Cell 3 | Cell 4 | | Row Head 2 | Cell 5 | Cell 6 | Cell 7 | Cell 8 | |
