Table caption tag is output in wrong place

[pomu0325]

<caption> is output after <thead>. Seems to be the same issue with #2874. Occurs with IE and FF. Chrome seems to work fine.

To Reproduce

• Insert new table with <th> and caption using table dialog.
• Switch to source mode.

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

[pomu0325]

I know it's a bit forcible way but it worked with IE/FF/Chrome

[Frederico Caldeira Knabben]

#5142 has been marked as DUP.

[Jorge]

Will the bug be solved in any oficial release of CKEditor? It's a bit tedious have to change it every time you update the editor.

[Jorge]

Hi.

Thank you for the patch, but there is a small mistake in the order of the TFOOT and TBODY elements.

According to the HTML specification, TFOOT have to appears before TBODY in the source code, otherwise the generated code will have validation errors.

​http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3

[Sa'ar Zac Elias]

Make sure to update the code according to @jorgeoa's comment above.

[Garry Yao]

Fixed with [6431], thanks for jorgeoa's remind.

[cwall]

Are we sure the logic for this patch is correct? (Source edited w/ ​http://dev.ckeditor.com/changeset/6544.) Yes, tags are ordered according to tableOrder, but same-named tags are re-ordered unintentionally.

Path source:

return node1.type == CKEDITOR.NODE_ELEMENT && node2.type == node1.type ? 
    CKEDITOR.tools.indexOf( tableOrder, node1.name )  > 
        CKEDITOR.tools.indexOf( tableOrder, node2.name ) ? 1 : -1 : 0;

For example, with this logic and the given the following source:

<table>
    <colgroup id="B">
    </colgroup>
    <colgroup id="A">
    </colgroup>
    <caption id="B">
    </caption>
    <caption id="A">
    </caption>
...
</table>

Results in:

<table>
    <caption id="A">
    </caption>
    <caption id="B">
    </caption>
    <colgroup id="A">
    </colgroup>
    <colgroup id="B">
    </colgroup>	
...
</table>

Note that the caption tag ordering was changed to before colgroup, but the ordering of the caption and colgroup tags changed relative to their peer. This changes the style applied to each column.

This logic works:

if (node1.type == CKEDITOR.NODE_ELEMENT && node2.type == node1.type) {
	var idx1 = CKEDITOR.tools.indexOf( tableOrder, node1.name );
	var idx2 = CKEDITOR.tools.indexOf( tableOrder, node2.name );
	if (idx1 > idx2) {
		return 1;
	} else if (idx1 < idx2) {
		return -1
	}
}

return 0;

[Jakub Ś]

@cwall please note that only one caption is allowed per table and it should be inserted right after table tag (​http://www.w3schools.com/tags/tag_caption.asp). Fixing the code to:

<table border="1">
	<caption id="A">
		aa</caption>
	<colgroup id="B">
		<col style="background-color:red" />
	</colgroup>
	<colgroup id="A">
		<col style="background-color:yellow" />
	</colgroup>
	<tbody>
		<tr>
			<th>
				ISBN</th>
			<th>
				Title</th>
		</tr>
		<tr>
			<td>
				3476896</td>
			<td>
				My first HTML</td>
		</tr>
	</tbody>
</table>

and checking it in latest CKEditor 3.6.6.1 or 4.1.1 resulted in no reordering so i think logic is correct. If I have missed anything please leave a comment.