Skip to main content

Add custom styles to tables (SAP KC)


This article explains multiple ways to style tables in MindTouch.


When finished with this article, you will know how to style tables with a custom inline style and with a unique class added through the editor's table dialog. For the purpose of this demonstration, we will be using custom table styles that ship with MindTouch so that you can see the styles inside your editor. If you decide to use your own custom styles via the Control Panel, they will not be visible inside the editor until you save your page.

How to add a custom style in the table dialog

Navigate to the page you wish to add the table to. Open the editor, click the "Table" drop down, and create your table.

tables 1.png

With your cursor inside the table, right click and select Table Properties.

tables 2.png

Enter "mt-table" to the Stylesheet Classes input field. You have the option to add stylesheet classes to the First Row or the First column. Here we add the stylesheet class to the first row. Click OK to save the settings.

tables 4.png

Now you have a styled table. 

tables 5.png

How to add a custom inline style

To add a custom style to your editor, you will need to modify the editor configuration in the Control Panel. 

Add a style to the editor configuration

In the Control Panel go to "System Settings" > "Editor".  Add the following block of code to the text area labeled "Set editor configuration" and click the "Save Changes" button.

CKEDITOR.editorConfig = function(config){
config.stylesSet.push({ name : 'Nice Table', element : 'table', wrap:false, attributes : { 'class' : 'mt-nice-table', 'title' :'Nice Table' } });

Screen Shot 2014-06-11 at 9.51.29 AM.png

For more information about editor styles, please read Create inline styles.

Apply an inline style to your content

Navigate to the page you wish to add the table to. Open the editor, click the Table drop down, and create your table.

Create a new table in the editor

Without clicking outside your table, click the Styles drop down and select Nice Table from the list. 

Add the "Nice Table" style to the table

Now you have a styled table.

A styled table

What's next?

Now that you know how to add custom styles to a table, you can start building your table with headers, captions, alignment and much more. For more information about tables, please read about adding a table to your page​.

  • Was this article helpful?