ソースを参照

Merge branch 'master' into i/6049

Aleksander Nowodzinski 6 年 前
コミット
c99a7e38de
26 ファイル変更456 行追加330 行削除
  1. 16 0
      packages/ckeditor5-table/src/commands/utils.js
  2. 2 2
      packages/ckeditor5-table/src/tablecellproperties.js
  3. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js
  4. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbordercolorcommand.js
  5. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderstylecommand.js
  6. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderwidthcommand.js
  7. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellheightcommand.js
  8. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellhorizontalalignmentcommand.js
  9. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpaddingcommand.js
  10. 7 6
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpropertycommand.js
  11. 5 5
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js
  12. 3 3
      packages/ckeditor5-table/src/tablecellproperties/commands/tablecellwidthcommand.js
  13. 9 1
      packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting.js
  14. 4 0
      packages/ckeditor5-table/src/tableproperties.js
  15. 3 3
      packages/ckeditor5-table/src/tableproperties/commands/tablealignmentcommand.js
  16. 3 3
      packages/ckeditor5-table/src/tableproperties/commands/tablebackgroundcolorcommand.js
  17. 3 3
      packages/ckeditor5-table/src/tableproperties/commands/tablebordercolorcommand.js
  18. 3 3
      packages/ckeditor5-table/src/tableproperties/commands/tableborderstylecommand.js
  19. 3 3
      packages/ckeditor5-table/src/tableproperties/commands/tableborderwidthcommand.js
  20. 2 2
      packages/ckeditor5-table/src/tableproperties/commands/tableheightcommand.js
  21. 7 6
      packages/ckeditor5-table/src/tableproperties/commands/tablepropertycommand.js
  22. 2 2
      packages/ckeditor5-table/src/tableproperties/commands/tablewidthcommand.js
  23. 22 4
      packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.js
  24. 15 14
      packages/ckeditor5-table/tests/_utils/utils.js
  25. 316 249
      packages/ckeditor5-table/tests/manual/tableproperties.html
  26. 10 0
      packages/ckeditor5-table/tests/manual/tableproperties.md

+ 16 - 0
packages/ckeditor5-table/src/commands/utils.js

@@ -58,6 +58,22 @@ export function createEmptyTableCell( writer, insertPosition, attributes = {} )
 	writer.insert( tableCell, insertPosition );
 }
 
+/**
+ * Returns a string if all four values of box sides are equal.
+ *
+ * If a string is passed, it is treated as a single value (pass-through).
+ *
+ *		// returns 'foo':
+ *		getSingleValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } );
+ *		getSingleValue( 'foo' );
+ *
+ *		// Returns undefined:
+ *		getSingleValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } );
+ *		getSingleValue( { top: 'foo', right: 'foo' } );
+ *
+ * @param objectOrString
+ * @returns {module:engine/view/stylesmap~BoxSides|String}
+ */
 export function getSingleValue( objectOrString ) {
 	if ( !objectOrString || !isObject( objectOrString ) ) {
 		return objectOrString;

+ 2 - 2
packages/ckeditor5-table/src/tablecellproperties.js

@@ -15,8 +15,8 @@ import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertie
  * The table cell properties feature.
  *
  * This is a "glue" plugin which loads the
- * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table editing feature} and
- * the {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI table UI feature}.
+ * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table cell properties editing feature} and
+ * the {@link module:table/tablecellproperties/tablecellpropertiesui~TableCellPropertiesUI table cell properties UI feature}.
  *
  * @extends module:core/plugin~Plugin
  */

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js

