PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Custom Table Format with the SP HTML Webpart

Posted by PANVEGA on June 2, 2009

When editing content in 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.

Microsoft Office SharePoint Server 2007 includes an advanced Rich Text Editor that supports predefined table formats. The Rich Text Editor in SharePoint Server 2007 reads the predefined table formats from cascading style sheets that are linked to the page.

You can view the OOTB styles by going to “http://yourportalsite/_layouts/1033/styles/HtmlEditorTableFormats.css


TableTemplate

Change the name of the table template:

.ms-rteTable-1 {
border-width: 0px;
border-style: none;
border-collapse: collapse;
font-family: Tahoma;
}

to example:

.ms-rteTable-MyTableName {
border-width: 0px;
border-style: none;
border-collapse: collapse;
font-family: Tahoma;
}

do the same with all css subclasses like:

.ms-rteTable-1 td.ms-rteTableHeaderFirstCol-MyTableName    {
padding: 0in 5.4pt 0in 5.4pt;
color: #3a4663;
line-height: 14pt;
}

etc…..

Finnaly customize the classes however you want.

Different ways how add a custom table format?

  1. To define the table formats, you will need 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.
  2. Or just copy a table format 1-5 from the HtmlEditorTableFormats.css and copy the classes into a custom CSS file. Add the CSS reference into your MasterPage. However all other table templates are not accessible anymore. Only your new customtable template is visible in the Dropdown box.
  3. Or copy the HtmlEditorTableFormats.css. Rename it and add your custom tables. Finally you have to register the css class in the MasterPage when the file is available in the Styles folder.Looks  like this <SharePoint:CssRegistration name=”HtmlEditorTableFormats.css” />

Also read my previous post about custom CSS sytle in the RichText Editor. It is pretty similar to the approach i described above.

https://panvega.wordpress.com/2009/05/26/custom-css-styles-in-the-sp-richtext-editor-dropdown

More Info:

http://blog.mastykarz.nl/preserving-rich-text-formatting-in-non-edit-in-place-scenarios

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: