(Updated June 7th, 2009)

When editing content a SharePoint Publishing site, you can select from 5 predefined table formats when inserting a table. The image on the left lists the table formats available to select from. Although the table formats are worth consideration, they may not match the unique fonts, colors, and other branding defined elsewhere within your web site.

You have 2 choices when deciding how to integrate your own CSS-based custom table formats: you can replace the predefined formats with your own style definitions, or you can add to the list of predefined formats that ships with SharePoint. Whichever approach you decide to take, both require looking at the predefined formats that ship with SharePoint and using those as a basis for your new style definitions.

Create Your Custom Table Format Style Definitions

To define the new table formats it’s easiest to start by working from the style definitions of the SharePoint predefined formats.  Fire up your favorite CSS editor (I recommend Visual Studio or Notepad++) and open the file:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\HtmlEditorTableFormats.css

Read through the file and notice how it's a series of repeating style definitions with a repeated prefix pattern of .ms-rteTable-TABLE_FORMAT_NAME, where TABLE_FORMAT_NAME is the text displayed in the predefined table format list shown above. Currently the TABLE_FORMAT_NAMES are all integers. However you are not restricted to using just numbers when you create your own formats.

Now that you can see how the styles are defined, create a temporary CSS file and copy-paste the CSS statements for one of the existing table formats into your temporary file, and replace all instances of the string TABLE_FORMAT_NAME with your own table name and save the file. Make sure there are no spaces or special characters in the TABLE_FORMAT_NAME and that all styles have been accounted for.

To get you started, the code below is for a table format I created which starts from predefined table format 1 and redefines the background colors displayed on the table rows:

/* Table Format Aluminum */
.ms-rteTable-Aluminum   {
    border-width: 0px;
    border-style: none;
    border-collapse: collapse;
    font-family: Tahoma;  
}
.ms-rteTable-Aluminum tr.ms-rteTableHeaderRow-Aluminum      {
    margin: 10px;
    padding: 10px;
    color: black;
    background: #babdb6;
    text-align: left;
    font-size: 10pt;  
    font-style: normal;
    font-family: Tahoma;  
    text-transform: capitalize;
    font-weight: bold;
    border-spacing: 10px;
    line-height: 14pt;
    vertical-align: top;
}
.ms-rteTable-Aluminum td.ms-rteTableHeaderFirstCol-Aluminum    {
    padding: 0in 5.4pt 0in 5.4pt;
    color: #3a4663;
    line-height: 14pt;
}
.ms-rteTable-Aluminum td.ms-rteTableHeaderLastCol-Aluminum  {
    padding: 0in 5.4pt 0in 5.4pt; 
    color: #3a4663;
    line-height: 14pt;
}
.ms-rteTable-Aluminum td.ms-rteTableHeaderOddCol-Aluminum {
    padding:0in 5.4pt 0in 5.4pt; 
    color: #3a4663;
    line-height: 14pt;
}
.ms-rteTable-Aluminum td.ms-rteTableHeaderEvenCol-Aluminum 
{
    padding:0in 5.4pt 0in 5.4pt; color: #3a4663;
    line-height: 14pt;
}
.ms-rteTable-Aluminum tr.ms-rteTableOddRow-Aluminum  {
    color: black;
    background-color: #eeeeec;
    font-size: 10pt;   
    vertical-align: top;
}
.ms-rteTable-Aluminum tr.ms-rteTableEvenRow-Aluminum   {
    color: black;
    background-color: #d3d7cf;
    font-size: 10pt;   
    vertical-align: top;
}
.ms-rteTable-Aluminum td.ms-rteTableFirstCol-Aluminum  {
    padding: 0in 5.4pt 0in 5.4pt;
}
.ms-rteTable-Aluminum td.ms-rteTableLastCol-Aluminum {padding:0in 5.4pt 0in 5.4pt;}
.ms-rteTable-Aluminum td.ms-rteTableOddCol-Aluminum  {
    padding: 0in 5.4pt 0in 5.4pt;
}
.ms-rteTable-Aluminum td.ms-rteTableEvenCol-Aluminum {
    padding:0in 5.4pt 0in 5.4pt;
}
.ms-rteTable-Aluminum tr.ms-rteTableFooterRow-Aluminum     {
    background-color: #babdb6;
    color: black;
    font-weight: bold;
    font-size: 10pt;  
    font-family: Tahoma;  
    line-height: 11pt;
}
.ms-rteTable-Aluminum td.ms-rteTableFooterFirstCol-Aluminum  {
    padding: 0in 5.4pt 0in 5.4pt;
    border-top: solid gray 1.0pt;
    text-align: left;
}
.ms-rteTable-Aluminum td.ms-rteTableFooterLastCol-Aluminum {
    padding:0in 5.4pt 0in 5.4pt;
    border-top:solid gray 1.0pt;
    text-align:left;
}
.ms-rteTable-Aluminum td.ms-rteTableFooterOddCol-Aluminum  {
    padding: 0in 5.4pt 0in 5.4pt;
    text-align: left;
    border-top: solid gray 1.0pt;
}
.ms-rteTable-Aluminum td.ms-rteTableFooterEvenCol-Aluminum  {
    padding: 0in 5.4pt 0in 5.4pt;
    text-align: left;
    border-top: solid gray 1.0pt;
}
/* END Table Format Aluminum*/

Approach 1 – Replace the Predefined Formats with Custom Style Definitions

Add your custom style definitions to one of your site CSS files to replace the table definitions provided by SharePoint. For more detail on the inner-workings of this approach, refer to this Microsoft article (scroll down to the sub-heading: Predefined Table Formats).

Approach 2 – Add to the List of Predefined Formats that Ships with SharePoint

To add your styles to the list provided by SharePoint, you will need write access to the file system on the SharePoint server. As with any modification of SharePoint files, you should make backups, store them in source control, and test all changes on a pre-production server before moving into your live environment. Simply paste your style definitions to the end of the file we started from earlier in the article and save the file:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES\HtmlEditorTableFormats.css

Create a New Table with Your Custom Style Definitions

Regardless of the approach used, you should now be able to create a new new table in a page and your new table format should appear (you may need to restart IIS and/or flush the cache in your web browser). If you followed Approach 1, your format will be the only item in the list. If you followed Approach 2, your item will appear at the end of list after the SharePoint predefined formats.

Here's how the example definition presented earlier looks in the Predefined Table Format dialog: