Table CAPTION output below THEAD

[hel]

The table properties editor looks to be placing the CAPTION element below the THEAD element.

The following ticket from a while back sounds like the same issue but this was noticed on our version 4.4.4 and can also be recreated on the ckeditor/demo version (4.4.6?).

​https://dev.ckeditor.com/ticket/4809

The problem can be recreated in the demo ckeditor by:

1) Clicking the Table toolbar button
2) Selecting Headers "First Row"
3) Specifying a Caption
4) Clicking Ok to create the table
5) Click the Source toolbar button to view the generated HTML (screen shot attached).

This generates the following HTML output:

<table border="1" cellpadding="1" cellspacing="1" style="width:500px">
	<thead>
		<tr>
			<th scope="col">&nbsp;</th>
			<th scope="col">&nbsp;</th>
		</tr>
	</thead>
	<caption>Caption</caption>
	<tbody>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

Having the CAPTION below the THEAD does not pass w3c validation:

Line 10, Column 10: document type does not allow element "caption" here

	<caption>Caption</caption>

[hel]

I believe (but could be wrong!) that this bug is to do with the following code circa line 640 in core/htmldataprocessor.js (defaultHtmlFilterRulesForAll.elements.table function):

// Clone the array as it would become empty during the sort call.
var children = element.children.slice( 0 );

This was introduced at commit #9312: Fixed table with multiple <tbody> output in wrong order:

https://github.com/ckeditor/ckeditor-dev/commit/a50a33300d71f7201c27d89ebccbbe5f1205a8a3

If I revert this (in my local version) to the following, the ordering comes out correctly:

var children = element.children;

What I'm not sure about is why that clone was added.

Thanks

[Jakub Ś]

@helsom you are right - this issue can be reproduced from CKEditor 3.6.5 and #9312 seems to be the culprit here.

[kkrzton]

Considering these four functions for handling tables:

table.createCaption();
table.createTHead();
table.createTBody();
table.createTFoot();

It depends on a browser how elements (children of table) are ordered.

In chrome no matter functions execution order the elements order is always the same:

<caption></caption><thead></thead><tfoot></tfoot><tbody></tbody>

In FF elements order reflect function execution order except thead which is always pushed as a first element.

In IE well... tbody and tfoot are not moved and thead and caption are prepended so it depends on execution order also.

Example here: ​jsfiddle table elements order test.

[kkrzton]

Changes in ​t/12707

The proposed fix moves caption element to the first place in tables nodes list if necessary.

[Marek Lewandowski]

That's a good research on how createCaption, createTHead, createTBody, createTFootare playing together.

What we could do is to simply use standard append method instead. As far as I saw it does not reorder the tags. I've rebased the branch and pushed few commits - please check if changes make sense for you.

• please move unit tests to tests/plugins/table/caption.js
• I'm missing manual test (make sure to include proper tags @bender-tags: 4.5.7, tc, 12707)

[kkrzton]

Changes in ​t/12707.

Your solution is indeed simpler so I'm fine with it. I moved unit tests to ​tests/plugins/table/caption.js and added ​3 manual tests with proper tags.

[Marek Lewandowski]

Well done, fixed with ​git:6ec5dd5 to master.