Splitting Up Tables Continued - Trials and Tabulations - HTML with Style

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>

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.

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial11/4.html
Created: Feb 10, 1998
Revised: Feb 16, 1999