Controlling Tables with CSS | Dynamic HTML in Action

In the CSS level-2 specification are two new table-specific attributes, border-collapse and table-layout. Though supported by Microsoft Internet Explorer 5, these attributes are not supported by Internet Explorer 4 or Netscape Navigator.

The border-collapse Attribute

The border-collapse CSS attribute allows finer table borders than ever. This attribute accepts only two values, collapse and separate. A value of separate is the default and causes the table to display as normal. Code Listing 14-1 demonstrates this attribute, and Figure 14-1 displays the results.

Code Listing 14-1.

 <HTML> <HEAD> <TITLE>Listing 14-1</TITLE> </HEAD> <BODY> This is a standard table, with BORDER="1". <TABLE BORDER="1">   <TR>     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR>   <TR>     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR> </TABLE> <P> This is a standard table, with BORDER="1" and CELLSPACING="0". <TABLE BORDER="1" CELLSPACING="0">   <TR>     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR>   <TR>     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR> </TABLE> <P> This table also has BORDER="1", and has the CSS attribute  border-collapse set to collapse. <TABLE STYLE="border-collapse:collapse" BORDER="1">   <TR>     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR>   <TR>     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR> </TABLE> </BODY> </HTML>

click to view at full size.

Figure 14-1. Using border-collapse to collapse a table's border.

The first table in Figure 14-1 is a conventional table with BORDER="1". Every cell has a border, and there is a border around the entire table. Cells are separated from each other and the outside border by the default of 2 pixels. The second table has the CELLSPACING attribute set to 0, so no space is allowed between neighboring cell borders. However, this creates the appearance of a 2-pixel thick border around each cell, since each cell has its own 1-pixel thick border. In the third table, the border-collapse attribute is set to collapse. With this attribute, both the space between borders and the borders themselves are shrunk, separating each cell from its neighbors by only a 1-pixel thick border. These collapsed borders approximate those found in many other types of programs, such as Microsoft Excel and Microsoft Access.

The table-layout Attribute

The table-layout CSS attribute was designed to address some performance concerns with displaying tables in a browser. A feature of conventional tables is that they conform to their contents. For example, if a particular cell contains a wide entry, the width of the entire column expands to the width of the widest entry. One drawback to this feature is that before the table can be displayed, the entire table must first be read in so that the widest cell can be determined. When table-layout is fixed, you can enter an arbitrary width for all the cells in the table, regardless of their contents. This feature can greatly increase rendering performance, especially when working with large tables. Code Listing 14-2 demonstrates the use of this attribute in combination with the height and width attributes.

Code Listing 14-2.

 <HTML> <HEAD> <TITLE>Listing 14-2</TITLE> </HEAD> <BODY> This is a standard table. <TABLE BORDER="1">   <COL WIDTH="50"><COL WIDTH="50"><COL WIDTH="200">   <TR HEIGHT="20">     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR>   <TR HEIGHT="20">     <TD>Wider Column</TD><TD>Information</TD><TD>Information</TD>   </TR> </TABLE> <P> This is the same table, but with table-layout set to fixed. <TABLE BORDER="1" STYLE="table-layout:fixed">   <COL WIDTH="50"><COL WIDTH="50"><COL WIDTH="200">   <TR HEIGHT="20">     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR>   <TR HEIGHT="20">     <TD>Wider Column</TD><TD>Information</TD><TD>Information</TD>   </TR> </TABLE> <P> This is the same table, with table-layout set to fixed and row height removed. <TABLE BORDER="1" STYLE="table-layout:fixed">   <COL WIDTH="50"><COL WIDTH="50"><COL WIDTH="200">   <TR>     <TD>Information</TD><TD>Information</TD><TD>Information</TD>   </TR>   <TR>     <TD>Wider Column</TD><TD>Information</TD><TD>Information</TD>   </TR> </TABLE> </BODY> </HTML>

click to view at full size.

Figure 14-2. Using a table-layout of fixed to control the layout of a table.

Figure 14-2 displays three tables. Each of the tables contains the same data. The first is a conventional table that uses COL elements to set the width of the first two columns at 50 pixels and the third at 200 pixels. Because 50 pixels is not wide enough to hold the entire word "Information," the cells expand to fit the text. Each row in the table has a specified height tall enough to hold one line of text. However, because the second row contains a cell with two lines of text, all three cells in the second row expand vertically.

The second table has its table-layout attribute set to fixed. A fixed value causes the table to accept the width and height specified in the COL and TR elements, regardless of the cells' contents. Any lines too wide for a cell are either wrapped or truncated, and any content too tall for a cell is truncated.

The third table is exactly like the second, except that the rows do not have a height specified. This means that the contents of a cell can expand vertically but not horizontally.

This particular table is not sufficiently large to notice any improvements in performance, but it does demonstrate the absolute nature of the cell dimensions. LrgTable.htm in the chap14 folder on the companion CD demonstrates the significant speed differences between two tables, one of which uses a table-layout of fixed, and one that does not specify any table-layout.