<TD> Property Pages Dialog Box

Use this property page to customize the appearance of individual table cells in an HTML document. To display the <TD> Property Pages dialog box, select a table cell in Design view, or open the Document Outline window and select the desired <TD> element, or place the insertion point within the desired <TD> element in HTML view, and then choose Property Pages from the View menu.

• Background color
  Provides a list of background colors for the selected <td> element. If you select blue, for example, the following attribute is added to the <TABLE> element: bgColor="blue". Click the adjacent ellipse (...) button to display the Color Picker and choose from additional colors. For more information on choosing colors, see Color Picker Dialog Box. To set the background color of the entire table, use the <TABLE> Property Pages dialog box.

• Alignment
  Specifies how the text in a cell is aligned with its border. To change or remove the alignment option for individual cells, place the insertion point in the cell in Design View, open the <TD> Property Pages dialog box, and change the values in the Horizontal Alignment and Vertical Alignment fields. When you specify an alignment option, the appropriate value is added to within the selected <TD> element.

• Horizontal
  Specifies the horizontal alignment of the content within the selected <TD> element. The options are:

  Option	Alignment
  Center	Cell contents are centered horizontally in the cell. Adds align=middle to the <TD> element.
  Left	Cell contents are flush with the left border. Adds align=left to the <TD> element.
  Right	Cell contents are flush with the right border. Adds align=right to the <TD> element.

• Vertical
  Specifies the horizontal alignment of the content within the selected <TD> element. The options are:

  Option	Alignment
  Baseline	Aligns the first line of text in cells assigned this value on a baseline common to all cells in the row. This constraint does not apply to subsequent text lines in these cells. Adds vAlign="baseline" to the <TD> element.
  Bottom	Aligns cell contents with the bottom of the cell. Adds vAlign="bottom" to the <TD> element.
  Middle	Aligns cell contents with the middle of the cell. Adds vAlign="middle" to the <TD> element.
  Top	Aligns cell contents with the top of the cell. Adds vAlign="top" to the <TD> element.

Dimensions

• Height
  Indicates the minimum height of the cell in pixels. For example, if you enter 10 in the Height field, height=10 is added to the <TD> element.
• Width
  Sets the width of the cell. Choose a unit (percent or pixel) for width in the adjacent list. For example, if you enter 10 in the width field and select percent in the unit option field, width="10%" is added to the <TD> element.

Span

• Columns
  Specifies the number of columns that the cell extends across the table. For example, if you enter 2 in the Columns Span field, colSpan=2 is added to the <TD> element. As a result, the cell spans from the current column and across the adjacent cell to its right.
• Rows
  Sets the number of rows that the cell extends down in the table. For example, if you enter 2 in the Rows Span field, rowSpan=2 is added to the <TD> element. As a result, the cell spans from the current row down across the adjacent cell below.

Borders

• Color
  Specifies a solid border color for the cell. Select a color name from the list, or choose a color from the Color Picker dialog box. If Highlight and Shadow are set, the Color setting is ignored.

  Note   To enable border color, highlight, and shadow, you must set the targetSchema property of your HTML document to "Internet Explorer 5.0."

• Highlight
  Sets the color for the bottom and right sides of the cell. Select a color from the list, or choose a color from the Color Picker dialog box. Use this option with the Shadow option to create the appearance of a three-dimensional table cell.

• Shadow
  Sets the color for the top and left sides of the cell. Select a color from the list, or choose a color from the Color Picker dialog box. Use this option with the Highlight option to create the appearance of a three-dimensional table cell.

  Note   Use a light color for Highlight and a dark color for Shadow to maximize the three-dimensional appearance.

• Wrap text
  Specifies whether text is wrapped within a cell's borders. When selected, the browser automatically displays cell text on multiple lines to maintain the desired cell width. If this check box is cleared, a noWrap attribute is inserted into the selected <TD> element, to force all text in the cell to appear on the same line.

  Note   The noWrap attribute has been deprecated by the World-Wide-Web consortium.

See Also

HTML Markup: TABLE Element, table Object | TR Element, tr Object | TD Element, td Object | DHTML References

HTML Designer: Editing HTML Pages in Design View | Document Outline Window | Editing HTML | Insert Table Dialog Box | Creating and Editing HTML Tables in Design View | Edges, Style Builder Dialog Box | How to Build Tables Dynamically