The publishing features of MOSS allow you to create tables on publishing pages.  Out-of-the box, MOSS comes with a set of predefined table formats that control the style of the header row, first column, alternating line-styles, etc.  Most likely though, none of these styles are what you are looking for.  Customizing these styles is quite easy once you create some CSS classes that conform to the specific naming convention.

Inserting a Table with a Predefined Table Format

To insert a new table using a predefined table format click the new table button on the Rich Text Editor toolbar.

This will open the Insert Table webpage dialog.  The highlighted section below is used to format your table according to the predefined table format that you choose.

Notice that there are several options in this section that determine how the table will be formatted.  The first option is Use Predefined Table Format.  When you select this check box you will have to choose from one of the table formats in the drop down list.  I will discuss how to have new predefined table formats appear in this list later in this post.

After you select the type of table format that you want to use, there are four additional options that you can specify in the Apply special formats to: section.  These options control the application of additional CSS classes to <tr> and <td> elements that are used to apply additional formatting to the heading row, first column, last row, and last column when these items are checked.

Developing a Predefined Table Format

The the Rich Text Editor adds the table to the publishing region, it will append the appropriate CSS class references to the <table>, <tr>, and <td> elements as specified by the options chosen in the webpage dialog in order to render the table as desired.  This will require you to create several CSS classes that will be used to format the table.

The out-of-the-box table styles reside in a file in the LAYOUTS folder, called …/12/TEMPLATE/LAYOUT/1033/STYLES/HtmlEditorTableFormats.css. Since, this item lives directly on the file system it is not available to content authors or style designers from SharePoint Designer.  However, once you create a CSS file that contains CSS classes with using the appropriate class naming convention and reference it on your page, the rich text editor will no longer reference the predefined table formats in the HtmlEditorTableFormats.css and will now display your custom table formats, enabling easy editing from users with SharePoint Designer.

CSS Class Naming Convention

All predefined table formats must adhere to a strict naming convention so that the styles will be applied appropriately.  All of the CSS classes *MUST* have a prefix of ms-rteTable in the class name.

There are 17 styles that you can define to control the formatting for a predefined table (this includes one for the table itself).  The following CSS class definitions are needed for a complete predefined table format, for your own custom table format you should replace name in the definitions below with the name of your table format.

.ms-rteTable-name

.ms-rteTable-name tr.ms-rteTableHeaderRow-name

.ms-rteTable-name td.ms-rteTableHeaderFirstCol-name

.ms-rteTable-name td.ms-rteTableHeaderOddCol-name

.ms-rteTable-name td.ms-rteTableHeaderEvenCol-name

.ms-rteTable-name td.ms-rteTableHeaderLastCol-name

.ms-rteTable-name tr.ms-rteTableOddRow-name

.ms-rteTable-name td.ms-rteTableFirstCol-name

.ms-rteTable-name td.ms-rteTableOddCol-name

.ms-rteTable-name td.ms-rteTableEvenCol-name

.ms-rteTable-name td.ms-rteTableLastCol-name

.ms-rteTable-name tr.ms-rteTableEvenRow-name

.ms-rteTable-name tr.ms-rteTableFooterRow-name

.ms-rteTable-name td.ms-rteTableFooterFirstCol-name

.ms-rteTable-name td.ms-rteTableFooterOddCol-name

.ms-rteTable-name td.ms-rteTableFooterEvenCol-name

.ms-rteTable-name td.ms-rteTableFooterLastCol-name

For example: To create a predefined table format called CustomerData, the table CSS definition would be named .ms-rteTable-CustomerData and the CSS class name definition for the header first column would be .ms-rteTable-CustomerData td.ms-rteTableHeaderFirstCol-CustomerData.