Working with Colspans and Rowspans
| Colspans and rowspans are the bane of layout tables, because they cause all sorts of strange breakage problems. These attributes come in handy for data tables, though, because that's what the people who dreamed up HTML designed colspans and rowspans for. Technically speaking, the colspan attribute determines how many columns a particular table cell spans or straddles, while the rowspan attribute determines the number of spanned rows. The best way to understand how colspans and rowspans work is to look at an example, which Figure 56.2 provides. Figure 56.2. This data table uses the colspan and rowspan attributes.
Listing 56.2. View Source for Figure 56.2.[View full width] <table border="1"> <caption>Table 2. Color Transformations in Table Borders after Exposure to the Kenneth As you can see from the Listing 56.2, the colspan and rowspan attributes appear in the tag for the table cell, either th or td, depending on whether you need a header cell or a regular cell to span. The values of these attributes determine the number of columns or rows to span. You'll notice that a row that includes a colspanned or rowspanned cell seems to be missing some markup. For example, in the first row of the data table in Figure 56.2, you find three table cells: <tr> <th> </th> <th> </th> <th colspan="2">Border Color</th> </tr>
The very next row has four table cells: <tr> <th> </th> <th>x</th> <th>Before</th> <th>After</th> </tr> The missing code in the first row is perfectly normal. In fact, this is the way it needs to be. The table cell with the colspan of 2 counts as two cells, not one, in which case both rows have four table cells after all. Another point of note: The colgroup tags at the top of the table show the following structure: <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> The spans of the colgroup tags add up to four columns, not three, even though there seem to be three columns in the very first row of the table. Once again, you have to count the cell with the colspan of 2 as two columns, not one, so the math does add up. The colgroup tags describe four table columns, and there are indeed four columns in that section of the table. |
Frequency</caption> <colgroup span="2" style="width: 100px;"></colgroup> <colgroup span="2" style="width: 150px; text-align: center;"></colgroup> <!-- The head element contains two table rows here. A few of the cells contain nonbreaking 