@@ -12,10 +12,10 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
 /**
  * The table cell background color command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellBackgroundColor'` editor command.
  *
- * To change cell `backgroundColor` attribute of the selected cells, execute the command:
+ * To change the background color of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellBackgroundColor', {
  *			value: '#f00'
@@ -27,7 +27,7 @@ export default class TableCellBackgroundColorCommand extends TableCellPropertyCo
 	/**
 	 * Creates a new `TableCellBackgroundColorCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'backgroundColor' );

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbordercolorcommand.js

@@ -13,10 +13,10 @@ import { getSingleValue } from '../../commands/utils';
 /**
  * The table cell border color command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellBorderColor'` editor command.
  *
- * To change cell border color of the selected cell, execute the command:
+ * To change the border color of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellBorderColor', {
  *			value: '#f00'
@@ -28,7 +28,7 @@ export default class TableCellBorderColorCommand extends TableCellPropertyComman
 	/**
 	 * Creates a new `TableCellBorderWidthCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'borderColor' );

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderstylecommand.js

@@ -13,10 +13,10 @@ import { getSingleValue } from '../../commands/utils';
 /**
  * The table cell border style command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellBorderStyle'` editor command.
  *
- * To change cell border style of the selected cell, execute the command:
+ * To change the border style of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellBorderStyle', {
  *			value: 'dashed'
@@ -28,7 +28,7 @@ export default class TableCellBorderStyleCommand extends TableCellPropertyComman
 	/**
 	 * Creates a new `TableCellBorderWidthCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'borderStyle' );

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderwidthcommand.js

@@ -13,10 +13,10 @@ import { getSingleValue } from '../../commands/utils';
 /**
  * The table cell border width command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellBorderWidth'` editor command.
  *
- * To change cell border width of the selected cell, execute the command:
+ * To change the border width of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellBorderWidth', {
  *			value: '5px'
@@ -28,7 +28,7 @@ export default class TableCellBorderWidthCommand extends TableCellPropertyComman
 	/**
 	 * Creates a new `TableCellBorderWidthCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'borderWidth' );

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellheightcommand.js

@@ -12,10 +12,10 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
 /**
  * The table cell height command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellHeight'` editor command.
  *
- * To change cell height of the selected cell, execute the command:
+ * To change the height of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellHeight', {
  *			value: '50px'
@@ -27,7 +27,7 @@ export default class TableCellHeightCommand extends TableCellPropertyCommand {
 	/**
 	 * Creates a new `TableCellHeightCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'height' );

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellhorizontalalignmentcommand.js

@@ -12,10 +12,10 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
 /**
  * The table cell horizontal alignment command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellHorizontalAlignment'` editor command.
  *
- * To change cell horizontal alignment of the selected cell, execute the command:
+ * To change the horizontal text alignment of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellHorizontalAlignment', {
  *			value: 'right'
@@ -27,7 +27,7 @@ export default class TableCellHorizontalAlignmentCommand extends TableCellProper
 	/**
 	 * Creates a new `TableCellHorizontalAlignmentCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'horizontalAlignment' );

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpaddingcommand.js

@@ -13,10 +13,10 @@ import { getSingleValue } from '../../commands/utils';
 /**
  * The table cell padding command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellPadding'` editor command.
  *
- * To change cell padding of the selected cell, execute the command:
+ * To change the padding of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellPadding', {
  *			value: '5px'
@@ -28,7 +28,7 @@ export default class TableCellPaddingCommand extends TableCellPropertyCommand {
 	/**
 	 * Creates a new `TableCellPaddingCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'padding' );

+ 7 - 6
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpropertycommand.js

@@ -14,7 +14,7 @@ import { findAncestor } from '../../commands/utils';
 /**
  * The table cell attribute command.
  *
- * The command is a base command for other table cell attributes commands.
+ * The command is a base command for other table cell property commands.
  *
  * @extends module:core/command~Command
  */
