Inside Technique : Styling in IE5 : Tables, Tables, Tables

Tables get a big speed boost with IE 5. IE 5 supports two new CSS2 table related properties: table-layout and border-collapse. The table-layout attribute greatly increases the parsing and display performance of tables. When you create a fixed table layout, you are fixing the column widths and optionally the column heights for the entire table. This allows the table to be progressively rendered on the screen. Since traditional tables automatically size cells to the contents, they need to be completely parsed to calculate the cells size. This causes large traditional tables to be very slow.

If you are using a table for layout or where you are defining explicit table widths, you should always specify the CSS table-layout property. By setting this property to fixed, the browser does not need to calculate the width of the cells. Supllying this property has no effect on existing browsers, as they will render the table as they always have.

For even more speed, you can also set the height of the cells. However, set the height with care because if the contents do not fit, they will be clipped.

Absolute Cell Sizes

If you are running IE 5, below demonstrates the effect of using fixed layout tables and setting the width and height of a cell to be smaller than the contents. Notice how the contents become clipped. In a non-fixed table (or as being displayed by non IE-5 browsers), the cells would automatically resize to the contents. Therefore, care needs to be taken when specifying both the fixed width and a fixed height to ensure the contents will fit, especially at different resolutions.

Below is the table using table-layout: fixed. Following the table is the HTML we used to create this example. Notice how we are specifying a width for each column. If you create a fixed layout table, and do not specify a column width, each column is sized the same to fill the width of the table. To clip the rows, we are also specifying a small row height.

Cell 1	Cell 2	Cell 3
Cell 1b	Cell 2b	Cell 3b

<STYLE>
<!--
  #fixed COL {width: 70pt}
  #fixed TR {height: 8pt}
-->
</STYLE>
<TABLE ID=fixed STYLE="table-layout: fixed">
<COL><COL><COL>
<TR><TD>Cell 1</TD><TD>Cell 2</TD><TD>Cell 3</TD></TR>
<TR><TD>Cell 1b</TD><TD>Cell 2b</TD><TD>Cell 3b</TD></TR>
</TABLE>

Below is the same table without the table-layout: fixed property:

Cell 1	Cell 2	Cell 3
Cell 1b	Cell 2b	Cell 3b

In general, table-layout: fixed is a great way to greatly improve your pages performance, especially anywhere you use a large table. We plan to walk through all our pages with tables and add this property. Except for IE5 users who will get faster performance, this change will have no effect on any existing browser.

Collapsing Borders

Internet Explorer 5.0 gives you greater control over your table borders. Table borders have been traditionally rendered with individual borders around each cell. By using the CSS-2 Border-Collapse property, you can force cell boundaries to collapse together very much like the rendering of a spreadsheets grid. Adding collapsed border's is as simple as specifying the CSS-2 border-collapse property on your table.

<STYLE>
  TABLE {border-collapse: collapse}
  TABLE TD {border: thin black solid}
</STYLE>

If you are running Internet Explorer 5.0 you can turn on and off the collapsed borders on the following two tables. In all other browsers that support CSS, you are seeing tables with the default borders. Non-CSS enabled browsers, including Navigator 4.0 (CSS borders are not supported on tables) are just seeing tables without the border.

Cell Cell Cell Cell Cell Cell Cell

Cell Cell Cell Cell Cell Cell Cell

This concludes our introduction to the new CSS features we found in IE 5.0. Beyond CSS, IE5 includes a number of improvements in the object model that simplifies working with dynamic styles, including a way to find the current style of any element. For those who want to experiment, use your favorite scripting language and examine the currentStyle property on any element. For next week, we are going to try and put together an article explaining how to effectively use this property.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.