Tables are great for visual distribution of text and graphics. This page has tips on using tables in HTML.

• Table Attributes
  • Summary
  • Align
  • Spacing and Padding
  • Frames and Rules
• Table and Cell Attributes
  • Colors

  • Width

• Alternatives to Tables

You may also want to see keyboard shortcuts specific to tables as used in Microsoft FrontPage.

Table Attributes

Summary

The SUMMARY attribute of the <table> tag summarizes the tables purpose, content, and structure. Non-visual browsers render the summary into speech or Braille. A briefer description can be specified by the <caption> tag.

<table border="1"
       width="70%"
       summary="This table merely demonstrates the SUMMARY attribute of the TABLE tag.">
    <caption>Example For SUMMARY attribute</caption>
    <tr>
        <td width="50%">&nbsp;</td>
        <td width="50%">&nbsp;</td>
    </tr>
</table>

Align

The ALIGN attribute is deprecated but specifies either left (the default), center, or right.

Spacing and Padding

• The BORDER attribute specifies the thickness of the outermost sides of the table in pixels. Note that a border of zero also eliminates rules. The border usually matches the color and other properties of the object containing the table.
• The CELLPADDING attribute indicates the pixels between the margin and its contents. It usually matches the color and other properties of the cell.
• The CELLSPACING attribute indicates the pixels between the edges of adjacent cells.

Frames and Rules

Table frames and rules are set with attributes of the <table> tag.

• The FRAME attribute specifies which of the outermost sides of the table are visible. The possible values are: void (the default), above, below, hsides, vsides, lhs, rhs, box, and border. Note that "box" and "border" are equivalent.
• The RULES attribute specifies which of the inner sides of the table are visible. The possible values are: none, groups (rules will show between <thead>, <tbody>, <tbody>, and <colgroup> cells), rows, cols, and all. Note that the HTML spec say that "none" is the default but it my tests, "all" is the default.

This is a 3x3 table with the top row merged, but it is showing only the left and right sides of the frame, and only the horizontal rules:

Table and Cell Attributes

Colors

Background and border colors may be set for the entire table and/or for individual cells.

In this example, the entire table background is set to a gray:

In this example, different cells are modified. Note that the BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK attributes of the <td> tag are not part of the HTML specifications but are supported by MS FrontPage and Internet Explorer.

Width

The WIDTH attribute specifies pixels (eg "100") or percentage (eg "80%"). The default is "100%".

Dynamic tables have dimensions set in percentage of its container. Dynamic tables are especially good for text. The following table dynamically adjusts to the user's browser size:

Watch your table width carefully when you set them in lists or within other tables. When the width of an object in HTML is set in percentage, it is a percentage relative to the object immediately containing the object. The container may be the browser window, a frameset, or a cell of another table.

In this example, the tables are set at 100% width (of the browser). However some browsers may not realize that because it is part of a <blockquote> (or a list), its left end starts a bit further to the right, thus the right end of the table may disappear:

The right end may disappear.

• The right end may disappear.

Fixed tables have dimensions set in pixels. Fixed tables are especially good for relatively precise graphical arrangement. The following table remains a fixed size regardless of the user's browser size:

500 pixels
100 pixels	300 pixels	100 pixels

Fixed and dynamic cells may be combined within a table. In the following table, the cells on the end are fixed and only the center cell dynamically changes in size depending on the user's browser size:

Tables may be nested. Typically the outer table is used for formatting the display and the inner table is for showing some data. EG: The outer table is used to make a central column.

This table has cells, each of which is 25% of the browser width:

Inside the above table I have placed an inner table. The inner table has cells, each of which is 33% of the cell enclosing the entire inner table, i.e. each of its cells is 25% divided by 3 or 8.3% of the browser width.

Alternatives to Tables

• CSS
• Lists
• Images
• Preformatted text
• A table located on another page