Discussing the ins and outs of developing for SharePoint and the Microsoft platform

The rich text editor in a publishing site of SharePoint has got a bunch of different things about it that you can customise, which is great for providing ways for your authors to create content that is going to meet your sites design rules, and yesterday I came across another possible customisation – the table formats. Basically what I’m talking about here is in the window you get when you create or edit a table you can choose a style for it from 5 predefined formats, and these are entirely customisable and are the subject of today’s post.

As with the styles in the drop down menu of the editor, these table styles are all customised through the use of CSS. This is pretty well document on MSDN over at http://msdn.microsoft.com/en-us/library/ms561507.aspx so I won’t waste time talking about the process. I will mention one thing about what is there though, in that the way it says to use the styles and the code sample it gives is slightly wrong to get it to actually work.

The problem stems from the fact that when you provide custom table styles the default ones won’t be selectable for users anymore, but the CSS for them will still be pumped down to the page, which means that if you create a table style for number 1 for example, you need to make sure that the CSS you create will override what the OOTB style has (so an example could be tha you don’t want your rows to have a background colour, but the first table style that Microsoft provided has a background colour, so your CSS needs to specifically state background:none or else it will inherit the Microsoft one). This becomes a problem when you need to ensure that you override things in every possible style, like first column, last column and each row.

Lastly, I also found the code sample on MSDN didn’t work the way I thought it would, in that I had to prefix a lot of the styles with the main table class and some tags as well to get everything to work right. Here is a list of the CSS styles that I applied things to in order to get this working:

• Table
  • .ms-rteTable-1
• Table Header Row
  • .ms-rteTable-1 TR.ms-rteTableHeaderRow-1
  • .ms-rteTable-1 TD.ms-rteTableHeaderFirstCol-1
  • .ms-rteTable-1 TD.ms-rteTableHeaderLastCol-1
  • .ms-rteTable-1 TD.ms-rteTableHeaderOddCol-1
  • .ms-rteTable-1 TD.ms-rteTableHeaderEvenCol-1
• Table Body
  • .ms-rteTable-1 TR.ms-rteTableOddRow-1
  • .ms-rteTable-1 TR.ms-rteTableEvenRow-1
  • .ms-rteTable-1 TD.ms-rteTableFirstCol-1
  • .ms-rteTable-1 TD.ms-rteTableLastCol-1
  • .ms-rteTable-1 TD.ms-rteTableOddCol-1
  • .ms-rteTable-1 TD.ms-rteTableEvenCol-1
• Table Footer Row
  • .ms-rteTable-1 TR.ms-rteTableFooterRow-1
  • .ms-rteTable-1 TD.ms-rteTableFooterFirstCol-1
  • .ms-rteTable-1 TD.ms-rteTableFooterLastCol-1
  • .ms-rteTable-1 TD.ms-rteTableFooterOddCol-1
  • .ms-rteTable-1 TD.ms-rteTableFooterEvenCol-1

So once you have the right style names/prefixes to apply it’s a straight forward process, and you can have as many styles as you like. I think this makes a great way to apply the layouts to tables because it means that if your users are using this to style them, you can then update your CSS later and all the tables that were styled this way will be updated right away, where as tables that users manually had to set up colours/fonts/etc will not, so this is a nice UI win in my opinion!