@@ -22,7 +22,7 @@ export default class TableCellPropertyCommand extends Command {
 	/**
 	 * Creates a new `TableCellPropertyCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 * @param {String} attributeName Table cell attribute name.
 	 */
 	constructor( editor, attributeName ) {
@@ -49,9 +49,10 @@ export default class TableCellPropertyCommand extends Command {
 	 *
 	 * @fires execute
 	 * @param {Object} [options]
-	 * @param {*} [options.value] If set the command will set the attribute on selected table cells.
-	 * If it is not set the command will remove the attribute from selected table cells.
-	 * @param {module:engine/model/batch~Batch} [options.batch] Pass batch instance to the command for creating single undo step.
+	 * @param {*} [options.value] If set, the command will set the attribute on selected table cells.
+	 * If it is not set, the command will remove the attribute from selected table cells.
+	 * @param {module:engine/model/batch~Batch} [options.batch] Pass the model batch instance to the command to aggregate changes,
+	 * e.g. allow a single undo step for multiple executions.
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
@@ -72,7 +73,7 @@ export default class TableCellPropertyCommand extends Command {
 	}
 
 	/**
-	 * Returns attribute value for a table cell.
+	 * Returns the attribute value for a table cell.
 	 *
 	 * @param {module:engine/model/element~Element} tableCell
 	 * @returns {String|undefined}

+ 5 - 5
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js

@@ -12,17 +12,17 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
 /**
  * The table cell vertical alignment command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellVerticalAlignment'` editor command.
  *
- * To change cell vertical alignment of the selected cell, execute the command:
+ * To change the vertical text alignment of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellVerticalAlignment', {
  *			value: 'top'
  *		} );
  *
- * The editor UI allows to set those attributes from
- * [a `vertical-align` CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align):
+ * The following values are allowed corresponding to
+ * [the `vertical-align` CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align):
  *
  * * `'top'`
  * * `'bottom'`
@@ -34,7 +34,7 @@ export default class TableCellVerticalAlignmentCommand extends TableCellProperty
 	/**
 	 * Creates a new `TableCellVerticalAlignmentCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'verticalAlignment' );

+ 3 - 3
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellwidthcommand.js

@@ -12,10 +12,10 @@ import TableCellPropertyCommand from './tablecellpropertycommand';
 /**
  * The table cell width command.
  *
- * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellWidth'` editor command.
  *
- * To change cell width of the selected cell, execute the command:
+ * To change the width of selected cells, execute the command:
  *
  *		editor.execute( 'tableCellWidth', {
  *			value: '50px'
@@ -27,7 +27,7 @@ export default class TableCellWidthCommand extends TableCellPropertyCommand {
 	/**
 	 * Creates a new `TableCellWidthCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'width' );

+ 9 - 1
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesediting.js

@@ -35,6 +35,14 @@ import TableCellBorderWidthCommand from './commands/tablecellborderwidthcommand'
  * - horizontal and vertical alignment: `horizontalAlignment`, `verticalAlignment`
  * - cell width & height: `width` & `height`
  *
+ * It also registers commands used to manipulate the above attributes:
+ *
+ * - border: `'tableCellBorderStyle'`, `'tableCellBorderColor'` and `'tableCellBorderWidth'` commands
+ * - background color: `'tableCellBackgroundColor'`
+ * - cell padding: `'tableCellPadding'`
+ * - horizontal and vertical alignment: `'tableCellHorizontalAlignment'`, `'tableCellVerticalAlignment'`
+ * - width & height: `'tableCellWidth'` & `'tableCellHeight'`
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class TableCellPropertiesEditing extends Plugin {
@@ -104,7 +112,7 @@ function enableBorderProperties( schema, conversion ) {
 	downcastAttributeToStyle( conversion, 'tableCell', 'borderWidth', 'border-width' );
 }
 
-// Enables `'horizontalAlignment'` attribute for table cells.
+// Enables the `'horizontalAlignment'` attribute for table cells.
 //
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion

+ 4 - 0
packages/ckeditor5-table/src/tableproperties.js

@@ -14,6 +14,10 @@ import TablePropertiesEditing from './tableproperties/tablepropertiesediting';
 /**
  * The table properties feature.
  *
+ * This is a "glue" plugin which loads the
+ * {@link module:table/tableproperties/tablepropertiesediting~TableCellPropertiesEditing table editing feature} and
+ * table UI feature.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class TableProperties extends Plugin {

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/commands/tablealignmentcommand.js

@@ -12,10 +12,10 @@ import TablePropertyCommand from './tablepropertycommand';
 /**
  * The table alignment command.
  *
- * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
  * `'tableAlignment'` editor command.
  *
- * To change alignment of the selected table, execute the command:
+ * To change the alignment of the selected table, execute the command:
  *
  *		editor.execute( 'tableAlignment', {
  *			value: 'right'
@@ -27,7 +27,7 @@ export default class TableAlignmentCommand extends TablePropertyCommand {
 	/**
 	 * Creates a new `TableAlignmentCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'alignment' );

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/commands/tablebackgroundcolorcommand.js

@@ -12,10 +12,10 @@ import TablePropertyCommand from './tablepropertycommand';
 /**
  * The table background color command.
  *
- * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
  * `'tableBackgroundColor'` editor command.
  *
- * To change backgroundColor of the selected, execute the command:
+ * To change the background color of the selected table, execute the command:
  *
  *		editor.execute( 'tableBackgroundColor', {
  *			value: '#f00'
@@ -27,7 +27,7 @@ export default class TableBackgroundColorCommand extends TablePropertyCommand {
 	/**
 	 * Creates a new `TableBackgroundColorCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'backgroundColor' );

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/commands/tablebordercolorcommand.js

@@ -13,10 +13,10 @@ import { getSingleValue } from '../../commands/utils';
 /**
  * The table border color command.
  *
- * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
  * `'tableBorderColor'` editor command.
  *
- * To change border color of the selected , execute the command:
+ * To change the border color of the selected table, execute the command:
  *
  *		editor.execute( 'tableBorderColor', {
  *			value: '#f00'
@@ -28,7 +28,7 @@ export default class TableBorderColorCommand extends TablePropertyCommand {
 	/**
 	 * Creates a new `TableBorderColorCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'borderColor' );

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/commands/tableborderstylecommand.js

@@ -13,10 +13,10 @@ import { getSingleValue } from '../../commands/utils';
 /**
  * The table style border command.
  *
- * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
  * `'tableBorderStyle'` editor command.
  *
- * To change border of the selected , execute the command:
+ * To change the border style of the selected table, execute the command:
  *
  *		editor.execute( 'tableBorderStyle', {
  *			value: 'dashed'
@@ -28,7 +28,7 @@ export default class TableBorderStyleCommand extends TablePropertyCommand {
 	/**
 	 * Creates a new `TableBorderStyleCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'borderStyle' );

+ 3 - 3
packages/ckeditor5-table/src/tableproperties/commands/tableborderwidthcommand.js

@@ -13,10 +13,10 @@ import { getSingleValue } from '../../commands/utils';
 /**
  * The table width border command.
  *
- * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
  * `'tableBorderWidth'` editor command.
  *
- * To change border of the selected , execute the command:
+ * To change the border width of the selected table, execute the command:
  *
  *		editor.execute( 'tableBorderWidth', {
  *			value: '5px'
@@ -28,7 +28,7 @@ export default class TableBorderWidthCommand extends TablePropertyCommand {
 	/**
 	 * Creates a new `TableBorderWidthCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'borderWidth' );

+ 2 - 2
packages/ckeditor5-table/src/tableproperties/commands/tableheightcommand.js

@@ -12,7 +12,7 @@ import TablePropertyCommand from './tablepropertycommand';
 /**
  * The table height command.
  *
- * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
  * `'tableHeight'` editor command.
  *
  * To change height of the selected table, execute the command:
@@ -27,7 +27,7 @@ export default class TableHeightCommand extends TablePropertyCommand {
 	/**
 	 * Creates a new `TableHeightCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'height' );

+ 7 - 6
packages/ckeditor5-table/src/tableproperties/commands/tablepropertycommand.js

@@ -14,7 +14,7 @@ import { findAncestor } from '../../commands/utils';
 /**
  * The table cell attribute command.
  *
- * The command is a base command for other table cell attributes commands.
+ * The command is a base command for other table property commands.
  *
  * @extends module:core/command~Command
  */
@@ -22,7 +22,7 @@ export default class TablePropertyCommand extends Command {
 	/**
 	 * Creates a new `TablePropertyCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 * @param {String} attributeName Table cell attribute name.
 	 */
 	constructor( editor, attributeName ) {
@@ -49,9 +49,10 @@ export default class TablePropertyCommand extends Command {
 	 *
 	 * @fires execute
 	 * @param {Object} [options]
-	 * @param {*} [options.value] If set the command will set the attribute on selected table.
-	 * If it is not set the command will remove the attribute from selected table.
-	 * @param {module:engine/model/batch~Batch} [options.batch] Pass batch instance to the command for creating single undo step.
+	 * @param {*} [options.value] If set, the command will set the attribute on the selected table.
+	 * If not set, the command will remove the attribute from the selected table.
+	 * @param {module:engine/model/batch~Batch} [options.batch] Pass the model batch instance to the command to aggregate changes,
+	 * e.g. allow a single undo step for multiple executions.
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
@@ -71,7 +72,7 @@ export default class TablePropertyCommand extends Command {
 	}
 
 	/**
-	 * Returns attribute value for a table cell.
+	 * Returns the attribute value for a table.
 	 *
 	 * @param {module:engine/model/element~Element} table
 	 * @returns {String|undefined}

+ 2 - 2
packages/ckeditor5-table/src/tableproperties/commands/tablewidthcommand.js

@@ -12,7 +12,7 @@ import TablePropertyCommand from './tablepropertycommand';
 /**
  * The table width command.
  *
- * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
+ * The command is registered by the {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as
  * `'tableWidth'` editor command.
  *
  * To change width of the selected table, execute the command:
@@ -27,7 +27,7 @@ export default class TableWidthCommand extends TablePropertyCommand {
 	/**
 	 * Creates a new `TableWidthCommand` instance.
 	 *
-	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
 	 */
 	constructor( editor ) {
 		super( editor, 'width' );

+ 22 - 4
packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.js

@@ -21,9 +21,27 @@ import TableWidthCommand from './commands/tablewidthcommand';
 import TableHeightCommand from './commands/tableheightcommand';
 import TableAlignmentCommand from './commands/tablealignmentcommand';
 
+// RegExp used for matching margin style in converters.
+const MARGIN_REG_EXP = /^(auto|0(%|[a-z]{2,4})?)$/;
+const ALIGN_VALUES_REG_EXP = /^(left|right|center)$/;
+
 /**
  * The table properties editing feature.
  *
+ * Introduces table's model attributes and their conversion:
+ *
+ * - border: `borderStyle`, `borderColor` and `borderWidth`
+ * - background color: `backgroundColor`
+ * - horizontal alignment: `alignment`
+ * - width & height: `width` & `height`
+ *
+ * It also registers commands used to manipulate the above attributes:
+ *
+ * - border: `'tableBorderStyle'`, `'tableBorderColor'` and `'tableBorderWidth'` commands
+ * - background color: `'tableBackgroundColor'`
+ * - horizontal alignment: `'tableAlignment'`
+ * - width & height: `'tableWidth'` & `'tableHeight'`
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class TablePropertiesEditing extends Plugin {
@@ -85,7 +103,7 @@ function enableBorderProperties( schema, conversion ) {
 	downcastTableAttribute( conversion, 'borderWidth', 'border-width' );
 }
 
-// Enables `'alignment'` attribute for table.
+// Enables the `'alignment'` attribute for table.
 //
 // @param {module:engine/model/schema~Schema} schema
 // @param {module:engine/conversion/conversion~Conversion} conversion
@@ -97,8 +115,8 @@ function enableAlignmentProperty( schema, conversion ) {
 		.attributeToAttribute( {
 			view: {
 				styles: {
-					'margin-right': /^(auto|0(%|[a-z]{2,4})?)$/,
-					'margin-left': /^(auto|0(%|[a-z]{2,4})?)$/
+					'margin-right': MARGIN_REG_EXP,
+					'margin-left': MARGIN_REG_EXP
 				}
 			},
 			model: {
@@ -122,7 +140,7 @@ function enableAlignmentProperty( schema, conversion ) {
 		.attributeToAttribute( {
 			view: {
 				attributes: {
-					align: /^(left|right|center)$/
+					align: ALIGN_VALUES_REG_EXP
 				}
 			},
 			model: {

+ 15 - 14
packages/ckeditor5-table/tests/_utils/utils.js

@@ -16,6 +16,7 @@ import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils'
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 const WIDGET_TABLE_CELL_CLASS = 'ck-editor__editable ck-editor__nested-editable';
+const BORDER_REG_EXP = /[\s\S]+/;
 
 /**
  * Returns a model representation of a table shorthand notation:
@@ -57,7 +58,7 @@ export function modelTable( tableData, attributes ) {
 }
 
 /**
- * Helper method for creating a test table with a single table cell which attributes might be objects.
+ * A helper method for creating a test table with a single table cell of which attributes are defined as objects.
  *
  *		setTableCellWithObjectAttributes(
  *			model,
@@ -69,8 +70,8 @@ export function modelTable( tableData, attributes ) {
  *			'fo[o]'
  *		);
  *
- * This will create a model table with one table cell with a "foo" text. Selection will be set on last "o" and a table cell will have three
- * attributes.
+ * This will create a model table with one table cell with a "foo" text.
+ * The selection will be set on the last "o" and a table cell will have three attributes.
  *
  * @param {module:engine/model/model~Model} model
  * @param {Object} attributes
@@ -89,7 +90,7 @@ export function setTableCellWithObjectAttributes( model, attributes, cellContent
 }
 
 /**
- * Helper method for creating a test table, with a single table cell, which attributes might be objects.
+ * A helper method for creating a test table, with a single table cell. Table attributes are defined as objects.
  *
  *		setTableWithObjectAttributes(
  *			model,
@@ -100,8 +101,8 @@ export function setTableCellWithObjectAttributes( model, attributes, cellContent
  *			'fo[o]'
  *		);
  *
- * This will create a model table with one table cell with a "foo" text. Selection will be set on last "o" and a table will have three
- * attributes.
+ * This will create a model table with one table cell with a "foo" text.
+ * The selection will be set on last "o" and a table will have three attributes.
  *
  * @param {module:engine/model/model~Model} model
  * @param {Object} attributes
@@ -247,7 +248,7 @@ export function defaultConversion( conversion, asWidget = false ) {
 		view: {
 			name: 'td',
 			styles: {
-				border: /[\s\S]+/
+				border: BORDER_REG_EXP
 			}
 		},
 		model: {
@@ -258,17 +259,17 @@ export function defaultConversion( conversion, asWidget = false ) {
 }
 
 /**
- * Assertion helper for top-right-bottom-left attribute object.
+ * An assertion helper for top-right-bottom-left attribute object.
  *
  * @param {module:engine/model/node~Node} element
  * @param {String} key Attribute key
- * @param {String} top Top value. Pass null to omit value in attributes object.
+ * @param {String} top Top value. Pass `null` to omit the value in the attributes object.
  * @param {String} [right=top] Right value - defaults to top if not provided.
- * Pass null to omit value in attributes object.
+ * Pass `null` to omit the value in the attributes object.
  * @param {String} [bottom=top] Bottom value - defaults to top (right value must be defined).
- * Pass null to omit value in attributes object.
+ * Pass `null` to omit the value in the attributes object.
  * @param {String} [left=right] Left value - defaults to right (bottom and right values must be defined).
- * Pass null to omit value in attributes object.
+ * Pass `null` to omit the value in the attributes object.
  */
 export function assertTRBLAttribute( element, key, top, right = top, bottom = top, left = right ) {
 	const styleObject = {};
@@ -293,7 +294,7 @@ export function assertTRBLAttribute( element, key, top, right = top, bottom = to
 }
 
 /**
- * Assertion helper for testing <table> style attribute.
+ * An assertion helper for testing the `<table>` style attribute.
  *
  * @param {module:core/editor/editor~Editor} editor
  * @param {String} tableStyle A style to assert on table.
@@ -307,7 +308,7 @@ export function assertTableStyle( editor, tableStyle ) {
 }
 
 /**
- * Assertion helper for testing <td> style attribute.
+ * An assertion helper for testing the `<td>` style attribute.
  *
  * @param {module:core/editor/editor~Editor} editor
  * @param {String} tableCellStyle A style to assert on td.

+ 316 - 249
packages/ckeditor5-table/tests/manual/tableproperties.html

@@ -1,345 +1,412 @@
-<div id="editor">
-	<figure>
-		<table style="border: 1px solid green;background:#fdfd77;width:200px;height:140px">
-			<thead>
-				<tr>
-					<td><p>Column A</p></td>
-					<td style="border:2px dashed black;background-color: lightblue"><p>Column B</p></td>
-					<td style="background: palevioletred"><p>Column C</p></td>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td style="border-color: deeppink deepskyblue;border-style: solid;border-width: 1px;border-bottom-width: 2px;border-right-style: dotted;">
-						<p>A1</p>
-					</td>
-					<td style="border: 1px solid blue;"><p>B1</p></td>
-					<td style="border: 1px solid red;"><p>C1</p></td>
-				</tr>
-				<tr>
-					<td style="border-right:1px solid blue;"><p>A2</p></td>
-					<td style="background:transparent;"><p>B2</p></td>
-					<td><p>C3</p></td>
-				</tr>
-			</tbody>
-		</table>
-	</figure>
+<div style="display:flex">
+	<div>
+		<div id="editor">
+			<figure>
+				<table style="border: 1px solid green;background:#fdfd77;width:200px;height:140px">
+					<thead>
+						<tr>
+							<td><p>Column A</p></td>
+							<td style="border:2px dashed black;background-color: lightblue"><p>Column B</p></td>
+							<td style="background: palevioletred"><p>Column C</p></td>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td style="border-color: deeppink deepskyblue;border-style: solid;border-width: 1px;border-bottom-width: 2px;border-right-style: dotted;">
+								<p>A1</p>
+							</td>
+							<td style="border: 1px solid blue;"><p>B1</p></td>
+							<td style="border: 1px solid red;"><p>C1</p></td>
+						</tr>
+						<tr>
+							<td style="border-right:1px solid blue;"><p>A2</p></td>
+							<td style="background:transparent;"><p>B2</p></td>
+							<td><p>C3</p></td>
+						</tr>
+					</tbody>
+				</table>
+			</figure>
 
-	<h3>Table from Word</h3>
+			<h3>Table from Word</h3>
 
-	<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
-		   style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
+			<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
+				   style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
 mso-yfti-tbllook:1184;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
-		<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+				<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 mso-border-alt:solid windowtext .5pt;background:#92D050;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>w<o:p></o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>w
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:solid windowtext 1.0pt;
 border-left:none;border-bottom:dotted #FFC000 3.0pt;border-right:solid windowtext 1.0pt;
 mso-border-left-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 mso-border-bottom-alt:dotted #FFC000 3.0pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
 border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
 border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border:solid windowtext 1.0pt;
 border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:1'>
-			<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:1'>
+					<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
 solid windowtext 1.0pt;border-bottom:solid windowtext 1.0pt;border-right:
 dotted #FFC000 3.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:
 solid windowtext .5pt;mso-border-right-alt:dotted #FFC000 3.0pt;background:
 #92D050;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
 none;border-bottom:dotted #FFC000 3.0pt;border-right:dotted #FFC000 3.0pt;
 mso-border-top-alt:dotted #FFC000 3.0pt;mso-border-left-alt:dotted #FFC000 3.0pt;
 padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>Funny border<o:p></o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>Funny border
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:dotted #FFC000 3.0pt;
 mso-border-alt:solid windowtext .5pt;mso-border-left-alt:dotted #FFC000 3.0pt;
 padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:dashed red 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;mso-border-bottom-alt:dashed red .5pt;
 padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>Border bottom<o:p></o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>Border bottom
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:2;height:70.35pt'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:2;height:70.35pt'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:dotted #FFC000 3.0pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;mso-border-top-alt:dotted #FFC000 3.0pt;
 padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:dashed red .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;mso-border-top-alt:dashed red .5pt;
 padding:0in 5.4pt 0in 5.4pt;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:.1in .5in .5in .5in;height:70.35pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>margin<o:p></o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:3;height:31.0pt'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>margin
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:3;height:31.0pt'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>TL<o:p></o:p></p>
-			</td>
-			<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>TL
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:center;line-height:normal'>TC<o:p></o:p></p>
-			</td>
-			<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:center;line-height:normal'>TC
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 valign=top style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:right;line-height:normal'>TR<o:p></o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:4;height:31.0pt'>
-			<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
+						<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:right;line-height:normal'>TR
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:4;height:31.0pt'>
+					<td width=30 valign=top style='width:22.25pt;border:solid windowtext 1.0pt;
 border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border:none;border-right:solid windowtext 1.0pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border:none;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-right-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;
 height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=125 style='width:93.5pt;border-top:none;border-left:none;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=125 style='width:93.5pt;border-top:none;border-left:none;
 border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>L<o:p></o:p></p>
-			</td>
-			<td width=125 style='width:93.5pt;border-top:none;border-left:none;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>L
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 style='width:93.5pt;border-top:none;border-left:none;
 border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:center;line-height:normal'>C<o:p></o:p></p>
-			</td>
-			<td width=138 style='width:93.5pt;border-top:none;border-left:none;
+						<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:center;line-height:normal'>C
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 style='width:93.5pt;border-top:none;border-left:none;
 border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:31.0pt'>
-				<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:right;line-height:normal'>R<o:p></o:p></p>
-			</td>
-		</tr>
-		<tr style='mso-yfti-irow:5;mso-yfti-lastrow:yes;height:30.1pt'>
-			<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
+						<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:right;line-height:normal'>R
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+				<tr style='mso-yfti-irow:5;mso-yfti-lastrow:yes;height:30.1pt'>
+					<td width=30 valign=top style='width:22.25pt;border-top:none;border-left:
 solid windowtext 1.0pt;border-bottom:solid windowtext 1.0pt;border-right:
 none;mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
 mso-border-left-alt:solid windowtext .5pt;mso-border-bottom-alt:solid windowtext .5pt;
 background:#92D050;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'><o:p>&nbsp;</o:p></p>
-			</td>
-			<td width=220 valign=top style='width:164.75pt;border:none;padding:0in 5.4pt 0in 5.4pt;
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>
+							<o:p>&nbsp;</o:p>
+						</p>
+					</td>
+					<td width=220 valign=top style='width:164.75pt;border:none;padding:0in 5.4pt 0in 5.4pt;
 height:30.1pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>No border<o:p></o:p></p>
-			</td>
-			<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>No border
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
 mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
 padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
-normal'>BL<o:p></o:p></p>
-			</td>
-			<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal style='margin-bottom:0in;margin-bottom:.0001pt;line-height:
+normal'>BL
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=125 valign=bottom style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:center;line-height:normal'>BC<o:p></o:p></p>
-			</td>
-			<td width=138 valign=bottom style='width:93.5pt;border-top:none;border-left:
+						<p class=MsoNormal align=center style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:center;line-height:normal'>BC
+							<o:p></o:p>
+						</p>
+					</td>
+					<td width=138 valign=bottom style='width:93.5pt;border-top:none;border-left:
 none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
 mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
 mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt;height:30.1pt'>
-				<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
-text-align:right;line-height:normal'>BR<o:p></o:p></p>
-			</td>
-		</tr>
-	</table>
+						<p class=MsoNormal align=right style='margin-bottom:0in;margin-bottom:.0001pt;
+text-align:right;line-height:normal'>BR
+							<o:p></o:p>
+						</p>
+					</td>
+				</tr>
+			</table>
 
-	<h3>Table from GDocs</h3>
-	<table style="border:none;border-collapse:collapse;width:468pt;table-layout:fixed">
-		<colgroup>
-			<col>
-			<col>
-			<col>
-		</colgroup>
-		<tbody>
-			<tr style="height:21pt">
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">A</span>
-					</p></td>
-				<td style="border-left:solid #000000 1pt;border-right:dotted #ff0000 1.5pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">B</span>
-					</p></td>
-				<td style="border-left:dotted #ff0000 1.5pt;border-right:dotted #ff0000 1.5pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">C</span>
-					</p></td>
-			</tr>
-			<tr style="height:21pt">
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a1</span>
-					</p></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dashed #4c1130 3pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">b1</span>
-					</p></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">c1</span>
-					</p></td>
-			</tr>
-			<tr style="height:21pt">
-				<td style="border-left:solid #000000 1pt;border-right:dashed #4c1130 3pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:dashed #4c1130 3pt;border-right:dashed #4c1130 3pt;border-bottom:dashed #4c1130 3pt;border-top:dashed #4c1130 3pt;vertical-align:middle;background-color:#a2c4c9;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;text-align: center;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; color: rgb(204, 0, 0); background-color: transparent; font-weight: 700; font-style: italic; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">AWESOME</span>
-					</p></td>
-				<td style="border-left:dashed #4c1130 3pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-		</tbody>
-	</table>
+			<h3>Table from GDocs</h3>
+			<table style="border:none;border-collapse:collapse;width:468pt;table-layout:fixed">
+				<colgroup>
+					<col>
+					<col>
+					<col>
+				</colgroup>
+				<tbody>
+					<tr style="height:21pt">
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">A</span>
+							</p></td>
+						<td style="border-left:solid #000000 1pt;border-right:dotted #ff0000 1.5pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;background-color:#fff2cc;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">B</span>
+							</p></td>
+						<td style="border-left:dotted #ff0000 1.5pt;border-right:dotted #ff0000 1.5pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">C</span>
+							</p></td>
+					</tr>
+					<tr style="height:21pt">
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a1</span>
+							</p></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dashed #4c1130 3pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">b1</span>
+							</p></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:dotted #ff0000 1.5pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">c1</span>
+							</p></td>
+					</tr>
+					<tr style="height:21pt">
+						<td style="border-left:solid #000000 1pt;border-right:dashed #4c1130 3pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:dashed #4c1130 3pt;border-right:dashed #4c1130 3pt;border-bottom:dashed #4c1130 3pt;border-top:dashed #4c1130 3pt;vertical-align:middle;background-color:#a2c4c9;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;text-align: center;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; color: rgb(204, 0, 0); background-color: transparent; font-weight: 700; font-style: italic; font-variant-numeric: normal; font-variant-east-asian: normal; text-decoration-line: underline; text-decoration-skip-ink: none; vertical-align: baseline; white-space: pre-wrap;">AWESOME</span>
+							</p></td>
+						<td style="border-left:dashed #4c1130 3pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #ff0000 1.5pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+				</tbody>
+			</table>
 
-	<h3>Table from GDocs (all styles set + column widths)</h3>
+			<h3>Table from GDocs (all styles set + column widths)</h3>
 
-	<table style="border:none;border-collapse:collapse;">
-		<colgroup>
-			<col width="27">
-			<col width="192">
-			<col width="17">
-		</colgroup>
-		<tbody>
-			<tr style="height:0pt">
-				<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:solid #000000 1pt;border-bottom:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
-						style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a</span>
-					</p></td>
-				<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-			<tr style="height:144pt">
-				<td style="border-right:dotted #7f6000 2.25pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:dotted #7f6000 2.25pt;border-right:dotted #7f6000 2.25pt;border-bottom:dotted #7f6000 2.25pt;border-top:dotted #7f6000 2.25pt;vertical-align:middle;background-color:#ffd966;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br><br></td>
-				<td style="border-left:dotted #7f6000 2.25pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-			<tr style="height:0pt">
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-				<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
-					<br></td>
-			</tr>
-		</tbody>
-	</table>
-</div>
+			<table style="border:none;border-collapse:collapse;">
+				<colgroup>
+					<col width="27">
+					<col width="192">
+					<col width="17">
+				</colgroup>
+				<tbody>
+					<tr style="height:0pt">
+						<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:solid #000000 1pt;border-bottom:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span
+								style="font-size: 11pt; font-family: Arial; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">a</span>
+							</p></td>
+						<td style="border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+					<tr style="height:144pt">
+						<td style="border-right:dotted #7f6000 2.25pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:dotted #7f6000 2.25pt;border-right:dotted #7f6000 2.25pt;border-bottom:dotted #7f6000 2.25pt;border-top:dotted #7f6000 2.25pt;vertical-align:middle;background-color:#ffd966;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br><br></td>
+						<td style="border-left:dotted #7f6000 2.25pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+					<tr style="height:0pt">
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:dotted #7f6000 2.25pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+						<td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;">
+							<br></td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 
-<h2>Original editor source</h2>
+	</div>
+	<div style="padding-left: 2em;">
+		<h2>Source data</h2>
+
+		<div id="cloned-source"></div>
+	</div>
+</div>
 
-<div id="cloned-source"></div>

+ 10 - 0
packages/ckeditor5-table/tests/manual/tableproperties.md

@@ -1,2 +1,12 @@
 ### Loading
 
+The editor should be loaded with tables:
+
+1. A table with various table styles set.
+1. A "Table from Word" sample.
+1. A "Table from GDocs" sample.
+1. A "Table from GDocs" sample that has one cell with many styles set.
+
+Compare their visual styles with the ones beside the editor. Most of the styles should be preserved.
+
+**Note**: Not all styles are preserved (i.e. the column height/width in the second GDocs table). Also note that the original table might have a different cell padding.