Share via

<TABLE> Property Pages Dialog Box

  • Article

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

  • Background color
    Provides a list of background colors for the entire table. 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 a particular cell, use the <TD> Property Pages dialog box.

  • Background image
    Specifies a graphics file (.gif, .jpg, or .jpeg) that appears tiled behind the table. To enable this property, you must set the targetSchema property of your HTML document to a Web browser that supports HTML 4.0 or later.

    The image is displayed at its default size. If the table is smaller than the image, part of the image is cropped. If the table is larger than the image, the image tiles to fill the table background. Enter a path, or click the adjacent ellipse (...) button to open the Create URL Dialog Box. Then navigate to the image file, and open it. If, for example, you select an image named "background.jpg" that is in the Images folder, the following code is added to the opening <TABLE> element:

    background="//Images/background.jpg"

Dimensions

  • Height
    Indicates the total height of the table in pixels. If you enter a height value, a height value is added to the opening <TABLE> element. For example, if you set the height value to 20 and accept the remaining default values, the opening <TABLE> element would be:

    <TABLE height=20 cellSpacing=1 cellPadding=1 width=300 border=1>

    If you leave this field blank, the table's height will be based on its content.

  • Width
    Indicates the total width of the table. Select units (pixels or percent) from the list next to this box. If you select pixels, you can set an absolute width for the table. The table and its columns will always be the same width, regardless of screen resolution. The default width for a new table is 300 pixels. If you select percent, the width of the table changes to accommodate screen resolution. A table whose width value is 25 percent, for example, is always one-quarter the width of the available screen. If you leave this field blank, the table's width will be based on its content.

Layout

  • Alignment
    Specifies how the table is aligned with respect to the document. Table layout alignment attributes take precedence over more general alignment attributes. For example, if a table, which is assigned the left alignment attribute, is inserted within a <CENTER> element, the table is aligned to the left margin rather than centered.

    Option Alignment
    Center Align equidistant from the left and right margins.
    Left Align with the left margin.
    Right Align with the right margin.

  • Cell padding
    Specifies the amount of space in pixels between cell contents and the cell border. The default value, which is 1, adds cellPadding=1 to the opening <TABLE> element.

  • Cell spacing
    Specifies the amount of space in pixels between cells. The default value, which is 1, adds cellSpacing=1 to the opening <TABLE> element.

Borders

  • Size
    Specifies the size in pixels of the table border. Choose 0 to specify no border. The default value, which is 1, adds border=1 to the opening <TABLE> element.

  • Color
    Specifies the same color for the borders of all cells in the table. The cell border color takes precedence over the table border color. Select a color or click the adjacent ellipse (...) button to display the Color Picker and choose additional colors. For more information, see Color Picker Dialog Box. If the table has no border, border color 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
    Specifies the color for the bottom and right sides of the table cell. Select a color name from the list or click the adjacent ellipsis (...) button to display the Color Picker and choose additional colors. For more information, see Color Picker Dialog Box. For example, if you select lime, the following code is added to the opening <TABLE> element:

    borderColorLight=lime

    If the table has no border, highlight color is ignored.

  • Shadow
    Specifies a color for the table's shadow. Select a color name from the list or click the adjacent ellipse (...) button to display the Color Picker and choose additional colors. For more information, see Color Picker Dialog Box. For example, if you select aqua, the following is added to the opening <TABLE> element: borderColorDark=aqua. If the table has no border, shadow color is ignored.

See Also

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

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