Speeding up Table Display

Although tables are extremely powerful, they can be very slow to appear in your visitor's browser. The major factor is that the browser must calculate the width and height of the table before it can begin to display the cells. So, if you can keep the browser's calculations to a minimum, the table will appear more quickly and your visitors may actually wait to see it.

To speed up table display:

• Keep tables as small as possible. Where you can, divide large tables into smaller ones.

• Specify the width of the table in pixels (see page 232).

• Use absolute values (in pixels) or percentages for determining cell width.

• Only specify proportional widths for cells, columns, and horizontal sections when you've already set a fixed width in pixels for the entire table.

• Divide your table into column groups.

• Add table-layout:fixed to your table element's style rule (Figure 16.68). This instructs browsers to look only at the first row of a table in order to determine the widths of the columns, instead of worrying about every cell in every row. While the contents of some cells may not fit (their display is governed by the overflow propertysee page 187), the table renders more quickly.

  Figure 16.68. The table-layout property with a value of fixed helps tables render more quickly. It is useful for tables whose cells are regular in size.