Example 4-11. Spanning columns within a table header
<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This tabledemonstrates colspan"> <caption>Demonstrating colspan</caption> <tr> <th colspan=2">Header (spans 2 columns)</th> <th>Header (no span)</th> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> </tr> </table>
Figure 4-12 shows the results.
Figure 4-12. Spanning two columns with a table header.
Similarly, you can span table cells. In Example 4-12, the bottom table cell spans the entire row. Keep your hat onI know, the distinction between rowspan and colspan can get a little tricky. Just keep in mind that row spanning means spanning vertically, whereas column spanning means spanning along the horizon.
Example 4-12. Spanning three columns
<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table
You can see the results in Figure 4-13.
Figure 4-13. Spanning columns within a table cell.
QUANTUM LEAP
As you get more skilled in structuring tables, it becomes easy to see why tables for layout was such an obvious solution to creating a grid system upon which to design sites in the early days of the Web. You can see how adding graphics and text to table cells and removing any borders could create an effective design. Web designers who learned this technique first have had significant difficulty making the switch to pure CSS layouts, which work in a different way. The leap for you is to understand that although tables used for layout revolutionized web design, their problems as described in the intro to this tutorial outweigh the contemporary options we have with CSS to create amazing layouts that are highly accessible and usable.