Building a Simple Table - HTML5 - page 130

workinG wiTH rows and coLuMns

You've seen how a basic table conforming to a simple grid is created in HTML. But how do you
extend a header over two columns or two rows? Two attributes — colspan for columns and
rowspan for rows — are used to create more complex table structures. Both attributes are used
with either the <td> or <th> tags. Because the content in a spanned cell is most frequently a heading
of some kind, the <th> tag and corresponding attribute are most often combined.

The colspan and rowspan attributes both take numeric values to define how many columns or rows
will be spanned, respectively. For example, if I wanted to create a table that had two headers, each
of which spanned two of the four columns, my code would look like this:
<table>
<tr>
<th colspan=”2”>Atlantic Division</th>
<th colspan=”2”>Pacific Division</th>
</tr>
<tr>
<td>New York</td>
<td>Boston</td>
<td>San Francisco</td>
<td>Los Angeles</td>
</tr>
</table>

When rendered in the browser, the headers
are centered over the spanned columns as
shown in Figure 16-4. To better show the
spanning and centering, I added a CSS rule
to give the table a width of 300 pixels as
well as another to create the outlining
borders.

Implementing the rowspan attribute
requires a different table configuration
than what's needed for colspan :
<table>
<tr>
<th rowspan=”2”>Atlantic Division</th>
<td>New York</td>
</tr>
<tr>
<td>Boston</td>
</tr>
<tr>
<th rowspan=”2”>Pacific Division</th>
<td>San Francisco</td>
</tr>
<tr>
<td>Los Angeles</td>
</tr>
</table>

FiGure 16-4