Formatting tables and table content with cascading style sheets

You can use cascading style sheets to set the properties of tables and content within a table. Styles can either apply automatically to all tables in the page or styles can apply to specific tables or cells. After you create a style, you can modify it, and the properties of all tables and cells that use the style will be updated. Style sheets 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 Selector Inspector, 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 style uses 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.


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 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.

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.