TinyMCE & Tables The Easy Way

I am a big fan of the open source CMS ModX which uses the rich text editor TinyMCE by default. While, like most developers, I have moved away for table based layouts for my sites, there are times when the CMS users need to enter tabulated data and doing this is somewhat less than user friendly.

Working on my latest ModX based site for a mutltilingual recruitment agency this morning I've come across this issue as I enter tabulated international salary data. The tables are not complex, we have a header row containing column headings and a number of rows containing data. However, in the table code automatically produced by TinyMCE, it does not distinguish between header rows using table heading tags but rather just produces regular rows.

I have discovered that the easiest way to add and format these tables for non-technical users to TinyMCE is to lay them out in MS Excel and then copy and paste the cells comprising the table into TinyMCE. A user can then add the general table class by right clicking the table in the editor and entering the table class and by placing the cursor in a cell in the heading row and right clicking, choose 'Row Properties' and apply a heading row class.

The specific CSS classes I am using for this project are below. This gives a table with a blue heading with white text and individual cells are bordered in the same blue. Of course, these styles can easily be customised for your own site look & feel.


table.datatable
/* I give the data tables their own class to distinguish them for other content that may be tabulated in the content or layout.*/
{
border:1px solid #3525CD;
width:100%;
}
table.datatable tr.header
/* The header row class for my table */
{
color:#ffffff;
background-color:#3525CD;
text-align:center;
font-weight:bold;
}