Export (0) Print
Expand All
Expand Minimize

New Style Dialog Box, Table

The Table category of the New Style and Modify Style dialog box enables you to define cascading style sheet (CSS) style rules for a table. You can apply these style rules directly to HTML elements or add them either to the current page or to an external style sheet.

To define a CSS table style rule for UI elements on the current page

  1. Open the page in either Design view or Source view.

  2. Optionally, select the text or HTML elements to apply the style to.

  3. In the Format menu, click New Style.

    The New Style dialog box is displayed.

  4. In the Category pane, select Table.

    The table style selections are displayed in the right pane.

When you apply font styles to text that is selected in Design view, style attributes are inserted inline into the HTML markup for the page. Switch to Source view to review the new style attributes that are inserted.

To add table attributes to a CSS style rule defined in an external style sheet

  1. Open an existing external style sheet.

  2. Put the cursor inside the braces of the style rule to be modified.

  3. In the Styles menu, click Build Style.

    The Modify Style dialog box is displayed.

    NoteNote:

    The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you put the cursor inside the braces that follow the selector for a style rule.

  4. In the left pane, click Table.

    The table style selections are displayed in the right pane.

You can apply a CSS style class to an element in the Web page or to the body element itself by setting the element's class property to the name of the class selector.

The following tables list options that are available under the Table category in the New Style and Modify Style dialog boxes.

table-layout

How table columns will be sized. Values are as follows:

  • auto (default)   The column width is set by cell content.

  • fixed   The column width is set by the table width and the width set for each column.

  • inherit   The element inherits its table-layout property from a parent element.

border-collapse

Whether the borders between table cells will be collapsed into a single border, or each cell will have its own border.

border-spacing

The distance between the borders of adjacent cells. This property is only for separated borders. If you specify a value, you can select the value units in the list

empty-cells

Whether empty cells will be hidden or shown.

caption-side

Whether a caption will appear at the top or bottom of the table.

Selector

(New Style dialog box only) Enables you to type a class name or click an HTML element to apply the style to. Class names must begin with a period (.). You can also select (inline style), which causes the style to be applied inline to the selected text or HTML elements.

Define in

(New Style dialog box only) Enables you to specify where to write the definition of the style rule. Values are as follows:

  • Current page   The style rule is written to a style element in the current page.

  • New style sheet   A new CSS style sheet is added to the project and the rule is written in it.

  • Existing style sheet   The style rule is added to the CSS style sheet that you specify by using the URL list.

URL

(New Style dialog box only) Enables you to select an existing CSS style sheet. This option is enabled only when Define in is set to Existing style sheet.

Apply new style to document selection

(New Style dialog box only) Specifies that the style is applied to the selected text, class, or HTML element.

Preview

Displays an example of how the style rule will appear when it is applied.

Description

Shows the CSS definition of the style rule.

Community Additions

ADD
Show:
© 2014 Microsoft