Applying classes to tables in Umbraco RichText fields

By default the TinyMce rich text editors in Umbraco will allow you to add tables but won't give you the option to apply any classes to those tables. If, for example, you are using Bootstrap, you'll want to give those tables a "table" class and maybe a "table-striped" class. 

In order to do this you'll need to make some changes to your config/tinyMceConfig.config file.

If you add this in the customConfig section the table properties will allow you to pick a style:

<config key="table_class_list">
[
{"title": "None", "value": ""},
{"title": "Table", "value": "table"},
{"title": "Table Striped", "value": "table table-striped"},
]
</config>

Now you'll be able to select between a standard table and a striped table.

Using this exact same technique you can also enable other TinyMce supported table configs. For example I've added this to allow styles to be applied to rows:

<config key="table_row_class_list">
[
{"title": "None", "value": ""},
{"title": "Light Header", "value": "thead-light"},
{"title": "Dark Header", "value": "thead-dark"}
]
</config>

 

About the Author

Steve Temple, Technical Director and co-founder of Gibe

Steve is Gibe's technical director and super brain behind the development of our major projects. With over 28 years of commercial experience, Steve is an expert in .NET, Umbraco and Microsoft technologies. Steve is also an Umbraco Certified Master and Microsoft MCSD