HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

---

NOTE: TYPE Not Supported on Internet Explorer 3

Internet Explorer 3 does not support TYPE attributes for LI elements inside UL, MENU, or DIR lists.

---

VALUE=“number” (optional; valid only inside OL lists) Sets the numeric counter for the current list item, where number is an integer. Thus VALUE=5 sets the current list item to be item number 5. Subsequent numbered items are incremented from this value. This attribute has no meaning inside UL lists.

Some example list items are shown in Figures 6.27 and 6.30.

Tables and Tabular Structures

The HTML TABLE element, and the elements allowed inside TABLE are used to define tables or other tabular structures. This first section gives an overview of the table model and introduces some of the basic elements. The next two sections describe additional details and features, as well as more advanced aspects of the table specification.

The design of HTML TABLE s will be familiar to those who have used tabular environments in typesetting languages such as LaTeX. A table is defined as a collection of cells, where a cell is simply an item (a box) within the table. For regular tables, the content of a cell might be a number, a word, or a small image. However, the HTML table model allows paragraphs, headings, blockquotes, and even other tables within a table cell, so that TABLE is not limited to describing ordinary tabular structures. Indeed, TABLE is commonly used to create multicolumn text, sidebar notes within multi-column tables, and so on. Some examples of these uses are illustrated in the next few paragraphs.

Individual table cells are specified using the TD (table data) and TH (table header) elements, which contain the contents of a cell. Cells are, in turn, organized into rows, each row defined by a TR (table row) element—a table row can contain any number of TD and TH elements. However, the TD and TH cells in every row of a given table must sum to the same number of columns, otherwise the table will not align vertically. Thus, if the first row contains two TD and two TH elements (by default, each cell spans one column), then every other row in the table must also contain cells that span four columns.

Finally, a table can take an optional caption, via the CAPTION element.

The following small, captioned table has four rows, each row containing three cells, each cell spanning one column. This table is shown in Figures 6.31 and 6.32.

<TABLE BORDER>
<CAPTION>Here is the caption to this exciting table</CAPTION>
  <TR>  <th> Heading 1 </th>  <th> Heading 2 </th>   <th> Heading 3</th>
</TR>
  <TR>  <td> item 1    </td>  <td> item 2    </td>   <td> item 3   </td>
</TR>
  <TR>  <td> item 4    </td>  <td> item 5    </td>   <td> item 6   </td>
</TR>
  <TR>  <td> item 7    </td>  <td> item 8    </td>   <td> item 9   </td>
</TR>
</TABLE>

Note how each row contains three cells, defined either by TH header or TD data cells. In this example the first row contains the three headings, while subsequent rows contain data.

Multirow or Multicolumn Table Cells

Tables are made somewhat more interesting by letting a TH or TD cell occupy more than one row or column. This is accomplished through two special attributes. The ROWSPAN attribute specifies how many rows are occupied by a cell, counting down from the cell, while the COLSPAN attribute specifies how many columns are occupied by a cell, counting to the right. A multicolumn or multirow cell means that some TR row definitions will contain fewer TD or TH items in the row than you might expect, since some of the cells are occupied by the cell “hanging down” from the row above or pushing over from the cell to the left. It is the table designer’s responsibility to make sure that all the items in a row sum to the correct number of columns.

The use of ROWSPAN and COLSPAN is shown in the following markup (the table cell tags are highlighted in boldface) and is also illustrated in Figures 6.31 and 6.32.

<TABLE BORDER>
<TR>
    <TH COLSPAN=“2”> Heading 1                 </TH>    <TH> Heading
3</TH>
</TR>
<TR>
    <TD ROWSPAN=“2”> item 1 </TD> <TD> item 2 </TD>  <TD> item 3
</TD>
</TR>
<TR>
				    <TD> item 4 </TD>  <TD> item 5  
</TD>
</TR>
<TR>
    <TD> item 6            </TD> <TD> item 7 </TD>  <TD> item 8 
</TD>
</TR>
<TR>
    <TD> item 9            </TD>  <TD ROWSPAN=2 COLSPAN=2> item 10  
</TD>
</TR>
<TR>
    <TD> item 1            </TD>
</TR>
<TR>
    <TD COLSPAN=3> a big wide item 11
</TD>
</TR>
</TABLE>

The first row indicates that this table has three columns; the first TH cell spans two of these columns, so that there are only two TH elements in this row. The second row contains the required three cells, but the ROWSPAN=“2” attribute in the first cell indicates that this cell spans two rows and, hence, hangs down into the next row. Consequently, there are only two cells declared in the third row, since the first column is occupied by the cell that started in the preceding row.

The fourth row is a regular row with three single-column and single-row cells. The fifth row, however, contains only two cells; the second of these occupies two rows and two columns. Consequently, the sixth row contains only one cell, as the second and third columns are occupied by the two-column-wide cell hanging down from row 5. Finally, the last row contains a single cell that spans the entire table (COLSPAN=“3”).

<HTML><HEAD>
<TITLE> HTML TABLEs </TITLE>
</HEAD><BODY>

<H2 ALIGN=“center”> HTML Tables</H2>
<P> The following two examples look at basic HTML tables.
<H3> First Example -- A Simple Table </H3>
<TABLE BORDER>
 <TR>  <TH> Heading 1 </TH>  <TH> Heading 2 </TH>  <TH> Heading 3 </TH>
</TR>
 <TR>  <TD> item 1    </TD>  <TD> item 2    </TD>   <TD> item 3   </TD>
</TR>
 <TR>  <TD> item 4    </TD>  <TD> item 5    </TD>   <TD> item 6   </TD> 
</TR>
 <TR>  <TD> item 7    </TD>  <TD> item 8    </TD>   <TD> item 9   </TD> 
</TR>
</TABLE>
<HR NOSHADE>
<H3>Second Example with COLSPAN and ROWSPAN </H3>

<TABLE BORDER ALIGN=“right”>
<CAPTION>Here is the caption to this exciting table</CAPTION>
 <TR>  <TH COLSPAN=2> Heading 1                 </TH>  <TH> Heading 3</TH> 
</TR>
 <TR>  <TD ROWSPAN=2> item 1</TD>  <TD> item 2  </TD>  <TD> item 3   </TD> 
</TR>
 <TR>                          <TD> item 4  </TD>  <TD> item 5   </TD> 
</TR>
 <TR>  <TD> item 6          </TD>  <TD> item 7  </TD>  <TD> item 8   </TD> 
</TR>
 <TR>  <TD> item 9          </TD>  <TD ROWSPAN=2 COLSPAN=2> item 10  </TD> 
</TR>
 <TR>  <TD> item 1          </TD>           
</TR>
 <TR>  <TD COLSPAN=3> a big wide item 11  </TD>  
</TR>
</TABLE>
</BODY></HTML>

Figure 6.32  Display, by the Internet Explorer 3 browser, of the document shown in Figure 6.31.