HTML and CSS [Electronic resources] نسخه متنی

Spanning Columns

Just as you can span rows, you can span columns. You use the colspan attribute in table header or table cells (see Example 4-11).

Example 4-11. Spanning columns within a table header

<table width="90%" border="1" cellspacing="5" cellpadding="5" summary="This table
 demonstrates 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.

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
 demonstrates 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 colspan="3">data (spans 3 columns)</td>
</tr>
</table>

You can see the results in Figure 4-13.

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 chapter outweigh the contemporary options we have with CSS to create amazing layouts that are highly accessible and usable.