The Parts of a Table

Tables are made up of rows and columns, which in turn contain cells. That is the general idea, but in practice, tables can be more complex. For example, some cells can be in two or more columns at the same time. Here is an HTML table with a style sheet that makes the boundaries of the cells visible by means of a simple border (see Figure 17.1).

Figure 17.1. A small table. Cell 4 spans two columns.

 <TABLE>   <TR><TD>1  <TD>2 <TD>3   <TR><TD COLSPAN=2>4 <TD>5 </TABLE> 

with style:

 TABLE {border-collapse: collapse} TD {border: solid} 

We'll explain why we need collapse in the next section.

The HTML table model, which is the basis for CSS's table model, is actually quite complex, if all parts are considered. But luckily, most tables are simple and need only a small part of the full model.

The essential parts of any table, the parts that cannot be omitted in HTML, are the table itself (the box that contains all the rows and cells), the rows, and the cells. The rows are boxes inside the table, and the cells are boxes inside the rows. The complication that cells can span several rows is handled by saying that a cell box can actually extend outside the row box.

Here is a table in which the row boxes are made visible by giving them each a different background. The cells are shown the same way as before, with a border (see Figure 17.2):

 <TABLE>   <TR CLASS=r1><TD> 1 <TD> 2 <TD ROWSPAN=2> 3   <TR CLASS=r2><TD COLSPAN=2> 4   <TR CLASS=r3><TD> 5 <TD> 6 <TD> 7 </TABLE> 

Figure 17.2. A table with differently colored rows.

and the style:

 TABLE {border-collapse: collapse} TD {border: solid} TR.r1 {background: #F99} TR.r2 {background: #9F9} TR.r3 {background: #99F} 

There are a number of optional parts in a table, which are needed for more complex tables. The caption is one. It is typically one or a few lines of text above or below the table.

Rows can also be grouped into row groups, which puts all of them into a box and allows them to be visually distinguished as a group. There are three kinds of row groups: the ordinary group, of which there can be as many as desired; the table head, of which there can be at most one; and the table foot, which can also only be used once per table. The latter two behave in a special way: A table head group, if present, is always shown above any other rows, and a foot is always shown after any other rows. Furthermore, if a table is so large that it is broken among several pages, the head and foot are repeated on each page.

Figure 17.3 shows an example of a table with three row groups, visually delimited by a thick line between them. The style sheet is

 TBODY {border-bottom: thick; border-top: thick} 

Figure 17.3. A table with three row groups.

and the HTML source

 <TABLE>   <TBODY CLASS=nov>     <TR><TH>1-10 <TD> 45 <TD> 67 <TD> 34     <TR><TH>11-20 <TD> 54 <TD> 76 <TD> 43     <TR><TH>21-30 <TD> 57 <TD> 78 <TD> 23   <TBODY CLASS=dec>     <TR><TH>1-10 <TD> 57 <TD> 67 <TD>84     <TR><TH>11-20 <TD> 75 <TD> 56 <TD>85     <TR><TH>21-31 <TD> 75 <TD> 91 <TD>48   <TBODY CLASS=jan>     <TR><TH>1-10 <TD> 72 <TD> 64 <TD>85     <TR><TH>11-20 <TD> 35 <TD> 63 <TD>87     <TR><TH>21-31 <TD> 71 <TD> 19 <TD>38 <TABLE> 

Tables can also have column and column group elements, which the style sheet can use to visually distinguish columns. The next section shows an example of a table with all the optional parts. We'll use it to explain the collapsing borders model.