Trials and Tabulations
Splitting Up Tables Continued
|
| ||||
| ||||
|
|
Row and Column Spans, Empty Cells
Sometimes a simple grid is not sufficient to display data in the table, and you might want cells that span more than one row or column. Also, you might want certain cells in your table to be skipped completely.
The first problem is addressed by the COLSPAN and ROWSPAN attributes to table cells. These attributes have a default value of 1 and indicate how many rows or columns a cell occupies.
You an also leave cells empty. If a cell has no contents except white space, it is not rendered at all, but space is allocated for it on the table. In this case it is called an empty cell. Also, if a row has fewer cells than the table has columns, the remainder of the row is filled with empty cells. The following table illustrates this. I've used the BORDER attribute, which we'll discuss later, to make the edges of table cells more obvious; don't worry about it just yet.
<TABLE BORDER> <TR> <TD COLSPAN=2>I span two columns</TD> <TD>I'm plain</TD> </TR> <TR> <TD>I'm plain</TD> <TD ROWSPAN=3 COLSPAN=2>I span 3 rows and two columns</TD> </TR> <TR> <TD></TD> </TR> <TR> <TD>I'm plain</TD> </TR> <TR> <TD>I'm plain</TD> <TD>I'm plain</TD> </TR> </TABLE>
| I span two columns | I'm plain |
| I'm plain | I span 3 rows and two columns |
| I'm plain | I'm plain | I'm plain |
Row Groups
Just like columns can be grouped, so can rows. Each table can have one table header, one table footer, and one or more table bodies, represented by the THEAD, TFOOT and TBODY elements respectively.
Normally, the order that these are given in the document is first THEAD, then TFOOT and then the various TBODY's. Here's our table, with row groups:
<TABLE> <THEAD> <TR> <TD>Day</TD><TD>Month</TD><TD>Year</TD> <TD>Arnold</TD><TD>Bob</TD><TD>Carla</TD><TD>Daphne</TD><TD>Eric</TD> <TD>Total</TD><TD>Change</TD> </TR> </THEAD> <TFOOT> <TR> <TD COLSPAN=3>Total</TD> <TD>60</TD><TD>104</TD><TD>20</TD><TD>242</TD><TD>7</TD> <TD>453</TD> </TR> </TFOOT> <TBODY> <TR> <TD>16</TD><TD>January</TD><TD>1999</TD> <TD>34</TD><TD>56</TD><TD>12</TD><TD>144</TD><TD>5</TD> <TD>251</TD><TD>+27</TD> </TR> <TR> <TD>17</TD><TD>January</TD><TD>1999</TD> <TD>26</TD><TD>48</TD><TD>8</TD><TD>98</TD><TD>2</TD> <TD>182</TD><TD>-69</TD> </TR> </TBODY> </TABLE>
The above example will also crash some Navigator 4 versions if combined with CSS, so I've moved it to a separate page. Users of Internet Explorer 4.0 will see the table footer at the end of the table, where it's supposed to be. Navigator ignores row groups, so displays table rows in the order that they are specified. A table footer should be before the actual data in the table becuase it can be displayed even before all the data in the table is downloaded, since there might be hundreds of rows in the table. In practice, it is a good idea to put the footer at the end of the table so that browsers that don't support row groups (which includes earlier versions of Internet Explorer) display the table correctly.
