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.
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 |
|||||
|
|||||
|
<table border="1"> <tr> <td>Cell 1</td> <td rowspan="2">Rowspan</td> <td>Cell 3</td> </tr> <tr> <td>Cell 2</td> <td>Cell 4</td> </tr> </table> |
In addition you can also span columns, as shown in the example below.
|
COLSPAN |
|||||||||
|
|||||||||
|
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td colspan="3">Colspan</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> |
|||||||||
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 |
|||||||
|
|||||||
|
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td rowspan="3">Rowspan</td> </tr> <tr> <td colspan="2">Colspan</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> |
|||||||
You can put headers on a table, as shown below. Notice how the <TH> and </TH> are used instead of the <TD> and </TD> tags.
|
Adding table headers |
|||||||||
|
|||||||||
|
<table border="1"> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> |
You might want a header to span multiple columns. The technique is shown in the example below.
|
Adding table headers with COLSPAN |
|||||||||
|
|||||||||
|
<table border="1"> <tr> <th>Head 1</th> <th colspan="2">Head 2</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> |
|||||||||
You can also put headers on rows, as shown below.
|
Adding table headers to the rows |
|||||||||
|
|||||||||
|
<table border="1"> <tr> <th>Head 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th>Head 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <th>Head 3</th> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> |
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 |
||||||||
|
||||||||
|
<table border="1"> <tr> <th>Head 1</th> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <th rowspan="2">Head 2</th> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> </tr> </table> |
Now to get a little more fancy.
|
Adding multiple headers to the columns |
||||||||||||||||
|
||||||||||||||||
|
<table border="1"> <tr> <th colspan="2">Top 1</th> <th colspan="2">Top 2</th> </tr> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> </table> |
||||||||||||||||
Now to get a lot more fancy.
|
Adding multiple headers to the columns and rows |
|||||||||||||||||||||
|
|||||||||||||||||||||
|
<table border="1"> <tr> <th colspan="2" rowspan="2"></th> <th colspan="2">Top 1</th> <th colspan="2">Top 2</th> </tr> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> </tr> <tr> <th rowspan="2">Merged Row</th> <th>Row Head 1</th> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> <th>Row Head 2</th> <td>Cell 5</td> <td>Cell 6</td> <td>Cell 7</td> <td>Cell 8</td> </tr> </table> |
|||||||||||||||||||||
Unless otherwise noted, all photos and text is Copyright © Richard G Lowe, Jr.