Adding custom RTE Table Styles to SharePoint 2013

Out of the box SharePoint RTE provides 12 table styles and there are scenarios where we need to add new table styles.

As seen above, there are 12 table styles and to this we will add two more table styles

SharePoint provides extensibility framework to add custom table styles and in this post we will examine how to add custom table styles to the RTE. We can add as many table styles as we want but we need to follow some naming conventions so that RTE knows to add those custom table styles

In order to add new table styles, we need to extend "ms-rteTable" class and we need to prefix our own name to "ms-rteTable".

If we don't use "ms-rteTable" then new table styles wont appear in the table drop down.

Steps:

 

 

1. Create a new CSS class and I created a class name called customRTETableStyles.css
2. To this css class, I have created the below styles
4. In the above CSS class, I have created my own table style by extending ms-rteTable and I have given the same as "ms-rteTable-myCustomTable"
5. -ms-name: Give some name to property that you wanted to see in the table style drop down.
6. In this case I have given the name as "My Custom Table" and this name will appear at the bottom of all the table styles
7. Save the above CSS file into any sharepoint document library and preferably "Style Library"
8. Refer that css file in your master page
9. Edit any Rich HTML Field or Content Editor Web Part
10. Insert Table and highlight the table and go to Design tab in the ribbon
11. Under table styles, you should see our new table style as shown below

If you select the above table style, the table inside the Rich HTML Field and Content Editor Web Part will have that table style and in this case it is having the following features

1. Table header will be having blue back ground
2. Table border will be having gray color
3. Padding is 10px


In order to add new RTE table style, copy the above code and replace "myCustomTable" with new name and new RTE table style will appear