Enhancing Table Presentation

---

Microsoft® Internet Explorer 5 gives the author more control over table presentation. Significantly faster rendering is now possible. Using this layout, authors can increase table rendering speeds by several orders of magnitude, particularly for longer, more complex tables.

Authors can also manipulate what table information reaches users, as well as when and how it is displayed. To this end, the author can now collapse rows and cells, render table content invisible, and join shared borders. These key features accord with the Cascading Style Sheets  specification, keeping Internet Explorer the leader in standards support.

This overview examines all of these new features and suggests how they may be combined with other techniques available for enhancing table presentation.

• Benefits
• Table Layout
• Collapsing or Hiding Rows and Cells
• Joining Borders
• Printing Tables on Multiple Pages
• Conclusion
• Related Topics

Benefits

Tables provide structured information to end users. Often, however, the amount of data overwhelms the user, or the type of information is simply not relevant. Internet Explorer solves these problems by enabling the author to show and hide information based on user actions or information gathered about the user's system.

Presentation is further improved by taking advantage of the new borderCollapse and tableLayout properties. Each of these properties adds performance gains to table rendering. With user patience usually measured in seconds, this speed is vital for delivering information to users before they move on to another page. Using the tableLayout property can easily halve the time for rendering of large tables. Faster rendering is possible with even larger tables.

Table Layout

Table rendering performance can be increased by specifying the tableLayout property. This property causes Internet Explorer to incrementally render the table, providing users with information at a faster pace. Using the tableLayout property, the layout of a table is determined in the following order:

1. From information in the width property for the COL or COLGROUP objects.
2. By analyzing the formatting of the first table row.
3. By an equal division of the columns.

First, information from the width property of the COL or COLGROUP object is used if it is available. If it is unavailable, then formatting for the first table row is taken into account. Lastly, if formatting is not available for the COL or COLGROUP objects, or the first table row, table layout is determined by an equal division of the columns.

Sample

The following example shows the use of the cascading style sheets (CSS) attribute, table-layout, to fix the table layout, resulting in faster rendering of the table. Note that the widths need not be set on the TABLE and COL objects. When the width is not specified, the browser looks to the contents of the first row's cells to fix the column widths and, consequently, the table width.

<TABLE STYLE="table-layout:fixed" WIDTH=600>
<COL WIDTH=100><COL WIDTH=300><COL WIDTH=200>
<TR HEIGHT=20>
<TD>...</TD><TD>...</TD><TD>...</TD>
</TR>
:
</TABLE>

The performance gains are significant, especially for large tables. Because the browser does not need to parse through the table once simply to lay it out, the table rows can start to render immediately. Click the button to view a demonstration of this rendering gain.

Take care in choosing the column width. Cell content that exceeds the width of the column is wrapped, if possible, or clipped if the content cannot be wrapped. If row height has been set, the wrapped text will be clipped where it exceeds the height restriction. If data sources are dynamically bound to the table through data binding, consideration of all the content that may appear is especially important.

Collapsing or Hiding Rows and Cells

Too much information can confuse or distract your readers. To aid your readers and improve their comprehension of important data, you can selectively show information or you can enable the user to selectively view information. A number of techniques are available to achieve this end.

Hiding the full table itself is the most basic means of hiding data. This full table hiding has been available to authors since Internet Explorer 4. Using the display property, the entire table may be hidden and its physical space eliminated in the layout. Choosing the visibility property, on the other hand, hides the table but preserves its space in the layout.

The display and visibility properties can be limited to rows and cells. Using the display property, rows can be collapsed out of view. If, instead, you desire the space occupied by the row or cell to show, but not the information, apply the visibility property. Changing the visibility through scripting is useful for showing and hiding overlapping content based on user interaction. Note that for a child element to be visible, the parent element must also be visible. For style scripting information, see Dynamic Styles.

Note that similar functionality is available through the data-binding filtering mechanism. Data binding may be a more appropriate choice where scalability is important. For more information, see Data Binding.

• Collapsing Rows
• Hiding Information in Rows or Cells
• Hiding Information in Multiple Rows

Collapsing Rows

Collapsing rows easily hides unimportant or irrelevant information from users.

Sample

The following sample uses function calls to hide and show table rows and cells. If the user is interested only in household pets, the display property on the rows that do not have household pets is set to "none" on the onclick event.

<SCRIPT>
function getPets() {
    tblChoice1.style.display="none";
    tblChoice2.style.display="";
    tblChoice3.style.display="none";
}
</SCRIPT>
:
<TABLE>
<TR ID="tblChoice1">
    <TD>Horses</TD><TD ID="tblChoice1_1">Thoroughbreds</TD><TD>Fast</TD>
</TR>
<TR ID="tblChoice2">
    <TD>Dogs</TD><TD ID="tblChoice2_1">Greyhounds</TD><TD>Fast</TD>
</TR>
<TR ID="tblChoice3">
    <TD>Marsupials</TD><TD ID="tblChoice3_1">Opossums</TD><TD>Slow</TD>
</TR>
</TABLE>
:
<INPUT TYPE=button onclick="getPets()" VALUE="Show household pets">

