Using HTML5 compliant tables in CkEditor

Question

I noticed that by using the default table plug-in of CkEditor (see this and this), you can add a table to your editor.

My problem, now, is that I need to force the editor content (got with editor.getData()) to be HTML5 valid.

In fact, when I add a table, the result is like the following:

<table cellspacing="1" cellpadding="1" border="1" style="width: 500px;">
    <tr>
        <td>
            [...]
        </td>

        [...]

    </tr>

    [...]

</table>

As you can see, there are some attributes of the table tag that are deprecated in HTML5. In the above example, you can see cellspacing, border and cellspadding.

Someone reported this problem at dev.ckeditor.com (see this and this other tickets), but there is no explanation about the solution of this problem.

Do you know some tricks to solve this issue?

---

My Solution

I want to share my solution, based on the Reinmar answer.

I added in the config.js file the following line:

config.disallowedContent = "table[cellspacing,cellpadding,border,align,summary,bgcolor,frame,rules,width]; td[axis,abbr,scope,align,bgcolor,char,charoff,height,nowrap,valign,width]; th[axis,abbr,align,bgcolor,char,charoff,height,nowrap,valign,width]; tbody[align,char,charoff,valign]; tfoot[align,char,charoff,valign]; thead[align,char,charoff,valign]; tr[align,bgcolor,char,charoff,valign]; col[align,char,charoff,valign,width]; colgroup[align,char,charoff,valign,width]";

In this way, I disabled every non-HTML5 attributes, related to tables.

Answer 1

Since CKEditor 4.4 you can do this:

CKEDITOR.replace( 'editor1', {
    disallowedContent: 'table[cellspacing,cellpadding,border]'
} );

And voila :)!

You can read more in the Disallowed Content guide.