Formatting tables and table content with cascading style sheets


    You can use cascading style sheets (CSS) to set the properties of tables and content within a table. CSS styles can either apply automatically to all tables in the page or to specific tables or cells. After you create a CSS style, you can modify it, and the properties of all tables and cells that use the CSS style will be updated. CSS can be written in one Web page as an internal style sheet or as a separate external style sheet file that can be used by multiple pages. (See About cascading style sheets.)

    Note: Some properties in the CSS Editor, such as those in the Background tab, will affect the table, whereas other properties, such as those in the Font tab, will affect content within a table cell. For example, if a CSS style defines a Font color property, and the style is applied to a table cell, any text within the cell will display the color property but the table cell will not.

    Illustration of Class style applied to a table column with these callouts: A. Class style properties in the CSS Inspector B. Class style listed in CSS Editor
    Class style applied to a table column A. Class style properties in the CSS Inspector B. Class style listed in CSS Editor

To create a CSS element style that is automatically applied to all tables, rows, or cells in a page:

    Do one of the following:

    • Create an HTML element style named after the <table> tag to set the properties of all tables in a page.
    • Create an HTML element style named after the <tr> tag to set the properties of all table rows in a page.
    • Create an HTML element style named after the <td> tag to set the properties of all table cells in a page.

    For more information, see Creating HTML element styles.

To create a style and apply it to selected tables, rows, or cells:

  1. Create a class style. (See Creating class styles.)
  2. Select a table, row, cell, or group of cells.
  3. Do one of the following in the CSS palette:
    • Select under the <table> column that is adjacent to the style name to apply the class to a selected table.
    • Select the <td> column that is adjacent to the style name to apply the class to a selected row, column, or group of cells. (If a row or column is selected, the <td> column name will be followed by the number of cells in the selection).

    For more information on applying class styles, see Applying styles.