Note that the author may use inline scripting to achieve the same result by replacing the onclick call in the last line above with:

onclick = "tblChoice1.style.display= 'none';
    tblChoice2.style.display= ''; tblChoice3.style.display= 'none'"

Hiding Information in Rows and Cells

Visibility can be set on individual cells, groups of cells, rows, or tables to hide information while maintaining the physical space occupied by the data. The following sample uses function calls to hide and show table cells. For example, if the user is interested only in fast pets, the visibility property on the rows that do not have fast pets is set to "hidden" on the onclick event.

Sample

<SCRIPT>
function getFast() {
    tblChoice1_1.style.visibility="visible";
    tblChoice2_1.style.visibility="visible";
    tblChoice3_1.style.visibility="hidden";
}
</SCRIPT>
:
<TABLE>
<TR>
    <TD>Horses</TD><TD ID="tblChoice1_1">Thoroughbreds</TD><TD>Fast</TD>
</TR>
<TR>
    <TD>Dogs</TD><TD ID="tblChoice2_1">Greyhounds</TD><TD>Fast</TD>
</TR>
<TR>
    <TD>Marsupials</TD><TD ID="tblChoice3_1">Opossums</TD><TD>Slow</TD>
</TR>
</TABLE>
:
<INPUT TYPE=button onclick="getFast()" VALUE="Show fast pets">

Hiding Information in Multiple Rows

The display property can be set on groups of rows to hide information while maintaining the physical space occupied by the row. Using the TBODY object within the TABLE object, the author can specify the rows to which the display property is applied.

Sample

In the following example, the information contained between the TBODY objects is toggled depending on the user's choice.

<TABLE STYLE="table-layout:'fixed'">
<COL WIDTH=100><COL WIDTH=150><COL WIDTH=150>
<TR>
    <TD>EST</TD><TD>9:00 a.m.</TD><TD>5:00 p.m.</TD>
</TR>
<TBODY ID=tblTB_1>
<TR>
    <TD>CST</TD><TD>8:00 a.m.</TD><TD>4:00 p.m.</TD>
</TR>
</TBODY>
<TBODY ID=tblTB_2>
<TR>
    <TD>MST</TD><TD>7:00 a.m.</TD><TD>3:00 p.m.</TD>
</TR>
</TBODY>
<TR>
    <TD>PST</TD><TD>6:00 a.m.</TD><TD>D2:00 p.m.</TD>
</TR>
</TABLE>
<P>
:
<BUTTON onclick="tblTB_1.style.display='none';tblTB_2.style.display=''">
    Hide CST</BUTTON>
<BUTTON onclick="tblTB_1.style.display='';tblTB_2.style.display='none'">
    Hide MST</BUTTON>

The advantage here is in the coding: setting the visibility property on each row in a large table is cumbersome. Leveraging the TBODY object accomplishes this goal with less script.

Joining Borders

Authors can also collapse interior borders to keep a consistent width on all the borders in the table. Although borders should not overwhelm the data itself, traditional table rendering results in double-width borders between cells. Internet Explorer 5 allows you to maintain a consistent border width throughout the table.

Sample

The following example uses the border-collapse CSS attribute on the TABLE object, as shown in the following code. Alternately, the borderCollapse property could be used to script the same functionality.

<TABLE ID=id1 STYLE="border-collapse:collapse">
<TR><TD>EST</TD><TD>9:00 a.m.</TD></TR>
<TR><TD>CST</TD><TD>8:00 a.m.</TD></TR>
<TR><TD>PST</TD><TD>6:00 a.m.</TD></TR>
</TABLE>

Authors now can show tables emulating the thin border lines used in Microsoft® Excel, as shown in the following table (the collapsed borders will only be evident if you are using Internet Explorer 5).

EST	9:00 a.m.	5:00 p.m.
CST	8:00 a.m.	4:00 p.m.
PST	7:00 a.m.	2:00 p.m.

The look of the preceding table is achieved using the following embedded style sheet:

<STYLE>
    TD {border:'thin black solid'}
</STYLE>

The same table without collapsed borders (that is, in standard HTML) uses more space between the cells in order to render the detached borders.

EST	9:00 a.m.	5:00 p.m.
CST	8:00 a.m.	4:00 p.m.
PST	6:00 a.m.	2:00 p.m.

Not only do authors have a new choice between these two styles of borders, additional styles can be attached to either using the CSS border properties made available in Internet Explorer 4.0.

Printing Tables on Multiple Pages

When a page containing a table is printed, the CSS attributes page-break-before and page-break-after can be used to specify where in a table the break should occur. This is helpful for Web sites that implement large tables to organize pages. In addition, the display property exposes the table-header-group and table-footer-group possible values, which specify that the THEAD or TFOOT objects are always before or after any table rows. Using these possible values for the THEAD and TFOOT objects specifies that the header and footer will print on every page that a particular table spans.

Conclusion

With the Internet evolving into a repository of structured information, presenting data to users requires careful planning by page authors. Internet Explorer 5 gives you, the author, important new presentation tools to assist in this task.

Related Topics

• borderCollapse
• display
• tableLayout
• visibility