From b87e11c849750ebae999717a191b67af0990f40f Mon Sep 17 00:00:00 2001
From: jinhofer <jinhofer@umn.edu>
Date: Thu, 20 Aug 2015 09:59:34 -0500
Subject: [PATCH] MDL-45515 atto/plugins: Added border style and BG colour to
 table

This commit adds the option for borders to be added and
styled, background colours to be set, and width to be set for tables
in the Atto HTML Editor. For those that desire to restrict
use of this, the plugin settings allow the admins to restrict
how much freedom their users have with borders.
---
 .../atto/plugins/table/lang/en/atto_table.php      |  28 ++
 lib/editor/atto/plugins/table/lib.php              |  32 +-
 lib/editor/atto/plugins/table/settings.php         | 110 ++++
 lib/editor/atto/plugins/table/styles.css           |  25 +
 .../atto/plugins/table/tests/behat/table.feature   |   2 -
 .../moodle-atto_table-button-debug.js              | 554 ++++++++++++++++++---
 .../moodle-atto_table-button-min.js                |   7 +-
 .../moodle-atto_table-button.js                    | 554 ++++++++++++++++++---
 .../atto/plugins/table/yui/src/button/js/button.js | 554 ++++++++++++++++++---
 9 files changed, 1647 insertions(+), 219 deletions(-)
 create mode 100644 lib/editor/atto/plugins/table/settings.php
 rewrite lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js (99%)

diff --git a/lib/editor/atto/plugins/table/lang/en/atto_table.php b/lib/editor/atto/plugins/table/lang/en/atto_table.php
index fa0c076b79c..950e076a1bf 100644
--- a/lib/editor/atto/plugins/table/lang/en/atto_table.php
+++ b/lib/editor/atto/plugins/table/lang/en/atto_table.php
@@ -24,7 +24,28 @@
 
 $string['addcolumnafter'] = 'Insert column after';
 $string['addrowafter'] = 'Insert row after';
+$string['all'] = 'Around each cell';
+$string['allowbackgroundcolour'] = 'Allow background colour';
+$string['allowbackgroundcolour_desc'] = 'Allow users to set the background colour for the table';
+$string['allowborder'] = 'Allow borders';
+$string['allowborder_desc'] = 'If checked, users will be able to customize borders when creating and editing a table';
+$string['allowborderstyle'] = 'Allow border styling';
+$string['allowborderstyle_desc'] = 'Allow users to style borders on tables. If this is not checked, but allowborder is checked, the default style is solid.<br>NOTE that this setting will not have an impact unless allowborder is checked';
+$string['allowbordersize'] = 'Allow border size control';
+$string['allowbordersize_desc'] = 'Allow users to set the size of borders on tables. If this is not checked, but allowborder is checked, the default size is 1px.<br>NOTE that this setting will not have an impact unless allowborder is checked';
+$string['allowbordercolour'] = 'Allow border colour';
+$string['allowbordercolour_desc'] = 'Allow users to set the colour of the borders on tables. If this is not checked, but allowborder is checked, the default colour is black.<br>NOTE that this setting will not have an impact unless allowborder is checked';
+$string['allowwidth'] = 'Allow width';
+$string['allowwidth_desc'] = 'Allow users to set the width of the tables.';
+$string['appearance'] = 'Appearance';
+$string['backgroundcolour'] = 'Background colour';
 $string['both'] = 'Both';
+$string['bordercolour'] = 'Border colour';
+$string['borders'] = 'Borders';
+$string['bordersize'] = 'Size of borders';
+$string['borderstyles'] = 'Style of borders';
+$string['borderstyles_desc'] = 'Allowed border styles, separated by commas';
+$string['borderstyles_default'] = 'solid,dashed,dotted';
 $string['caption'] = 'Caption';
 $string['captionposition'] = 'Caption position';
 $string['columns'] = 'Columns';
@@ -37,8 +58,15 @@ $string['movecolumnleft'] = 'Move column left';
 $string['movecolumnright'] = 'Move column right';
 $string['moverowdown'] = 'Move row down';
 $string['moverowup'] = 'Move row up';
+$string['noborder'] = 'No border';
+$string['none'] = 'None';
 $string['numberofcolumns'] = 'Number of columns';
 $string['numberofrows'] = 'Number of rows';
+$string['outer'] = 'Around table';
 $string['pluginname'] = 'Table';
 $string['rows'] = 'Rows';
+$string['settings'] = 'Table settings';
 $string['updatetable'] = 'Update table';
+$string['width'] = 'Table width (in %)';
+$string['themedefault'] = 'Theme default';
+$string['transparent'] = 'Transparent';
diff --git a/lib/editor/atto/plugins/table/lib.php b/lib/editor/atto/plugins/table/lib.php
index f9c0b5e5524..d865713b738 100644
--- a/lib/editor/atto/plugins/table/lib.php
+++ b/lib/editor/atto/plugins/table/lib.php
@@ -32,6 +32,7 @@ function atto_table_strings_for_js() {
 
     $PAGE->requires->strings_for_js(array('createtable',
                                           'updatetable',
+                                          'appearance',
                                           'headers',
                                           'caption',
                                           'columns',
@@ -48,7 +49,19 @@ function atto_table_strings_for_js() {
                                           'moverowup',
                                           'deleterow',
                                           'deletecolumn',
-                                          'captionposition'),
+                                          'captionposition',
+                                          'borders',
+                                          'bordersize',
+                                          'bordercolour',
+                                          'borderstyles',
+                                          'none',
+                                          'all',
+                                          'backgroundcolour',
+                                          'width',
+                                          'outer',
+                                          'noborder',
+                                          'transparent',
+                                          'themedefault'),
                                     'atto_table');
 
     $PAGE->requires->strings_for_js(array('top',
@@ -56,3 +69,20 @@ function atto_table_strings_for_js() {
                                     'editor');
 }
 
+/**
+ * Set params for this plugin
+ * @param string $elementid
+ * @param string $options
+ * @param string $foptions
+ */
+function atto_table_params_for_js($elementid, $options, $foptions) {
+    $params = array('allowBorders' => (bool) get_config('atto_table', 'allowborders'),
+                    'allowBorderStyles' => (bool) get_config('atto_table', 'allowborderstyles'),
+                    'borderStyles' => get_config('atto_table', 'borderstyles'),
+                    'allowBorderSize' => (bool) get_config('atto_table', 'allowbordersize'),
+                    'allowBorderColour' => (bool) get_config('atto_table', 'allowbordercolour'),
+                    'allowWidth' => (bool) get_config('atto_table', 'allowwidth'),
+                    'availableColors' => get_config('atto_table', 'availablecolors'),
+                    'allowBackgroundColour' => (bool) get_config('atto_table', 'allowbackgroundcolour'));
+    return $params;
+}
diff --git a/lib/editor/atto/plugins/table/settings.php b/lib/editor/atto/plugins/table/settings.php
new file mode 100644
index 00000000000..4462a954384
--- /dev/null
+++ b/lib/editor/atto/plugins/table/settings.php
@@ -0,0 +1,110 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Settings that allow turning on and off various table features
+ *
+ * @package     atto_table
+ * @copyright   2015 Joseph Inhofer <jinhofer@umn.edu>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+$ADMIN->add('editoratto', new admin_category('atto_table', new lang_string('pluginname', 'atto_table')));
+
+$settings = new admin_settingpage('atto_table_settings', new lang_string('settings', 'atto_table'));
+if ($ADMIN->fulltree) {
+    $name = new lang_string('allowborder', 'atto_table');
+    $desc = new lang_string('allowborder_desc', 'atto_table');
+    $default = 0;
+
+    $setting = new admin_setting_configcheckbox('atto_table/allowborders',
+                                                $name,
+                                                $desc,
+                                                $default);
+    $settings->add($setting);
+
+    $name = new lang_string('allowborderstyle', 'atto_table');
+    $desc = new lang_string('allowborderstyle_desc', 'atto_table');
+    $default = 0;
+
+    $setting = new admin_setting_configcheckbox('atto_table/allowborderstyles',
+                                                $name,
+                                                $desc,
+                                                $default);
+    $settings->add($setting);
+
+    $name = new lang_string('borderstyles', 'atto_table');
+    $desc = new lang_string('borderstyles_desc', 'atto_table');
+    $default = ['none' => 'none',
+    'hidden' => 'hidden',
+    'dotted' => 'dotted',
+    'dashed' => 'dashed',
+    'solid' => 'solid',
+    'double' => 'double',
+    'groove' => 'groove',
+    'ridge' => 'ridge',
+    'inset' => 'inset',
+    'outset' => 'outset'];
+
+    $setting = new admin_setting_configmultiselect('atto_table/borderstyles',
+                                                $name,
+                                                $desc,
+                                                array_keys($default),
+                                                $default);
+    $settings->add($setting);
+
+    $name = new lang_string('allowbordersize', 'atto_table');
+    $desc = new lang_string('allowbordersize_desc', 'atto_table');
+    $default = 0;
+
+    $setting = new admin_setting_configcheckbox('atto_table/allowbordersize',
+                                                $name,
+                                                $desc,
+                                                $default);
+    $settings->add($setting);
+
+    $name = new lang_string('allowbordercolour', 'atto_table');
+    $desc = new lang_string('allowbordercolour_desc', 'atto_table');
+    $default = 0;
+
+    $setting = new admin_setting_configcheckbox('atto_table/allowbordercolour',
+                                                $name,
+                                                $desc,
+                                                $default);
+    $settings->add($setting);
+
+    $name = new lang_string('allowbackgroundcolour', 'atto_table');
+    $desc = new lang_string('allowbackgroundcolour_desc', 'atto_table');
+    $default = 0;
+
+    $setting = new admin_setting_configcheckbox('atto_table/allowbackgroundcolour',
+                                                $name,
+                                                $desc,
+                                                $default);
+    $settings->add($setting);
+
+    $name = new lang_string('allowwidth', 'atto_table');
+    $desc = new lang_string('allowwidth_desc', 'atto_table');
+    $default = 0;
+
+    $setting = new admin_setting_configcheckbox('atto_table/allowwidth',
+                                                $name,
+                                                $desc,
+                                                $default);
+    $settings->add($setting);
+}
diff --git a/lib/editor/atto/plugins/table/styles.css b/lib/editor/atto/plugins/table/styles.css
index 69967c6523e..dbdcb5be518 100644
--- a/lib/editor/atto/plugins/table/styles.css
+++ b/lib/editor/atto/plugins/table/styles.css
@@ -9,3 +9,28 @@ div.editor_atto_content caption {
 div.editor_atto_content caption {
     height: auto;
 }
+
+div.availablecolors {
+    max-width: 55%;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+div.availablecolors label:not(.hideborder) {
+    border: 1px solid #ddd;
+}
+
+div.availablecolors label {
+    border-radius: 4px;
+    display: inline-block;
+    font-size: 0.1em;
+    padding: 2px;
+    padding-left: 22px;
+}
+
+div.availablecolors label input[type="radio"] {
+    float: none;
+    margin: 0;
+    margin-left: -15px;
+}
+
diff --git a/lib/editor/atto/plugins/table/tests/behat/table.feature b/lib/editor/atto/plugins/table/tests/behat/table.feature
index 3c6507e61e6..99bcf3d7619 100644
--- a/lib/editor/atto/plugins/table/tests/behat/table.feature
+++ b/lib/editor/atto/plugins/table/tests/behat/table.feature
@@ -34,5 +34,3 @@ Feature: Atto tables
     And I press "Update table"
     And I press "Save changes"
     Then ".blog_entry table caption" "css_element" should be visible
-
-
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
index 48f3a7a592a..1beb527dec2 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-debug.js
@@ -34,38 +34,21 @@ YUI.add('moodle-atto_table-button', function (Y, NAME) {
  */
 
 var COMPONENT = 'atto_table',
-    EDITTEMPLATE = '' +
-        '<form class="{{CSS.FORM}}">' +
-            '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
-            '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
-            '<br/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
-            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
-                '<option value=""></option>' +
-                '<option value="top">{{get_string "top" "editor"}}</option>' +
-                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
-            '</select>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
-            '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
-                '<option value="columns">{{get_string "columns" component}}' + '</option>' +
-                '<option value="rows">{{get_string "rows" component}}' + '</option>' +
-                '<option value="both">{{get_string "both" component}}' + '</option>' +
-            '</select>' +
-            '<br/>' +
-            '<div class="mdl-align">' +
-                '<br/>' +
-                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
-            '</div>' +
-        '</form>',
+    DEFAULT = {
+        BORDERSTYLE: 'solid',
+        BORDERWIDTH: '1'
+    },
+    DIALOGUE = {
+        WIDTH: '450px'
+    },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">' +
+            '{{get_string "captionposition" component}}</label>' +
             '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
                 '<option value=""></option>' +
                 '<option value="top">{{get_string "top" "editor"}}</option>' +
@@ -79,16 +62,120 @@ var COMPONENT = 'atto_table',
                 '<option value="both">{{get_string "both" component}}' + '</option>' +
             '</select>' +
             '<br/>' +
-            '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
-            '<input class="{{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_columns" class="sameline">{{get_string "numberofcolumns" component}}</label>' +
-            '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns" ' +
-                    'size="8" min="1" max="20"/>' +
-            '<br/>' +
-            '<div class="mdl-align">' +
+            '{{#if nonedit}}' +
+                '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
+                '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+                'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
+                '<br/>' +
+                '<label for="{{elementid}}_atto_table_columns" ' +
+                'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
+                '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+                'size="8" min="1" max="20"/>' +
                 '<br/>' +
-                '<button class="{{CSS.SUBMIT}}" type="submit">{{get_string "createtable" component}}</button>' +
+            '{{/if}}' +
+            '{{#if allowStyling}}' +
+                '<fieldset>' +
+                '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
+                '{{#if allowBorders}}' +
+                    '<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
+                    '<select class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
+                        '<option value="default">{{get_string "themedefault" component}}' + '</option>' +
+                        '<option value="none">{{get_string "noborder" component}}' + '</option>' +
+                        '<option value="outer">{{get_string "outer" component}}' + '</option>' +
+                        '<option value="all">{{get_string "all" component}}' + '</option>' +
+                    '</select>' +
+                    '<br>' +
+                    '{{#if allowBorderStyles}}' +
+                        '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+                        '{{get_string "borderstyles" component}}</label>' +
+                        '<select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+                            '{{#each borderStyles}}' +
+                                '<option value="' + '{{this}}' + '">' + '{{this}}' + '</option>' +
+                            '{{/each}}' +
+                        '</select>' +
+                        '<br>' +
+                    '{{/if}}' +
+                    '{{#if allowBorderSize}}' +
+                        '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+                        '{{get_string "bordersize" component}}</label>' +
+                        '<input id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
+                        'type="number" value="1" size="8" min="1" max="50"/>' +
+                        '<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
+                        '<br>' +
+                    '{{/if}}' +
+                    '{{#if allowBorderColour}}' +
+                        '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+                        '{{get_string "bordercolour" component}}</label>' +
+                        '<div id="{{elementid}}_atto_table_bordercolour"' +
+                        'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                            '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
+                            'style="background-color:transparent;color:transparent">' +
+
+                                '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
+                                'type="radio" name="borderColour" value="transparent" checked="checked"'+
+                                'title="{{get_string "transparent" component}}"></input>' +
+
+                                '{{get_string "transparent" component}}' +
+                            '</label>' +
+                            '{{#each availableColours}}' +
+                                '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+                                'style="background-color:{{this}};color:{{this}}">' +
+
+                                    '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+                                    'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+                                    '{{this}}' +
+                                '</label>' +
+                            '{{/each}}' +
+                        '</div>' +
+                        '<br>' +
+                    '{{/if}}' +
+                '{{/if}}' +
+                '{{#if allowBackgroundColour}}' +
+                    '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+                    '{{get_string "backgroundcolour" component}}</label>' +
+                    '<div id="{{elementid}}_atto_table_backgroundcolour"' +
+                    'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
+                        'style="background-color:transparent;color:transparent">' +
+
+                            '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
+                            'type="radio" name="backgroundColour" value="transparent" checked="checked"'+
+                            'title="{{get_string "transparent" component}}"></input>' +
+
+                            '{{get_string "transparent" component}}' +
+                        '</label>' +
+
+                        '{{#each availableColours}}' +
+                            '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+                            'style="background-color:{{this}};color:{{this}}">'+
+
+                                '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+                                'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+                                '{{this}}' +
+                            '</label>' +
+                        '{{/each}}' +
+                    '</div>' +
+                    '<br>' +
+                '{{/if}}' +
+                '{{#if allowWidth}}' +
+                    '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+                    '{{get_string "width" component}}</label>' +
+                    '<input id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/>' +
+                    '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
+                    '<br>' +
+                '{{/if}}' +
+                '</fieldset>' +
+            '{{/if}}' +
+            '<div class="mdl-align">' +
+            '<br/>' +
+            '{{#if edit}}' +
+                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+            '{{/if}}' +
+            '{{#if nonedit}}' +
+                '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+            '{{/if}}' +
             '</div>' +
         '</form>',
     CSS = {
@@ -98,7 +185,17 @@ var COMPONENT = 'atto_table',
         ROWS: 'rows',
         COLUMNS: 'columns',
         SUBMIT: 'submit',
-        FORM: 'atto_form'
+        FORM: 'atto_form',
+        BORDERS: 'borders',
+        BORDERSIZE: 'bordersize',
+        BORDERSIZEUNIT: 'px',
+        BORDERCOLOUR: 'bordercolour',
+        BORDERSTYLE: 'borderstyle',
+        BACKGROUNDCOLOUR: 'backgroundcolour',
+        WIDTH: 'customwidth',
+        WIDTHUNIT: '%',
+        AVAILABLECOLORS: 'availablecolors',
+        COLOURROW: 'colourrow'
     },
     SELECTORS = {
         CAPTION: '.' + CSS.CAPTION,
@@ -107,7 +204,16 @@ var COMPONENT = 'atto_table',
         ROWS: '.' + CSS.ROWS,
         COLUMNS: '.' + CSS.COLUMNS,
         SUBMIT: '.' + CSS.SUBMIT,
-        FORM: '.atto_form'
+        BORDERS: '.' + CSS.BORDERS,
+        BORDERSIZE: '.' + CSS.BORDERSIZE,
+        BORDERCOLOURS: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]',
+        SELECTEDBORDERCOLOUR: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]:checked',
+        BORDERSTYLE: '.' + CSS.BORDERSTYLE,
+        BACKGROUNDCOLOURS: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]',
+        SELECTEDBACKGROUNDCOLOUR: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]:checked',
+        FORM: '.atto_form',
+        WIDTH: '.' + CSS.WIDTH,
+        AVAILABLECOLORS: '.' + CSS.AVAILABLECOLORS
     };
 
 Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@@ -155,7 +261,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             callback: this._displayTableEditor,
             tags: 'table'
         });
-
         // Disable mozilla table controls.
         if (Y.UA.gecko) {
             document.execCommand("enableInlineTableEditing", false, false);
@@ -177,11 +282,12 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             var dialogue = this.getDialogue({
                 headerContent: M.util.get_string('createtable', COMPONENT),
                 focusAfterHide: true,
-                focusOnShowSelector: SELECTORS.CAPTION
+                focusOnShowSelector: SELECTORS.CAPTION,
+                width: DIALOGUE.WIDTH
             });
 
             // Set the dialogue content, and then show the dialogue.
-            dialogue.set('bodyContent', this._getDialogueContent())
+            dialogue.set('bodyContent', this._getDialogueContent(false))
                     .show();
         }
     },
@@ -219,28 +325,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     },
 
     /**
-     * Return the edit table dialogue content, attaching any required
-     * events.
-     *
-     * @method _getEditDialogueContent
-     * @private
-     * @return {Node} The content to place in the dialogue.
-     */
-    _getEditDialogueContent: function() {
-        var template = Y.Handlebars.compile(EDITTEMPLATE);
-        this._content = Y.Node.create(template({
-                CSS: CSS,
-                elementid: this.get('host').get('elementid'),
-                component: COMPONENT
-            }));
-
-        // Handle table setting.
-        this._content.one('.submit').on('click', this._updateTable, this);
-
-        return this._content;
-    },
-
-    /**
      * Return the dialogue content for the tool, attaching any required
      * events.
      *
@@ -248,16 +332,33 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      * @private
      * @return {Node} The content to place in the dialogue.
      */
-    _getDialogueContent: function() {
+    _getDialogueContent: function(edit) {
         var template = Y.Handlebars.compile(TEMPLATE);
+        var availableColours = this.get('availableColors');
+
         this._content = Y.Node.create(template({
                 CSS: CSS,
                 elementid: this.get('host').get('elementid'),
-                component: COMPONENT
+                component: COMPONENT,
+                edit: edit,
+                nonedit: !edit,
+                allowStyling: this.get('allowStyling'),
+                allowBorders: this.get('allowBorders'),
+                allowBorderStyles: this.get('allowBorderStyles'),
+                borderStyles: this.get('borderStyles'),
+                allowBorderSize: this.get('allowBorderSize'),
+                allowBorderColour: this.get('allowBorderColour'),
+                allowBackgroundColour: this.get('allowBackgroundColour'),
+                availableColours: availableColours,
+                allowWidth: this.get('allowWidth')
             }));
 
         // Handle table setting.
-        this._content.one('.submit').on('click', this._setTable, this);
+        if (edit) {
+            this._content.one('.submit').on('click', this._updateTable, this);
+        } else {
+            this._content.one('.submit').on('click', this._setTable, this);
+        }
 
         return this._content;
     },
@@ -330,7 +431,17 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         var caption,
             captionposition,
             headers,
+            borders,
+            bordersize,
+            borderstyle,
+            bordercolour,
+            backgroundcolour,
+            backgroundcolourvalue = '#FFFFFF',
+            borderSizeValue = '1',
+            borderStyleValue = 'solid',
+            borderhex = '#FFFFFF',
             table,
+            width,
             captionnode;
 
         e.preventDefault();
@@ -343,8 +454,57 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
         captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
+        borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+        bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+        bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+        borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+        backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
+        width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
+
+        if (bordercolour) {
+            borderhex = bordercolour.get('value');
+        }
+
+        if (bordersize) {
+            borderSizeValue = bordersize.get('value');
+        }
+
+        if (borderstyle) {
+            borderStyleValue = borderstyle.get('value');
+        }
+
+        if (backgroundcolour) {
+            backgroundcolourvalue = backgroundcolour.get('value');
+        }
 
         table = this._lastTarget.ancestor('table');
+        // Clear the inline border styling
+        table.removeAttribute('style');
+        table.all('td, th').each(function() {
+            this.removeAttribute('style');
+        });
+
+        if (borders) {
+            if (borders.get('value') === 'outer') {
+                table.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                              borderStyleValue + ' ' + borderhex);
+            } else if (borders.get('value') === 'all') {
+                table.all('td, th').each(function() {
+                    this.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                             borderStyleValue + ' ' + borderhex);
+                });
+            } else if (borders.get('value') === 'none') {
+                table.setStyle('border', 'none');
+            }
+        }
+
+        if (width && width.get('value')) {
+            table.setStyle('width', width.get('value') + CSS.WIDTHUNIT);
+        }
+
+        if (backgroundcolourvalue !== '') {
+            table.setStyle('background-color', backgroundcolourvalue);
+        }
 
         captionnode = table.one('caption');
         if (!captionnode) {
@@ -428,10 +588,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     _setTable: function(e) {
         var caption,
             captionposition,
+            borders,
+            bordertable = '',
+            bordercell = '',
+            bordersize,
+            borderstyle,
+            bordercolour,
+            borderSizeValue = '1',
+            borderStyleValue = 'solid',
+            borderhex = '#FFFFFF',
             rows,
             cols,
             headers,
             tablehtml,
+            backgroundcolour,
+            width,
             i, j;
 
         e.preventDefault();
@@ -443,16 +614,62 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
         captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
+        borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+        bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+        bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+        borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+        backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
         rows = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.ROWS);
         cols = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.COLUMNS);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
+        width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
+
+        if (bordercolour) {
+            borderhex = bordercolour.get('value');
+        }
+
+        if (bordersize) {
+            borderSizeValue = bordersize.get('value');
+        }
+
+        if (borderstyle) {
+            borderStyleValue = borderstyle.get('value');
+        }
+
+        if (borders) {
+            if (borders.get('value') === 'outer') {
+                bordertable = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                              borderStyleValue + ' ' + borderhex + ';"';
+            } else if (borders.get('value') === 'all') {
+                bordercell = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                             borderStyleValue + ' ' + borderhex + ';"';
+            }
+        }
+
+        if (backgroundcolour) {
+            if (bordertable !== '') {
+                bordertable = bordertable.substring(0, bordertable.length-1) +
+                              'background-color: ' + backgroundcolour.get('value') + ';"';
+            } else {
+                bordertable = ' style="background-color: ' + backgroundcolour.get('value') + ';"';
+            }
+        }
+
+        if (width && width.get('value')) {
+            if (bordertable !== '') {
+                bordertable = bordertable.substring(0, bordertable.length-1) + 'width: ' +
+                              width.get('value') + CSS.WIDTHUNIT + ';"';
+            } else {
+                bordertable = ' style="width: ' + width.get('value') + CSS.WIDTHUNIT + ';"';
+            }
+        }
 
         // Set the selection.
         this.get('host').setSelection(this._currentSelection);
 
         // Note there are some spaces inserted in the cells and before and after, so that users have somewhere to click.
         var nl = "\n";
-        tablehtml = '<br/>' + nl + '<table>' + nl;
+        tablehtml = '<br/>' + nl + '<table' + bordertable + '>' + nl;
 
         var captionstyle = '';
         if (captionposition.get('value')) {
@@ -464,7 +681,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             i = 1;
             tablehtml += '<thead>' + nl + '<tr>' + nl;
             for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
-                tablehtml += '<th scope="col"></th>' + nl;
+                tablehtml += '<th scope="col"' + bordercell + '></th>' + nl;
             }
             tablehtml += '</tr>' + nl + '</thead>' + nl;
         }
@@ -473,9 +690,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             tablehtml += '<tr>' + nl;
             for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
                 if (j === 0 && (headers.get('value') === 'rows' || headers.get('value') === 'both')) {
-                    tablehtml += '<th scope="row"></th>' + nl;
+                    tablehtml += '<th scope="row"' + bordercell + '></th>' + nl;
                 } else {
-                    tablehtml += '<td></td>' + nl;
+                    tablehtml += '<td ' + bordercell + '></td>' + nl;
                 }
             }
             tablehtml += '</tr>' + nl;
@@ -903,6 +1120,35 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     },
 
     /**
+     * Obtain values for the table borders
+     *
+     * @method _getBorderConfiguration
+     * @param {Node} node
+     * @private
+     * @return {Array} or {Boolean} Returns the settings, if presents, or else returns false
+     */
+    _getBorderConfiguration: function(node) {
+        // We need to make a clone of the node in order to avoid grabbing any
+        // of the computed styles from the DOM. We only want inline styles set by us.
+        var shadowNode = node.cloneNode(true);
+        var borderStyle = shadowNode.getStyle('borderStyle'),
+            borderColor = shadowNode.getStyle('borderColor'),
+            borderWidth = shadowNode.getStyle('borderWidth');
+
+        if (borderStyle || borderColor || borderWidth) {
+            var hexColour = Y.Color.toHex(borderColor);
+            var width = parseInt(borderWidth, 10);
+            return {
+                borderStyle: borderStyle,
+                borderColor: hexColour === "#" ? null : hexColour,
+                borderWidth: isNaN(width) ? null : width
+            };
+        }
+
+        return false;
+    },
+
+    /**
      * Edit table (show the dialogue).
      *
      * @method _editTable
@@ -912,14 +1158,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         var dialogue = this.getDialogue({
             headerContent: M.util.get_string('edittable', COMPONENT),
             focusAfterHide: false,
-            focusOnShowSelector: SELECTORS.CAPTION
+            focusOnShowSelector: SELECTORS.CAPTION,
+            width: DIALOGUE.WIDTH
         });
 
         // Set the dialogue content, and then show the dialogue.
-        var node = this._getEditDialogueContent(),
+        var node = this._getDialogueContent(true),
             captioninput = node.one(SELECTORS.CAPTION),
             captionpositioninput = node.one(SELECTORS.CAPTIONPOSITION),
             headersinput = node.one(SELECTORS.HEADERS),
+            borderinput = node.one(SELECTORS.BORDERS),
+            borderstyle = node.one(SELECTORS.BORDERSTYLE),
+            bordercolours = node.all(SELECTORS.BORDERCOLOURS),
+            bordersize = node.one(SELECTORS.BORDERSIZE),
+            backgroundcolours = node.all(SELECTORS.BACKGROUNDCOLOURS),
+            width = node.one(SELECTORS.WIDTH),
             table = this._lastTarget.ancestor('table'),
             captionnode = table.one('caption');
 
@@ -929,6 +1182,10 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captioninput.set('value', '');
         }
 
+        if (width && table.getStyle('width').indexOf('px') === -1) {
+            width.set('value', parseInt(table.getStyle('width'), 10));
+        }
+
         if (captionpositioninput && captionnode && captionnode.getAttribute('style')) {
             captionpositioninput.set('value', captionnode.getStyle('caption-side'));
         } else {
@@ -936,6 +1193,48 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captionpositioninput.set('value', '');
         }
 
+        if (table.getStyle('background-color') !== 'transparent' && this.get('allowBackgroundColour')) {
+            var hexColour = Y.Color.toHex(table.getStyle('background-color'));
+            var matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
+
+            if (matchedInput) {
+                matchedInput.set("checked", true);
+            }
+        }
+
+        if (this.get('allowBorders')) {
+            var borderValue = 'default',
+                borderConfiguration = this._getBorderConfiguration(table);
+
+            if (borderConfiguration) {
+                if (borderConfiguration.borderStyle && borderConfiguration.borderStyle === 'none') {
+                    borderValue = 'none';
+                } else {
+                    borderValue = 'outer';
+                }
+            } else {
+                borderConfiguration = this._getBorderConfiguration(table.one('td'));
+                if (borderConfiguration) {
+                     borderValue = 'all';
+                }
+            }
+
+            if (borderConfiguration) {
+                var borderStyle = borderConfiguration.borderStyle || DEFAULT.BORDERSTYLE;
+                var borderSize = borderConfiguration.borderWidth || DEFAULT.BORDERWIDTH;
+                borderstyle.set('value', borderStyle);
+                bordersize.set('value', borderSize);
+                borderinput.set('value', borderValue);
+
+                var hexColour = borderConfiguration.borderColor;
+                var matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
+
+                if (matchedInput) {
+                    matchedInput.set("checked", true);
+                }
+            }
+        }
+
         var headersvalue = 'columns';
         if (table.one('th[scope="row"]')) {
             headersvalue = 'rows';
@@ -1056,6 +1355,119 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         this.markUpdated();
     }
 
+}, {
+    ATTRS: {
+        /**
+         * Whether or not to allow borders
+         *
+         * @attribute allowBorder
+         * @type Boolean
+         */
+        allowBorders: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow style of borders
+         *
+         * @attribute allowBorderStyle
+         * @type Boolean
+         */
+        allowBorderStyles: {
+            value: true
+        },
+
+        /**
+         * What border styles to allow
+         *
+         * @attribute borderStyles
+         * @type Array
+         */
+        borderStyles: {
+            value: [
+                'solid',
+                'dashed',
+                'dotted'
+            ],
+            setter: function(value) {
+                if (value) {
+                    return value.replace(/ /g,'').split(',');
+                } else {
+                    // Not a valid value - revert to default value.
+                    return Y.Attribute.INVALID_VALUE;
+                }
+            }
+        },
+
+        /**
+         * Whether or not to allow border size
+         *
+         * @attribute allowBorderSize
+         * @type Boolean
+         */
+        allowBorderSize: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow colourizing borders
+         *
+         * @attribute allowBorderColours
+         * @type Boolean
+         */
+        allowBorderColour: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow colourizing the background
+         *
+         * @attribute allowBackgroundColour
+         * @type Boolean
+         */
+        allowBackgroundColour: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow setting the table width
+         *
+         * @attribute allowWidth
+         * @type Boolean
+         */
+        allowWidth: {
+            value: true
+        },
+
+        /**
+         * Whether we allow styling
+         * @attribute allowStyling
+         * @type Boolean
+         */
+        allowStyling: {
+            readOnly: true,
+            getter: function() {
+                return this.get('allowBorders') || this.get('allowBackgroundColour') || this.get('allowWidth');
+            }
+        },
+
+        /**
+         * Available colors
+         * @attribute availableColors
+         * @type Array
+         */
+        availableColors: {
+            value: [
+                '#FFFFFF',
+                '#EF4540',
+                '#FFCF35',
+                '#98CA3E',
+                '#7D9FD3',
+                '#333333'
+            ],
+            readOnly: true
+        }
+    }
 });
 
 
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
dissimilarity index 99%
index c7b367ee181..eea33a8ffdc 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button-min.js
@@ -1,3 +1,4 @@
-YUI.add("moodle-atto_table-button",function(e,t){var n="atto_table",r='<form class="{{CSS.FORM}}"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label><input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required /><br/><br/><label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label><select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select><br/><label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label><select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select><br/><div class="mdl-align"><br/><button class="submit" type="submit">{{get_string "updatetable" component}}</button></div></form>',i='<form class="{{CSS.FORM}}"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label><input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required /><br/><br/><label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label><select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select><br/><label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label><select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select><br/><label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label><input class="{{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/><br/><label for="{{elementid}}_atto_table_columns" class="sameline">{{get_string "numberofcolumns" component}}</label><input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns" size="8" min="1" max="20"/><br/><div class="mdl-align"><br/><button class="{{CSS.SUBMIT}}" type="submit">{{get_string "createtable" component}}</button></div></form>',s={CAPTION:"caption",CAPTIONPOSITION:"captionposition",HEADERS:"headers",ROWS:"rows",COLUMNS:"columns",SUBMIT:"submit",FORM:"atto_form"},o={CAPTION:"."+s.CAPTION,CAPTIONPOSITION:"."+s.CAPTIONPOSITION,HEADERS:"."+s.HEADERS,ROWS:"."+s.ROWS,COLUMNS:"."+s.COLUMNS,SUBMIT:"."+s.SUBMIT,FORM:".atto_form"};e.namespace("M.atto_table").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_contextMenu:null,_lastTarget:null,_menuOptions:null,initializer:function(){this.addButton({icon:"e/table",callback:this._displayTableEditor,tags:"table"}),e.UA.gecko&&(document.execCommand("enableInlineTableEditing",!1,!1),document.execCommand("enableObjectResizing",!1,!1))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection!==!1&&!this._currentSelection.collapsed){var e=this.getDialogue({headerContent:M.util.get_string("createtable",n),focusAfterHide:!0,focusOnShowSelector:o.CAPTION});e.set("bodyContent",this._getDialogueContent()).show()}},_displayTableEditor:function(e){var t=this._getSuitableTableCell();return t?(e.tableCell=t,this._showTableMenu(e)):this._displayDialogue(e)},_stopAtContentEditableFilter:function(e){this.editor.contains(e)},_getEditDialogueContent:function(){var t=e.Handlebars.compile(r);return this._content=e.Node.create(t({CSS:s,elementid:this.get("host").get("elementid"),component:n})),this._content.one(".submit").on("click",this._updateTable,this),this._content},_getDialogueContent:function(){var t=e.Handlebars.compile(i);return this._content=e.Node.create(t({CSS:s,elementid:this.get("host").get("elementid"),component:n})),this._content.one(".submit").on("click",this._setTable,this),this._content},_getSuitableTableCell:function(){var e=null,t=this.get("host");t.getSelectedNodes().some(function(t){if(t.ancestor("td, th, caption",!0,this._stopAtContentEditableFilter)){e=t;var n=t.ancestor("caption",!0,this._stopAtContentEditableFilter);if(n){var r=n.get("parentNode");r&&(e=r.one("td, th"))}return!0}});if(e){var n=t.getSelectionFromNode(e);t.setSelection(n)}return e},_changeNodeType:function(t,n){var r=e.Node.create("<"+n+"></"+n+">");return r.setAttrs(t.getAttrs()),t.get("childNodes").each(function(e){r.append(e.remove())}),t.replace(r),r},_updateTable:function(t){var n,r,i,s,u;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(o.FORM).one(o.CAPTION),r=t.currentTarget.ancestor(o.FORM).one(o.CAPTIONPOSITION),i=t.currentTarget.ancestor(o.FORM).one(o.HEADERS),s=this._lastTarget.ancestor("table"),u=s.one("caption"),u||(u=e.Node.create("<caption></caption>"),s.insert(u,0)),u.setHTML(n.get("value")),u.setStyle("caption-side",r.get("value")),u.getAttribute("style")||u.removeAttribute("style"),(i.get("value")==="rows"||i.get("value")==="both")&&s.all("tr").each(function(e){var t=e.all("th, td"),n=t.shift(),r;n.get("tagName")==="TD"?(r=this._changeNodeType(n,"th"),r.setAttribute("scope","row")):n.setAttribute("scope","row"),t.each(function(e){e.get("tagName")==="TH"&&(r=this._changeNodeType(e,"td"),r.removeAttribute("scope"))},this)},this);if(i.get("value")==="columns"||i.get("value")==="both"){var a=s.all("tr"),f=a.shift(),l;f.all("td, th").each(function(e){e.get("tagName")==="TD"?(l=this._changeNodeType
-(e,"th"),l.setAttribute("scope","col")):e.setAttribute("scope","col")},this),a.each(function(e){var t=e.all("th, td");i.get("value")==="both"&&t.shift(),t.each(function(e){e.get("tagName")==="TH"&&(l=this._changeNodeType(e,"td"),l.removeAttribute("scope"))},this)},this)}this.markUpdated()},_setTable:function(t){var n,r,i,s,u,a,f,l;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(o.FORM).one(o.CAPTION),r=t.currentTarget.ancestor(o.FORM).one(o.CAPTIONPOSITION),i=t.currentTarget.ancestor(o.FORM).one(o.ROWS),s=t.currentTarget.ancestor(o.FORM).one(o.COLUMNS),u=t.currentTarget.ancestor(o.FORM).one(o.HEADERS),this.get("host").setSelection(this._currentSelection);var c="\n";a="<br/>"+c+"<table>"+c;var h="";r.get("value")&&(h=' style="caption-side: '+r.get("value")+'"'),a+="<caption"+h+">"+e.Escape.html(n.get("value"))+"</caption>"+c,f=0;if(u.get("value")==="columns"||u.get("value")==="both"){f=1,a+="<thead>"+c+"<tr>"+c;for(l=0;l<parseInt(s.get("value"),10);l++)a+='<th scope="col"></th>'+c;a+="</tr>"+c+"</thead>"+c}a+="<tbody>"+c;for(;f<parseInt(i.get("value"),10);f++){a+="<tr>"+c;for(l=0;l<parseInt(s.get("value"),10);l++)l!==0||u.get("value")!=="rows"&&u.get("value")!=="both"?a+="<td></td>"+c:a+='<th scope="row"></th>'+c;a+="</tr>"+c}a+="</tbody>"+c,a+="</table>"+c+"<br/>",this.get("host").insertContentAtFocusPoint(a),this.markUpdated()},_findColumnCells:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table").all("tr"),r=new e.NodeList,i=new e.NodeList,s=new e.NodeList;return n.each(function(e){var n=e.all("td, th"),o=n.item(t),u=n.item(t-1),a=n.item(t+1);r.push(o),u&&i.push(u),a&&s.push(a)}),{current:r,prev:i,next:s}},_hideInvalidEntries:function(e){var t=this._lastTarget.ancestor("table"),n=this._lastTarget.ancestor("tr"),r=t.all("tr"),i=r.indexOf(n),s=r.item(i-1),o=s?s.one("td"):null;!n||!o?e.one('[data-change="moverowup"]').hide():e.one('[data-change="moverowup"]').show();var u=r.item(i+1),a=n?n.one("td"):!1;!n||!u||!a?e.one('[data-change="moverowdown"]').hide():e.one('[data-change="moverowdown"]').show();var f=this._findColumnCells();f.prev.filter("td").size()>0?e.one('[data-change="movecolumnleft"]').show():e.one('[data-change="movecolumnleft"]').hide();var l=f.current.filter("td").size()>0;f.next.size()>0&&l?e.one('[data-change="movecolumnright"]').show():e.one('[data-change="movecolumnright"]').hide(),f.current.filter("td").size()>0?e.one('[data-change="deletecolumn"]').show():e.one('[data-change="deletecolumn"]').hide(),!n||!n.one("td")?e.one('[data-change="deleterow"]').hide():e.one('[data-change="deleterow"]').show()},_showTableMenu:function(t){t.preventDefault();var r;this._contextMenu||(this._menuOptions=[{text:M.util.get_string("addcolumnafter",n),data:{change:"addcolumnafter"}},{text:M.util.get_string("addrowafter",n),data:{change:"addrowafter"}},{text:M.util.get_string("moverowup",n),data:{change:"moverowup"}},{text:M.util.get_string("moverowdown",n),data:{change:"moverowdown"}},{text:M.util.get_string("movecolumnleft",n),data:{change:"movecolumnleft"}},{text:M.util.get_string("movecolumnright",n),data:{change:"movecolumnright"}},{text:M.util.get_string("deleterow",n),data:{change:"deleterow"}},{text:M.util.get_string("deletecolumn",n),data:{change:"deletecolumn"}},{text:M.util.get_string("edittable",n),data:{change:"edittable"}}],this._contextMenu=new e.M.editor_atto.Menu({items:this._menuOptions}),r=this._contextMenu.get("boundingBox"),r.delegate("click",this._handleTableChange,"a",this)),r=this._contextMenu.get("boundingBox"),this._lastTarget=t.tableCell.ancestor(".editor_atto_content td, .editor_atto_content th",!0),this._hideInvalidEntries(r),e.Array.each(this.get("host").openMenus,function(e){e.set("focusAfterHide",null)});var i=this.buttons[this.name];this.get("host")._setTabFocus(i),this._contextMenu.show(),this._contextMenu.align(this.buttons.table,[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]),this._contextMenu.set("focusAfterHide",i),r.one("a")&&r.one("a").focus(),this.get("host").openMenus=[this._contextMenu]},_handleTableChange:function(e){e.preventDefault(),this._contextMenu.set("focusAfterHide",this.get("host").editor),this._contextMenu.hide(e);switch(e.target.getData("change")){case"addcolumnafter":this._addColumnAfter();break;case"addrowafter":this._addRowAfter();break;case"deleterow":this._deleteRow();break;case"deletecolumn":this._deleteColumn();break;case"edittable":this._editTable();break;case"moverowdown":this._moveRowDown();break;case"moverowup":this._moveRowUp();break;case"movecolumnleft":this._moveColumnLeft();break;case"movecolumnright":this._moveColumnRight()}},_getRowIndex:function(e){var t=e.ancestor("table"),n=e.ancestor("tr");if(!t||!n)return;var r=t.all("tr");return r.indexOf(n)},_getColumnIndex:function(e){var t=e.ancestor("tr");if(!t)return;var n=t.all("td, th");return n.indexOf(e)},_deleteRow:function(){var e=this._lastTarget.ancestor("tr");e&&e.one("td")&&e.remove(!0),this.markUpdated()},_moveRowUp:function(){var e=this._lastTarget.ancestor("tr"),t=e.previous("tr");if(!e||!t)return;e.swap(t),this.markUpdated()},_moveColumnLeft:function(){var e=this._findColumnCells();if(e.current.size()>0&&e.prev.size()>0&&e.current.size()===e.prev.size()){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.prev.item(t);n.swap(r)}}this.markUpdated()},_addCaption:function(){var t=this._lastTarget.ancestor("table"),n=t.one("caption");n||t.insert(e.Node.create("<caption>&nbsp;</caption>"),1)},_removeCaption:function(){var e=this._lastTarget.ancestor("table"),t=e.one("caption");t&&t.remove(!0)},_moveColumnRight:function(){var e=this._findColumnCells();if(e.next.size()>0&&e.current.size()===e.next.size()&&e.current.filter("td").size()>0){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.next.item(t);n.swap(r)}}this.markUpdated()},_moveRowDown:function(){var e=this._lastTarget.ancestor("tr"),t=e.next("tr");if(!e||!t||!e.one("td"))return;e.swap(t),this
-.markUpdated()},_editTable:function(){var e=this.getDialogue({headerContent:M.util.get_string("edittable",n),focusAfterHide:!1,focusOnShowSelector:o.CAPTION}),t=this._getEditDialogueContent(),r=t.one(o.CAPTION),i=t.one(o.CAPTIONPOSITION),s=t.one(o.HEADERS),u=this._lastTarget.ancestor("table"),a=u.one("caption");a?r.set("value",a.getHTML()):r.set("value",""),i&&a&&a.getAttribute("style")?i.set("value",a.getStyle("caption-side")):i.set("value","");var f="columns";u.one('th[scope="row"]')&&(f="rows",u.one('th[scope="col"]')&&(f="both")),s.set("value",f),e.set("bodyContent",t).show()},_deleteColumn:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table"),r=n.all("tr"),i=new e.NodeList,s=!1;r.each(function(e){var n=e.all("td, th"),r=n.item(t);r.get("tagName")==="TD"&&(s=!0),i.push(r)}),s&&i.remove(!0),this.markUpdated()},_addRowAfter:function(){var t=this._lastTarget.ancestor("tr"),n=this._lastTarget.ancestor("table").one("tbody");n||(n=this._lastTarget.ancestor("table"));var r=n.one("tr");r||(r=this._lastTarget.ancestor("table").one("tr"));if(!r)return;var i=r.cloneNode(!0);i.all("th, td").each(function(t){if(t.get("tagName")==="TH"&&t.getAttribute("scope")!=="row"){var n=e.Node.create("<td></td>");t.replace(n),t=n}t.setHTML("&nbsp;")}),t.ancestor("thead")?(t=r,n.insert(i,t)):t.insert(i,"after"),this.markUpdated()},_addColumnAfter:function(){var t=this._findColumnCells(),n=!0,r=t.next;t.next.size()<=0&&(n=!1,r=t.current),e.each(r,function(e){var t=e.cloneNode();t.setHTML("&nbsp;"),n?e.get("parentNode").insert(t,e):(e.get("parentNode").insert(t,e),e.swap(t))},this),this.markUpdated()}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-editor_atto-menu","event","event-valuechange"]});
+YUI.add("moodle-atto_table-button",function(e,t){var n="atto_table",r={BORDERSTYLE:"solid",BORDERWIDTH:"1"},i={WIDTH:"450px"},s='<form class="{{CSS.FORM}}"><label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label><input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required /><br/><br/><label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label><select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition"><option value=""></option><option value="top">{{get_string "top" "editor"}}</option><option value="bottom">{{get_string "bottom" "editor"}}</option></select><br/><label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label><select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers"><option value="columns">{{get_string "columns" component}}</option><option value="rows">{{get_string "rows" component}}</option><option value="both">{{get_string "both" component}}</option></select><br/>{{#if nonedit}}<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label><input class="{{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/><br/><label for="{{elementid}}_atto_table_columns" class="sameline">{{get_string "numberofcolumns" component}}</label><input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"size="8" min="1" max="20"/><br/>{{/if}}{{#if allowStyling}}<fieldset><legend class="mdl-align">{{get_string "appearance" component}}</legend>{{#if allowBorders}}<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label><select class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders"><option value="default">{{get_string "themedefault" component}}</option><option value="none">{{get_string "noborder" component}}</option><option value="outer">{{get_string "outer" component}}</option><option value="all">{{get_string "all" component}}</option></select><br>{{#if allowBorderStyles}}<label for="{{elementid}}_atto_table_borderstyle" class="sameline">{{get_string "borderstyles" component}}</label><select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">{{#each borderStyles}}<option value="{{this}}">{{this}}</option>{{/each}}</select><br>{{/if}}{{#if allowBorderSize}}<label for="{{elementid}}_atto_table_bordersize" class="sameline">{{get_string "bordersize" component}}</label><input id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"type="number" value="1" size="8" min="1" max="50"/><label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label><br>{{/if}}{{#if allowBorderColour}}<label for="{{elementid}}_atto_table_bordercolour" class="sameline">{{get_string "bordercolour" component}}</label><div id="{{elementid}}_atto_table_bordercolour"class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_bordercolour_-1"type="radio" name="borderColour" value="transparent" checked="checked"title="{{get_string "transparent" component}}"></input>{{get_string "transparent" component}}</label>{{#each availableColours}}<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"type="radio" name="borderColour" value="{{this}}" title="{{this}}">{{this}}</label>{{/each}}</div><br>{{/if}}{{/if}}{{#if allowBackgroundColour}}<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">{{get_string "backgroundcolour" component}}</label><div id="{{elementid}}_atto_table_backgroundcolour"class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1"><label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"style="background-color:transparent;color:transparent"><input id="{{../elementid}}_atto_table_backgroundcolour_-1"type="radio" name="backgroundColour" value="transparent" checked="checked"title="{{get_string "transparent" component}}"></input>{{get_string "transparent" component}}</label>{{#each availableColours}}<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"style="background-color:{{this}};color:{{this}}"><input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"type="radio" name="backgroundColour" value="{{this}}" title="{{this}}">{{this}}</label>{{/each}}</div><br>{{/if}}{{#if allowWidth}}<label for="{{elementid}}_atto_table_width" class="sameline">{{get_string "width" component}}</label><input id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/><label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label><br>{{/if}}</fieldset>{{/if}}<div class="mdl-align"><br/>{{#if edit}}<button class="submit" type="submit">{{get_string "updatetable" component}}</button>{{/if}}{{#if nonedit}}<button class="submit" type="submit">{{get_string "createtable" component}}</button>{{/if}}</div></form>',o={CAPTION:"caption",CAPTIONPOSITION:"captionposition",HEADERS:"headers",ROWS:"rows",COLUMNS:"columns",SUBMIT:"submit",FORM:"atto_form",BORDERS:"borders",BORDERSIZE:"bordersize",BORDERSIZEUNIT:"px",BORDERCOLOUR:"bordercolour",BORDERSTYLE:"borderstyle",BACKGROUNDCOLOUR:"backgroundcolour",WIDTH:"customwidth",WIDTHUNIT:"%",AVAILABLECOLORS:"availablecolors",COLOURROW:"colourrow"},u={CAPTION:"."+o.CAPTION,CAPTIONPOSITION:"."+o.CAPTIONPOSITION,HEADERS:"."+o.HEADERS,ROWS:"."+o.ROWS,COLUMNS:"."+o.COLUMNS,SUBMIT:"."+o.SUBMIT,BORDERS:"."+o.BORDERS,BORDERSIZE:"."+o.BORDERSIZE,BORDERCOLOURS:"."+o.BORDERCOLOUR+' input[name="borderColour"]',SELECTEDBORDERCOLOUR:"."+o.BORDERCOLOUR+' input[name="borderColour"]:checked',BORDERSTYLE:"."+o.BORDERSTYLE,BACKGROUNDCOLOURS
+:"."+o.BACKGROUNDCOLOUR+' input[name="backgroundColour"]',SELECTEDBACKGROUNDCOLOUR:"."+o.BACKGROUNDCOLOUR+' input[name="backgroundColour"]:checked',FORM:".atto_form",WIDTH:"."+o.WIDTH,AVAILABLECOLORS:"."+o.AVAILABLECOLORS};e.namespace("M.atto_table").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{_currentSelection:null,_contextMenu:null,_lastTarget:null,_menuOptions:null,initializer:function(){this.addButton({icon:"e/table",callback:this._displayTableEditor,tags:"table"}),e.UA.gecko&&(document.execCommand("enableInlineTableEditing",!1,!1),document.execCommand("enableObjectResizing",!1,!1))},_displayDialogue:function(){this._currentSelection=this.get("host").getSelection();if(this._currentSelection!==!1&&!this._currentSelection.collapsed){var e=this.getDialogue({headerContent:M.util.get_string("createtable",n),focusAfterHide:!0,focusOnShowSelector:u.CAPTION,width:i.WIDTH});e.set("bodyContent",this._getDialogueContent(!1)).show()}},_displayTableEditor:function(e){var t=this._getSuitableTableCell();return t?(e.tableCell=t,this._showTableMenu(e)):this._displayDialogue(e)},_stopAtContentEditableFilter:function(e){this.editor.contains(e)},_getDialogueContent:function(t){var r=e.Handlebars.compile(s),i=this.get("availableColors");return this._content=e.Node.create(r({CSS:o,elementid:this.get("host").get("elementid"),component:n,edit:t,nonedit:!t,allowStyling:this.get("allowStyling"),allowBorders:this.get("allowBorders"),allowBorderStyles:this.get("allowBorderStyles"),borderStyles:this.get("borderStyles"),allowBorderSize:this.get("allowBorderSize"),allowBorderColour:this.get("allowBorderColour"),allowBackgroundColour:this.get("allowBackgroundColour"),availableColours:i,allowWidth:this.get("allowWidth")})),t?this._content.one(".submit").on("click",this._updateTable,this):this._content.one(".submit").on("click",this._setTable,this),this._content},_getSuitableTableCell:function(){var e=null,t=this.get("host");t.getSelectedNodes().some(function(t){if(t.ancestor("td, th, caption",!0,this._stopAtContentEditableFilter)){e=t;var n=t.ancestor("caption",!0,this._stopAtContentEditableFilter);if(n){var r=n.get("parentNode");r&&(e=r.one("td, th"))}return!0}});if(e){var n=t.getSelectionFromNode(e);t.setSelection(n)}return e},_changeNodeType:function(t,n){var r=e.Node.create("<"+n+"></"+n+">");return r.setAttrs(t.getAttrs()),t.get("childNodes").each(function(e){r.append(e.remove())}),t.replace(r),r},_updateTable:function(t){var n,r,i,s,a,f,l,c,h="#FFFFFF",p="1",d="solid",v="#FFFFFF",m,g,y;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(u.FORM).one(u.CAPTION),r=t.currentTarget.ancestor(u.FORM).one(u.CAPTIONPOSITION),i=t.currentTarget.ancestor(u.FORM).one(u.HEADERS),s=t.currentTarget.ancestor(u.FORM).one(u.BORDERS),a=t.currentTarget.ancestor(u.FORM).one(u.BORDERSIZE),l=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBORDERCOLOUR),f=t.currentTarget.ancestor(u.FORM).one(u.BORDERSTYLE),c=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBACKGROUNDCOLOUR),g=t.currentTarget.ancestor(u.FORM).one(u.WIDTH),l&&(v=l.get("value")),a&&(p=a.get("value")),f&&(d=f.get("value")),c&&(h=c.get("value")),m=this._lastTarget.ancestor("table"),m.removeAttribute("style"),m.all("td, th").each(function(){this.removeAttribute("style")}),s&&(s.get("value")==="outer"?m.setStyle("border",p+o.BORDERSIZEUNIT+" "+d+" "+v):s.get("value")==="all"?m.all("td, th").each(function(){this.setStyle("border",p+o.BORDERSIZEUNIT+" "+d+" "+v)}):s.get("value")==="none"&&m.setStyle("border","none")),g&&g.get("value")&&m.setStyle("width",g.get("value")+o.WIDTHUNIT),h!==""&&m.setStyle("background-color",h),y=m.one("caption"),y||(y=e.Node.create("<caption></caption>"),m.insert(y,0)),y.setHTML(n.get("value")),y.setStyle("caption-side",r.get("value")),y.getAttribute("style")||y.removeAttribute("style"),(i.get("value")==="rows"||i.get("value")==="both")&&m.all("tr").each(function(e){var t=e.all("th, td"),n=t.shift(),r;n.get("tagName")==="TD"?(r=this._changeNodeType(n,"th"),r.setAttribute("scope","row")):n.setAttribute("scope","row"),t.each(function(e){e.get("tagName")==="TH"&&(r=this._changeNodeType(e,"td"),r.removeAttribute("scope"))},this)},this);if(i.get("value")==="columns"||i.get("value")==="both"){var b=m.all("tr"),w=b.shift(),E;w.all("td, th").each(function(e){e.get("tagName")==="TD"?(E=this._changeNodeType(e,"th"),E.setAttribute("scope","col")):e.setAttribute("scope","col")},this),b.each(function(e){var t=e.all("th, td");i.get("value")==="both"&&t.shift(),t.each(function(e){e.get("tagName")==="TH"&&(E=this._changeNodeType(e,"td"),E.removeAttribute("scope"))},this)},this)}this.markUpdated()},_setTable:function(t){var n,r,i,s="",a="",f,l,c,h="1",p="solid",d="#FFFFFF",v,m,g,y,b,w,E,S;t.preventDefault(),this.getDialogue({focusAfterHide:null}).hide(),n=t.currentTarget.ancestor(u.FORM).one(u.CAPTION),r=t.currentTarget.ancestor(u.FORM).one(u.CAPTIONPOSITION),i=t.currentTarget.ancestor(u.FORM).one(u.BORDERS),f=t.currentTarget.ancestor(u.FORM).one(u.BORDERSIZE),c=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBORDERCOLOUR),l=t.currentTarget.ancestor(u.FORM).one(u.BORDERSTYLE),b=t.currentTarget.ancestor(u.FORM).one(u.SELECTEDBACKGROUNDCOLOUR),v=t.currentTarget.ancestor(u.FORM).one(u.ROWS),m=t.currentTarget.ancestor(u.FORM).one(u.COLUMNS),g=t.currentTarget.ancestor(u.FORM).one(u.HEADERS),w=t.currentTarget.ancestor(u.FORM).one(u.WIDTH),c&&(d=c.get("value")),f&&(h=f.get("value")),l&&(p=l.get("value")),i&&(i.get("value")==="outer"?s=' style="border: '+h+o.BORDERSIZEUNIT+" "+p+" "+d+';"':i.get("value")==="all"&&(a=' style="border: '+h+o.BORDERSIZEUNIT+" "+p+" "+d+';"')),b&&(s!==""?s=s.substring(0,s.length-1)+"background-color: "+b.get("value")+';"':s=' style="background-color: '+b.get("value")+';"'),w&&w.get("value")&&(s!==""?s=s.substring(0,s.length-1)+"width: "+w.get("value")+o.WIDTHUNIT+';"':s=' style="width: '+w.get("value")+o.WIDTHUNIT+';"'),this.get("host").setSelection(this._currentSelection);var x="\n";y="<br/>"+
+x+"<table"+s+">"+x;var T="";r.get("value")&&(T=' style="caption-side: '+r.get("value")+'"'),y+="<caption"+T+">"+e.Escape.html(n.get("value"))+"</caption>"+x,E=0;if(g.get("value")==="columns"||g.get("value")==="both"){E=1,y+="<thead>"+x+"<tr>"+x;for(S=0;S<parseInt(m.get("value"),10);S++)y+='<th scope="col"'+a+"></th>"+x;y+="</tr>"+x+"</thead>"+x}y+="<tbody>"+x;for(;E<parseInt(v.get("value"),10);E++){y+="<tr>"+x;for(S=0;S<parseInt(m.get("value"),10);S++)S!==0||g.get("value")!=="rows"&&g.get("value")!=="both"?y+="<td "+a+"></td>"+x:y+='<th scope="row"'+a+"></th>"+x;y+="</tr>"+x}y+="</tbody>"+x,y+="</table>"+x+"<br/>",this.get("host").insertContentAtFocusPoint(y),this.markUpdated()},_findColumnCells:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table").all("tr"),r=new e.NodeList,i=new e.NodeList,s=new e.NodeList;return n.each(function(e){var n=e.all("td, th"),o=n.item(t),u=n.item(t-1),a=n.item(t+1);r.push(o),u&&i.push(u),a&&s.push(a)}),{current:r,prev:i,next:s}},_hideInvalidEntries:function(e){var t=this._lastTarget.ancestor("table"),n=this._lastTarget.ancestor("tr"),r=t.all("tr"),i=r.indexOf(n),s=r.item(i-1),o=s?s.one("td"):null;!n||!o?e.one('[data-change="moverowup"]').hide():e.one('[data-change="moverowup"]').show();var u=r.item(i+1),a=n?n.one("td"):!1;!n||!u||!a?e.one('[data-change="moverowdown"]').hide():e.one('[data-change="moverowdown"]').show();var f=this._findColumnCells();f.prev.filter("td").size()>0?e.one('[data-change="movecolumnleft"]').show():e.one('[data-change="movecolumnleft"]').hide();var l=f.current.filter("td").size()>0;f.next.size()>0&&l?e.one('[data-change="movecolumnright"]').show():e.one('[data-change="movecolumnright"]').hide(),f.current.filter("td").size()>0?e.one('[data-change="deletecolumn"]').show():e.one('[data-change="deletecolumn"]').hide(),!n||!n.one("td")?e.one('[data-change="deleterow"]').hide():e.one('[data-change="deleterow"]').show()},_showTableMenu:function(t){t.preventDefault();var r;this._contextMenu||(this._menuOptions=[{text:M.util.get_string("addcolumnafter",n),data:{change:"addcolumnafter"}},{text:M.util.get_string("addrowafter",n),data:{change:"addrowafter"}},{text:M.util.get_string("moverowup",n),data:{change:"moverowup"}},{text:M.util.get_string("moverowdown",n),data:{change:"moverowdown"}},{text:M.util.get_string("movecolumnleft",n),data:{change:"movecolumnleft"}},{text:M.util.get_string("movecolumnright",n),data:{change:"movecolumnright"}},{text:M.util.get_string("deleterow",n),data:{change:"deleterow"}},{text:M.util.get_string("deletecolumn",n),data:{change:"deletecolumn"}},{text:M.util.get_string("edittable",n),data:{change:"edittable"}}],this._contextMenu=new e.M.editor_atto.Menu({items:this._menuOptions}),r=this._contextMenu.get("boundingBox"),r.delegate("click",this._handleTableChange,"a",this)),r=this._contextMenu.get("boundingBox"),this._lastTarget=t.tableCell.ancestor(".editor_atto_content td, .editor_atto_content th",!0),this._hideInvalidEntries(r),e.Array.each(this.get("host").openMenus,function(e){e.set("focusAfterHide",null)});var i=this.buttons[this.name];this.get("host")._setTabFocus(i),this._contextMenu.show(),this._contextMenu.align(this.buttons.table,[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]),this._contextMenu.set("focusAfterHide",i),r.one("a")&&r.one("a").focus(),this.get("host").openMenus=[this._contextMenu]},_handleTableChange:function(e){e.preventDefault(),this._contextMenu.set("focusAfterHide",this.get("host").editor),this._contextMenu.hide(e);switch(e.target.getData("change")){case"addcolumnafter":this._addColumnAfter();break;case"addrowafter":this._addRowAfter();break;case"deleterow":this._deleteRow();break;case"deletecolumn":this._deleteColumn();break;case"edittable":this._editTable();break;case"moverowdown":this._moveRowDown();break;case"moverowup":this._moveRowUp();break;case"movecolumnleft":this._moveColumnLeft();break;case"movecolumnright":this._moveColumnRight()}},_getRowIndex:function(e){var t=e.ancestor("table"),n=e.ancestor("tr");if(!t||!n)return;var r=t.all("tr");return r.indexOf(n)},_getColumnIndex:function(e){var t=e.ancestor("tr");if(!t)return;var n=t.all("td, th");return n.indexOf(e)},_deleteRow:function(){var e=this._lastTarget.ancestor("tr");e&&e.one("td")&&e.remove(!0),this.markUpdated()},_moveRowUp:function(){var e=this._lastTarget.ancestor("tr"),t=e.previous("tr");if(!e||!t)return;e.swap(t),this.markUpdated()},_moveColumnLeft:function(){var e=this._findColumnCells();if(e.current.size()>0&&e.prev.size()>0&&e.current.size()===e.prev.size()){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.prev.item(t);n.swap(r)}}this.markUpdated()},_addCaption:function(){var t=this._lastTarget.ancestor("table"),n=t.one("caption");n||t.insert(e.Node.create("<caption>&nbsp;</caption>"),1)},_removeCaption:function(){var e=this._lastTarget.ancestor("table"),t=e.one("caption");t&&t.remove(!0)},_moveColumnRight:function(){var e=this._findColumnCells();if(e.next.size()>0&&e.current.size()===e.next.size()&&e.current.filter("td").size()>0){var t=0;for(t=0;t<e.current.size();t++){var n=e.current.item(t),r=e.next.item(t);n.swap(r)}}this.markUpdated()},_moveRowDown:function(){var e=this._lastTarget.ancestor("tr"),t=e.next("tr");if(!e||!t||!e.one("td"))return;e.swap(t),this.markUpdated()},_getBorderConfiguration:function(t){var n=t.cloneNode(!0),r=n.getStyle("borderStyle"),i=n.getStyle("borderColor"),s=n.getStyle("borderWidth");if(r||i||s){var o=e.Color.toHex(i),u=parseInt(s,10);return{borderStyle:r,borderColor:o==="#"?null:o,borderWidth:isNaN(u)?null:u}}return!1},_editTable:function(){var t=this.getDialogue({headerContent:M.util.get_string("edittable",n),focusAfterHide:!1,focusOnShowSelector:u.CAPTION,width:i.WIDTH}),s=this._getDialogueContent(!0),o=s.one(u.CAPTION),a=s.one(u.CAPTIONPOSITION),f=s.one(u.HEADERS),l=s.one(u.BORDERS),c=s.one(u.BORDERSTYLE),h=s.all(u.BORDERCOLOURS),p=s.one(u.BORDERSIZE),d=s.all(u.BACKGROUNDCOLOURS),v=s.one(u.WIDTH),m=this._lastTarget.ancestor
+("table"),g=m.one("caption");g?o.set("value",g.getHTML()):o.set("value",""),v&&m.getStyle("width").indexOf("px")===-1&&v.set("value",parseInt(m.getStyle("width"),10)),a&&g&&g.getAttribute("style")?a.set("value",g.getStyle("caption-side")):a.set("value","");if(m.getStyle("background-color")!=="transparent"&&this.get("allowBackgroundColour")){var y=e.Color.toHex(m.getStyle("background-color")),b=d.filter('[value="'+y+'"]');b&&b.set("checked",!0)}if(this.get("allowBorders")){var w="default",E=this._getBorderConfiguration(m);E?E.borderStyle&&E.borderStyle==="none"?w="none":w="outer":(E=this._getBorderConfiguration(m.one("td")),E&&(w="all"));if(E){var S=E.borderStyle||r.BORDERSTYLE,x=E.borderWidth||r.BORDERWIDTH;c.set("value",S),p.set("value",x),l.set("value",w);var y=E.borderColor,b=h.filter('[value="'+y+'"]');b&&b.set("checked",!0)}}var T="columns";m.one('th[scope="row"]')&&(T="rows",m.one('th[scope="col"]')&&(T="both")),f.set("value",T),t.set("bodyContent",s).show()},_deleteColumn:function(){var t=this._getColumnIndex(this._lastTarget),n=this._lastTarget.ancestor("table"),r=n.all("tr"),i=new e.NodeList,s=!1;r.each(function(e){var n=e.all("td, th"),r=n.item(t);r.get("tagName")==="TD"&&(s=!0),i.push(r)}),s&&i.remove(!0),this.markUpdated()},_addRowAfter:function(){var t=this._lastTarget.ancestor("tr"),n=this._lastTarget.ancestor("table").one("tbody");n||(n=this._lastTarget.ancestor("table"));var r=n.one("tr");r||(r=this._lastTarget.ancestor("table").one("tr"));if(!r)return;var i=r.cloneNode(!0);i.all("th, td").each(function(t){if(t.get("tagName")==="TH"&&t.getAttribute("scope")!=="row"){var n=e.Node.create("<td></td>");t.replace(n),t=n}t.setHTML("&nbsp;")}),t.ancestor("thead")?(t=r,n.insert(i,t)):t.insert(i,"after"),this.markUpdated()},_addColumnAfter:function(){var t=this._findColumnCells(),n=!0,r=t.next;t.next.size()<=0&&(n=!1,r=t.current),e.each(r,function(e){var t=e.cloneNode();t.setHTML("&nbsp;"),n?e.get("parentNode").insert(t,e):(e.get("parentNode").insert(t,e),e.swap(t))},this),this.markUpdated()}},{ATTRS:{allowBorders:{value:!0},allowBorderStyles:{value:!0},borderStyles:{value:["solid","dashed","dotted"],setter:function(t){return t?t.replace(/ /g,"").split(","):e.Attribute.INVALID_VALUE}},allowBorderSize:{value:!0},allowBorderColour:{value:!0},allowBackgroundColour:{value:!0},allowWidth:{value:!0},allowStyling:{readOnly:!0,getter:function(){return this.get("allowBorders")||this.get("allowBackgroundColour")||this.get("allowWidth")}},availableColors:{value:["#FFFFFF","#EF4540","#FFCF35","#98CA3E","#7D9FD3","#333333"],readOnly:!0}}})},"@VERSION@",{requires:["moodle-editor_atto-plugin","moodle-editor_atto-menu","event","event-valuechange"]});
diff --git a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
index 48f3a7a592a..1beb527dec2 100644
--- a/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
+++ b/lib/editor/atto/plugins/table/yui/build/moodle-atto_table-button/moodle-atto_table-button.js
@@ -34,38 +34,21 @@ YUI.add('moodle-atto_table-button', function (Y, NAME) {
  */
 
 var COMPONENT = 'atto_table',
-    EDITTEMPLATE = '' +
-        '<form class="{{CSS.FORM}}">' +
-            '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
-            '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
-            '<br/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
-            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
-                '<option value=""></option>' +
-                '<option value="top">{{get_string "top" "editor"}}</option>' +
-                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
-            '</select>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
-            '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
-                '<option value="columns">{{get_string "columns" component}}' + '</option>' +
-                '<option value="rows">{{get_string "rows" component}}' + '</option>' +
-                '<option value="both">{{get_string "both" component}}' + '</option>' +
-            '</select>' +
-            '<br/>' +
-            '<div class="mdl-align">' +
-                '<br/>' +
-                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
-            '</div>' +
-        '</form>',
+    DEFAULT = {
+        BORDERSTYLE: 'solid',
+        BORDERWIDTH: '1'
+    },
+    DIALOGUE = {
+        WIDTH: '450px'
+    },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">' +
+            '{{get_string "captionposition" component}}</label>' +
             '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
                 '<option value=""></option>' +
                 '<option value="top">{{get_string "top" "editor"}}</option>' +
@@ -79,16 +62,120 @@ var COMPONENT = 'atto_table',
                 '<option value="both">{{get_string "both" component}}' + '</option>' +
             '</select>' +
             '<br/>' +
-            '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
-            '<input class="{{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_columns" class="sameline">{{get_string "numberofcolumns" component}}</label>' +
-            '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns" ' +
-                    'size="8" min="1" max="20"/>' +
-            '<br/>' +
-            '<div class="mdl-align">' +
+            '{{#if nonedit}}' +
+                '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
+                '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+                'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
+                '<br/>' +
+                '<label for="{{elementid}}_atto_table_columns" ' +
+                'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
+                '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+                'size="8" min="1" max="20"/>' +
                 '<br/>' +
-                '<button class="{{CSS.SUBMIT}}" type="submit">{{get_string "createtable" component}}</button>' +
+            '{{/if}}' +
+            '{{#if allowStyling}}' +
+                '<fieldset>' +
+                '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
+                '{{#if allowBorders}}' +
+                    '<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
+                    '<select class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
+                        '<option value="default">{{get_string "themedefault" component}}' + '</option>' +
+                        '<option value="none">{{get_string "noborder" component}}' + '</option>' +
+                        '<option value="outer">{{get_string "outer" component}}' + '</option>' +
+                        '<option value="all">{{get_string "all" component}}' + '</option>' +
+                    '</select>' +
+                    '<br>' +
+                    '{{#if allowBorderStyles}}' +
+                        '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+                        '{{get_string "borderstyles" component}}</label>' +
+                        '<select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+                            '{{#each borderStyles}}' +
+                                '<option value="' + '{{this}}' + '">' + '{{this}}' + '</option>' +
+                            '{{/each}}' +
+                        '</select>' +
+                        '<br>' +
+                    '{{/if}}' +
+                    '{{#if allowBorderSize}}' +
+                        '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+                        '{{get_string "bordersize" component}}</label>' +
+                        '<input id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
+                        'type="number" value="1" size="8" min="1" max="50"/>' +
+                        '<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
+                        '<br>' +
+                    '{{/if}}' +
+                    '{{#if allowBorderColour}}' +
+                        '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+                        '{{get_string "bordercolour" component}}</label>' +
+                        '<div id="{{elementid}}_atto_table_bordercolour"' +
+                        'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                            '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
+                            'style="background-color:transparent;color:transparent">' +
+
+                                '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
+                                'type="radio" name="borderColour" value="transparent" checked="checked"'+
+                                'title="{{get_string "transparent" component}}"></input>' +
+
+                                '{{get_string "transparent" component}}' +
+                            '</label>' +
+                            '{{#each availableColours}}' +
+                                '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+                                'style="background-color:{{this}};color:{{this}}">' +
+
+                                    '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+                                    'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+                                    '{{this}}' +
+                                '</label>' +
+                            '{{/each}}' +
+                        '</div>' +
+                        '<br>' +
+                    '{{/if}}' +
+                '{{/if}}' +
+                '{{#if allowBackgroundColour}}' +
+                    '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+                    '{{get_string "backgroundcolour" component}}</label>' +
+                    '<div id="{{elementid}}_atto_table_backgroundcolour"' +
+                    'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
+                        'style="background-color:transparent;color:transparent">' +
+
+                            '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
+                            'type="radio" name="backgroundColour" value="transparent" checked="checked"'+
+                            'title="{{get_string "transparent" component}}"></input>' +
+
+                            '{{get_string "transparent" component}}' +
+                        '</label>' +
+
+                        '{{#each availableColours}}' +
+                            '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+                            'style="background-color:{{this}};color:{{this}}">'+
+
+                                '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+                                'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+                                '{{this}}' +
+                            '</label>' +
+                        '{{/each}}' +
+                    '</div>' +
+                    '<br>' +
+                '{{/if}}' +
+                '{{#if allowWidth}}' +
+                    '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+                    '{{get_string "width" component}}</label>' +
+                    '<input id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/>' +
+                    '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
+                    '<br>' +
+                '{{/if}}' +
+                '</fieldset>' +
+            '{{/if}}' +
+            '<div class="mdl-align">' +
+            '<br/>' +
+            '{{#if edit}}' +
+                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+            '{{/if}}' +
+            '{{#if nonedit}}' +
+                '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+            '{{/if}}' +
             '</div>' +
         '</form>',
     CSS = {
@@ -98,7 +185,17 @@ var COMPONENT = 'atto_table',
         ROWS: 'rows',
         COLUMNS: 'columns',
         SUBMIT: 'submit',
-        FORM: 'atto_form'
+        FORM: 'atto_form',
+        BORDERS: 'borders',
+        BORDERSIZE: 'bordersize',
+        BORDERSIZEUNIT: 'px',
+        BORDERCOLOUR: 'bordercolour',
+        BORDERSTYLE: 'borderstyle',
+        BACKGROUNDCOLOUR: 'backgroundcolour',
+        WIDTH: 'customwidth',
+        WIDTHUNIT: '%',
+        AVAILABLECOLORS: 'availablecolors',
+        COLOURROW: 'colourrow'
     },
     SELECTORS = {
         CAPTION: '.' + CSS.CAPTION,
@@ -107,7 +204,16 @@ var COMPONENT = 'atto_table',
         ROWS: '.' + CSS.ROWS,
         COLUMNS: '.' + CSS.COLUMNS,
         SUBMIT: '.' + CSS.SUBMIT,
-        FORM: '.atto_form'
+        BORDERS: '.' + CSS.BORDERS,
+        BORDERSIZE: '.' + CSS.BORDERSIZE,
+        BORDERCOLOURS: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]',
+        SELECTEDBORDERCOLOUR: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]:checked',
+        BORDERSTYLE: '.' + CSS.BORDERSTYLE,
+        BACKGROUNDCOLOURS: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]',
+        SELECTEDBACKGROUNDCOLOUR: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]:checked',
+        FORM: '.atto_form',
+        WIDTH: '.' + CSS.WIDTH,
+        AVAILABLECOLORS: '.' + CSS.AVAILABLECOLORS
     };
 
 Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@@ -155,7 +261,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             callback: this._displayTableEditor,
             tags: 'table'
         });
-
         // Disable mozilla table controls.
         if (Y.UA.gecko) {
             document.execCommand("enableInlineTableEditing", false, false);
@@ -177,11 +282,12 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             var dialogue = this.getDialogue({
                 headerContent: M.util.get_string('createtable', COMPONENT),
                 focusAfterHide: true,
-                focusOnShowSelector: SELECTORS.CAPTION
+                focusOnShowSelector: SELECTORS.CAPTION,
+                width: DIALOGUE.WIDTH
             });
 
             // Set the dialogue content, and then show the dialogue.
-            dialogue.set('bodyContent', this._getDialogueContent())
+            dialogue.set('bodyContent', this._getDialogueContent(false))
                     .show();
         }
     },
@@ -219,28 +325,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     },
 
     /**
-     * Return the edit table dialogue content, attaching any required
-     * events.
-     *
-     * @method _getEditDialogueContent
-     * @private
-     * @return {Node} The content to place in the dialogue.
-     */
-    _getEditDialogueContent: function() {
-        var template = Y.Handlebars.compile(EDITTEMPLATE);
-        this._content = Y.Node.create(template({
-                CSS: CSS,
-                elementid: this.get('host').get('elementid'),
-                component: COMPONENT
-            }));
-
-        // Handle table setting.
-        this._content.one('.submit').on('click', this._updateTable, this);
-
-        return this._content;
-    },
-
-    /**
      * Return the dialogue content for the tool, attaching any required
      * events.
      *
@@ -248,16 +332,33 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      * @private
      * @return {Node} The content to place in the dialogue.
      */
-    _getDialogueContent: function() {
+    _getDialogueContent: function(edit) {
         var template = Y.Handlebars.compile(TEMPLATE);
+        var availableColours = this.get('availableColors');
+
         this._content = Y.Node.create(template({
                 CSS: CSS,
                 elementid: this.get('host').get('elementid'),
-                component: COMPONENT
+                component: COMPONENT,
+                edit: edit,
+                nonedit: !edit,
+                allowStyling: this.get('allowStyling'),
+                allowBorders: this.get('allowBorders'),
+                allowBorderStyles: this.get('allowBorderStyles'),
+                borderStyles: this.get('borderStyles'),
+                allowBorderSize: this.get('allowBorderSize'),
+                allowBorderColour: this.get('allowBorderColour'),
+                allowBackgroundColour: this.get('allowBackgroundColour'),
+                availableColours: availableColours,
+                allowWidth: this.get('allowWidth')
             }));
 
         // Handle table setting.
-        this._content.one('.submit').on('click', this._setTable, this);
+        if (edit) {
+            this._content.one('.submit').on('click', this._updateTable, this);
+        } else {
+            this._content.one('.submit').on('click', this._setTable, this);
+        }
 
         return this._content;
     },
@@ -330,7 +431,17 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         var caption,
             captionposition,
             headers,
+            borders,
+            bordersize,
+            borderstyle,
+            bordercolour,
+            backgroundcolour,
+            backgroundcolourvalue = '#FFFFFF',
+            borderSizeValue = '1',
+            borderStyleValue = 'solid',
+            borderhex = '#FFFFFF',
             table,
+            width,
             captionnode;
 
         e.preventDefault();
@@ -343,8 +454,57 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
         captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
+        borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+        bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+        bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+        borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+        backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
+        width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
+
+        if (bordercolour) {
+            borderhex = bordercolour.get('value');
+        }
+
+        if (bordersize) {
+            borderSizeValue = bordersize.get('value');
+        }
+
+        if (borderstyle) {
+            borderStyleValue = borderstyle.get('value');
+        }
+
+        if (backgroundcolour) {
+            backgroundcolourvalue = backgroundcolour.get('value');
+        }
 
         table = this._lastTarget.ancestor('table');
+        // Clear the inline border styling
+        table.removeAttribute('style');
+        table.all('td, th').each(function() {
+            this.removeAttribute('style');
+        });
+
+        if (borders) {
+            if (borders.get('value') === 'outer') {
+                table.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                              borderStyleValue + ' ' + borderhex);
+            } else if (borders.get('value') === 'all') {
+                table.all('td, th').each(function() {
+                    this.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                             borderStyleValue + ' ' + borderhex);
+                });
+            } else if (borders.get('value') === 'none') {
+                table.setStyle('border', 'none');
+            }
+        }
+
+        if (width && width.get('value')) {
+            table.setStyle('width', width.get('value') + CSS.WIDTHUNIT);
+        }
+
+        if (backgroundcolourvalue !== '') {
+            table.setStyle('background-color', backgroundcolourvalue);
+        }
 
         captionnode = table.one('caption');
         if (!captionnode) {
@@ -428,10 +588,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     _setTable: function(e) {
         var caption,
             captionposition,
+            borders,
+            bordertable = '',
+            bordercell = '',
+            bordersize,
+            borderstyle,
+            bordercolour,
+            borderSizeValue = '1',
+            borderStyleValue = 'solid',
+            borderhex = '#FFFFFF',
             rows,
             cols,
             headers,
             tablehtml,
+            backgroundcolour,
+            width,
             i, j;
 
         e.preventDefault();
@@ -443,16 +614,62 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
         captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
+        borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+        bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+        bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+        borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+        backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
         rows = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.ROWS);
         cols = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.COLUMNS);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
+        width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
+
+        if (bordercolour) {
+            borderhex = bordercolour.get('value');
+        }
+
+        if (bordersize) {
+            borderSizeValue = bordersize.get('value');
+        }
+
+        if (borderstyle) {
+            borderStyleValue = borderstyle.get('value');
+        }
+
+        if (borders) {
+            if (borders.get('value') === 'outer') {
+                bordertable = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                              borderStyleValue + ' ' + borderhex + ';"';
+            } else if (borders.get('value') === 'all') {
+                bordercell = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                             borderStyleValue + ' ' + borderhex + ';"';
+            }
+        }
+
+        if (backgroundcolour) {
+            if (bordertable !== '') {
+                bordertable = bordertable.substring(0, bordertable.length-1) +
+                              'background-color: ' + backgroundcolour.get('value') + ';"';
+            } else {
+                bordertable = ' style="background-color: ' + backgroundcolour.get('value') + ';"';
+            }
+        }
+
+        if (width && width.get('value')) {
+            if (bordertable !== '') {
+                bordertable = bordertable.substring(0, bordertable.length-1) + 'width: ' +
+                              width.get('value') + CSS.WIDTHUNIT + ';"';
+            } else {
+                bordertable = ' style="width: ' + width.get('value') + CSS.WIDTHUNIT + ';"';
+            }
+        }
 
         // Set the selection.
         this.get('host').setSelection(this._currentSelection);
 
         // Note there are some spaces inserted in the cells and before and after, so that users have somewhere to click.
         var nl = "\n";
-        tablehtml = '<br/>' + nl + '<table>' + nl;
+        tablehtml = '<br/>' + nl + '<table' + bordertable + '>' + nl;
 
         var captionstyle = '';
         if (captionposition.get('value')) {
@@ -464,7 +681,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             i = 1;
             tablehtml += '<thead>' + nl + '<tr>' + nl;
             for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
-                tablehtml += '<th scope="col"></th>' + nl;
+                tablehtml += '<th scope="col"' + bordercell + '></th>' + nl;
             }
             tablehtml += '</tr>' + nl + '</thead>' + nl;
         }
@@ -473,9 +690,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             tablehtml += '<tr>' + nl;
             for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
                 if (j === 0 && (headers.get('value') === 'rows' || headers.get('value') === 'both')) {
-                    tablehtml += '<th scope="row"></th>' + nl;
+                    tablehtml += '<th scope="row"' + bordercell + '></th>' + nl;
                 } else {
-                    tablehtml += '<td></td>' + nl;
+                    tablehtml += '<td ' + bordercell + '></td>' + nl;
                 }
             }
             tablehtml += '</tr>' + nl;
@@ -903,6 +1120,35 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     },
 
     /**
+     * Obtain values for the table borders
+     *
+     * @method _getBorderConfiguration
+     * @param {Node} node
+     * @private
+     * @return {Array} or {Boolean} Returns the settings, if presents, or else returns false
+     */
+    _getBorderConfiguration: function(node) {
+        // We need to make a clone of the node in order to avoid grabbing any
+        // of the computed styles from the DOM. We only want inline styles set by us.
+        var shadowNode = node.cloneNode(true);
+        var borderStyle = shadowNode.getStyle('borderStyle'),
+            borderColor = shadowNode.getStyle('borderColor'),
+            borderWidth = shadowNode.getStyle('borderWidth');
+
+        if (borderStyle || borderColor || borderWidth) {
+            var hexColour = Y.Color.toHex(borderColor);
+            var width = parseInt(borderWidth, 10);
+            return {
+                borderStyle: borderStyle,
+                borderColor: hexColour === "#" ? null : hexColour,
+                borderWidth: isNaN(width) ? null : width
+            };
+        }
+
+        return false;
+    },
+
+    /**
      * Edit table (show the dialogue).
      *
      * @method _editTable
@@ -912,14 +1158,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         var dialogue = this.getDialogue({
             headerContent: M.util.get_string('edittable', COMPONENT),
             focusAfterHide: false,
-            focusOnShowSelector: SELECTORS.CAPTION
+            focusOnShowSelector: SELECTORS.CAPTION,
+            width: DIALOGUE.WIDTH
         });
 
         // Set the dialogue content, and then show the dialogue.
-        var node = this._getEditDialogueContent(),
+        var node = this._getDialogueContent(true),
             captioninput = node.one(SELECTORS.CAPTION),
             captionpositioninput = node.one(SELECTORS.CAPTIONPOSITION),
             headersinput = node.one(SELECTORS.HEADERS),
+            borderinput = node.one(SELECTORS.BORDERS),
+            borderstyle = node.one(SELECTORS.BORDERSTYLE),
+            bordercolours = node.all(SELECTORS.BORDERCOLOURS),
+            bordersize = node.one(SELECTORS.BORDERSIZE),
+            backgroundcolours = node.all(SELECTORS.BACKGROUNDCOLOURS),
+            width = node.one(SELECTORS.WIDTH),
             table = this._lastTarget.ancestor('table'),
             captionnode = table.one('caption');
 
@@ -929,6 +1182,10 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captioninput.set('value', '');
         }
 
+        if (width && table.getStyle('width').indexOf('px') === -1) {
+            width.set('value', parseInt(table.getStyle('width'), 10));
+        }
+
         if (captionpositioninput && captionnode && captionnode.getAttribute('style')) {
             captionpositioninput.set('value', captionnode.getStyle('caption-side'));
         } else {
@@ -936,6 +1193,48 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captionpositioninput.set('value', '');
         }
 
+        if (table.getStyle('background-color') !== 'transparent' && this.get('allowBackgroundColour')) {
+            var hexColour = Y.Color.toHex(table.getStyle('background-color'));
+            var matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
+
+            if (matchedInput) {
+                matchedInput.set("checked", true);
+            }
+        }
+
+        if (this.get('allowBorders')) {
+            var borderValue = 'default',
+                borderConfiguration = this._getBorderConfiguration(table);
+
+            if (borderConfiguration) {
+                if (borderConfiguration.borderStyle && borderConfiguration.borderStyle === 'none') {
+                    borderValue = 'none';
+                } else {
+                    borderValue = 'outer';
+                }
+            } else {
+                borderConfiguration = this._getBorderConfiguration(table.one('td'));
+                if (borderConfiguration) {
+                     borderValue = 'all';
+                }
+            }
+
+            if (borderConfiguration) {
+                var borderStyle = borderConfiguration.borderStyle || DEFAULT.BORDERSTYLE;
+                var borderSize = borderConfiguration.borderWidth || DEFAULT.BORDERWIDTH;
+                borderstyle.set('value', borderStyle);
+                bordersize.set('value', borderSize);
+                borderinput.set('value', borderValue);
+
+                var hexColour = borderConfiguration.borderColor;
+                var matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
+
+                if (matchedInput) {
+                    matchedInput.set("checked", true);
+                }
+            }
+        }
+
         var headersvalue = 'columns';
         if (table.one('th[scope="row"]')) {
             headersvalue = 'rows';
@@ -1056,6 +1355,119 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         this.markUpdated();
     }
 
+}, {
+    ATTRS: {
+        /**
+         * Whether or not to allow borders
+         *
+         * @attribute allowBorder
+         * @type Boolean
+         */
+        allowBorders: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow style of borders
+         *
+         * @attribute allowBorderStyle
+         * @type Boolean
+         */
+        allowBorderStyles: {
+            value: true
+        },
+
+        /**
+         * What border styles to allow
+         *
+         * @attribute borderStyles
+         * @type Array
+         */
+        borderStyles: {
+            value: [
+                'solid',
+                'dashed',
+                'dotted'
+            ],
+            setter: function(value) {
+                if (value) {
+                    return value.replace(/ /g,'').split(',');
+                } else {
+                    // Not a valid value - revert to default value.
+                    return Y.Attribute.INVALID_VALUE;
+                }
+            }
+        },
+
+        /**
+         * Whether or not to allow border size
+         *
+         * @attribute allowBorderSize
+         * @type Boolean
+         */
+        allowBorderSize: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow colourizing borders
+         *
+         * @attribute allowBorderColours
+         * @type Boolean
+         */
+        allowBorderColour: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow colourizing the background
+         *
+         * @attribute allowBackgroundColour
+         * @type Boolean
+         */
+        allowBackgroundColour: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow setting the table width
+         *
+         * @attribute allowWidth
+         * @type Boolean
+         */
+        allowWidth: {
+            value: true
+        },
+
+        /**
+         * Whether we allow styling
+         * @attribute allowStyling
+         * @type Boolean
+         */
+        allowStyling: {
+            readOnly: true,
+            getter: function() {
+                return this.get('allowBorders') || this.get('allowBackgroundColour') || this.get('allowWidth');
+            }
+        },
+
+        /**
+         * Available colors
+         * @attribute availableColors
+         * @type Array
+         */
+        availableColors: {
+            value: [
+                '#FFFFFF',
+                '#EF4540',
+                '#FFCF35',
+                '#98CA3E',
+                '#7D9FD3',
+                '#333333'
+            ],
+            readOnly: true
+        }
+    }
 });
 
 
diff --git a/lib/editor/atto/plugins/table/yui/src/button/js/button.js b/lib/editor/atto/plugins/table/yui/src/button/js/button.js
index 1c4f4df95a7..b72ef947016 100644
--- a/lib/editor/atto/plugins/table/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/table/yui/src/button/js/button.js
@@ -32,38 +32,21 @@
  */
 
 var COMPONENT = 'atto_table',
-    EDITTEMPLATE = '' +
-        '<form class="{{CSS.FORM}}">' +
-            '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
-            '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
-            '<br/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
-            '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
-                '<option value=""></option>' +
-                '<option value="top">{{get_string "top" "editor"}}</option>' +
-                '<option value="bottom">{{get_string "bottom" "editor"}}</option>' +
-            '</select>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_headers" class="sameline">{{get_string "headers" component}}</label>' +
-            '<select class="{{CSS.HEADERS}}" id="{{elementid}}_atto_table_headers">' +
-                '<option value="columns">{{get_string "columns" component}}' + '</option>' +
-                '<option value="rows">{{get_string "rows" component}}' + '</option>' +
-                '<option value="both">{{get_string "both" component}}' + '</option>' +
-            '</select>' +
-            '<br/>' +
-            '<div class="mdl-align">' +
-                '<br/>' +
-                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
-            '</div>' +
-        '</form>',
+    DEFAULT = {
+        BORDERSTYLE: 'solid',
+        BORDERWIDTH: '1'
+    },
+    DIALOGUE = {
+        WIDTH: '450px'
+    },
     TEMPLATE = '' +
         '<form class="{{CSS.FORM}}">' +
             '<label for="{{elementid}}_atto_table_caption">{{get_string "caption" component}}</label>' +
             '<input class="{{CSS.CAPTION}} fullwidth" id="{{elementid}}_atto_table_caption" required />' +
             '<br/>' +
             '<br/>' +
-            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">{{get_string "captionposition" component}}</label>' +
+            '<label for="{{elementid}}_atto_table_captionposition" class="sameline">' +
+            '{{get_string "captionposition" component}}</label>' +
             '<select class="{{CSS.CAPTIONPOSITION}}" id="{{elementid}}_atto_table_captionposition">' +
                 '<option value=""></option>' +
                 '<option value="top">{{get_string "top" "editor"}}</option>' +
@@ -77,16 +60,120 @@ var COMPONENT = 'atto_table',
                 '<option value="both">{{get_string "both" component}}' + '</option>' +
             '</select>' +
             '<br/>' +
-            '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
-            '<input class="{{CSS.ROWS}}" type="number" value="3" id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
-            '<br/>' +
-            '<label for="{{elementid}}_atto_table_columns" class="sameline">{{get_string "numberofcolumns" component}}</label>' +
-            '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns" ' +
-                    'size="8" min="1" max="20"/>' +
-            '<br/>' +
-            '<div class="mdl-align">' +
+            '{{#if nonedit}}' +
+                '<label for="{{elementid}}_atto_table_rows" class="sameline">{{get_string "numberofrows" component}}</label>' +
+                '<input class="{{CSS.ROWS}}" type="number" value="3" ' +
+                'id="{{elementid}}_atto_table_rows" size="8" min="1" max="50"/>' +
+                '<br/>' +
+                '<label for="{{elementid}}_atto_table_columns" ' +
+                'class="sameline">{{get_string "numberofcolumns" component}}</label>' +
+                '<input class="{{CSS.COLUMNS}}" type="number" value="3" id="{{elementid}}_atto_table_columns"' +
+                'size="8" min="1" max="20"/>' +
                 '<br/>' +
-                '<button class="{{CSS.SUBMIT}}" type="submit">{{get_string "createtable" component}}</button>' +
+            '{{/if}}' +
+            '{{#if allowStyling}}' +
+                '<fieldset>' +
+                '<legend class="mdl-align">{{get_string "appearance" component}}</legend>' +
+                '{{#if allowBorders}}' +
+                    '<label for="{{elementid}}_atto_table_borders" class="sameline">{{get_string "borders" component}}</label>' +
+                    '<select class="{{CSS.BORDERS}}" id="{{elementid}}_atto_table_borders">' +
+                        '<option value="default">{{get_string "themedefault" component}}' + '</option>' +
+                        '<option value="none">{{get_string "noborder" component}}' + '</option>' +
+                        '<option value="outer">{{get_string "outer" component}}' + '</option>' +
+                        '<option value="all">{{get_string "all" component}}' + '</option>' +
+                    '</select>' +
+                    '<br>' +
+                    '{{#if allowBorderStyles}}' +
+                        '<label for="{{elementid}}_atto_table_borderstyle" class="sameline">' +
+                        '{{get_string "borderstyles" component}}</label>' +
+                        '<select class="{{CSS.BORDERSTYLE}}" id="{{elementid}}_atto_table_borderstyle">' +
+                            '{{#each borderStyles}}' +
+                                '<option value="' + '{{this}}' + '">' + '{{this}}' + '</option>' +
+                            '{{/each}}' +
+                        '</select>' +
+                        '<br>' +
+                    '{{/if}}' +
+                    '{{#if allowBorderSize}}' +
+                        '<label for="{{elementid}}_atto_table_bordersize" class="sameline">' +
+                        '{{get_string "bordersize" component}}</label>' +
+                        '<input id="{{elementid}}_atto_table_bordersize" class="{{CSS.BORDERSIZE}}"' +
+                        'type="number" value="1" size="8" min="1" max="50"/>' +
+                        '<label style="display: inline-block;">{{CSS.BORDERSIZEUNIT}}</label>' +
+                        '<br>' +
+                    '{{/if}}' +
+                    '{{#if allowBorderColour}}' +
+                        '<label for="{{elementid}}_atto_table_bordercolour" class="sameline">' +
+                        '{{get_string "bordercolour" component}}</label>' +
+                        '<div id="{{elementid}}_atto_table_bordercolour"' +
+                        'class="{{CSS.BORDERCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                            '<label class="hideborder" for="{{../elementid}}_atto_table_bordercolour_-1"' +
+                            'style="background-color:transparent;color:transparent">' +
+
+                                '<input id="{{../elementid}}_atto_table_bordercolour_-1"' +
+                                'type="radio" name="borderColour" value="transparent" checked="checked"'+
+                                'title="{{get_string "transparent" component}}"></input>' +
+
+                                '{{get_string "transparent" component}}' +
+                            '</label>' +
+                            '{{#each availableColours}}' +
+                                '<label for="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+                                'style="background-color:{{this}};color:{{this}}">' +
+
+                                    '<input id="{{../elementid}}_atto_table_bordercolour_{{@index}}"' +
+                                    'type="radio" name="borderColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+                                    '{{this}}' +
+                                '</label>' +
+                            '{{/each}}' +
+                        '</div>' +
+                        '<br>' +
+                    '{{/if}}' +
+                '{{/if}}' +
+                '{{#if allowBackgroundColour}}' +
+                    '<label for="{{elementid}}_atto_table_backgroundcolour" class="sameline">' +
+                    '{{get_string "backgroundcolour" component}}</label>' +
+                    '<div id="{{elementid}}_atto_table_backgroundcolour"' +
+                    'class="{{CSS.BACKGROUNDCOLOUR}} {{CSS.AVAILABLECOLORS}}" size="1">' +
+                        '<label class="hideborder" for="{{../elementid}}_atto_table_backgroundcolour_-1"' +
+                        'style="background-color:transparent;color:transparent">' +
+
+                            '<input id="{{../elementid}}_atto_table_backgroundcolour_-1"' +
+                            'type="radio" name="backgroundColour" value="transparent" checked="checked"'+
+                            'title="{{get_string "transparent" component}}"></input>' +
+
+                            '{{get_string "transparent" component}}' +
+                        '</label>' +
+
+                        '{{#each availableColours}}' +
+                            '<label for="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+                            'style="background-color:{{this}};color:{{this}}">'+
+
+                                '<input id="{{../elementid}}_atto_table_backgroundcolour_{{@index}}"' +
+                                'type="radio" name="backgroundColour" value="' + '{{this}}' + '" title="{{this}}">' +
+
+                                '{{this}}' +
+                            '</label>' +
+                        '{{/each}}' +
+                    '</div>' +
+                    '<br>' +
+                '{{/if}}' +
+                '{{#if allowWidth}}' +
+                    '<label for="{{elementid}}_atto_table_width" class="sameline">' +
+                    '{{get_string "width" component}}</label>' +
+                    '<input id="{{elementid}}_atto_table_width" class="{{CSS.WIDTH}}" size="8" type="number" min="0" max="100"/>' +
+                    '<label style="display: inline-block;">{{CSS.WIDTHUNIT}}</label>' +
+                    '<br>' +
+                '{{/if}}' +
+                '</fieldset>' +
+            '{{/if}}' +
+            '<div class="mdl-align">' +
+            '<br/>' +
+            '{{#if edit}}' +
+                '<button class="submit" type="submit">{{get_string "updatetable" component}}</button>' +
+            '{{/if}}' +
+            '{{#if nonedit}}' +
+                '<button class="submit" type="submit">{{get_string "createtable" component}}</button>' +
+            '{{/if}}' +
             '</div>' +
         '</form>',
     CSS = {
@@ -96,7 +183,17 @@ var COMPONENT = 'atto_table',
         ROWS: 'rows',
         COLUMNS: 'columns',
         SUBMIT: 'submit',
-        FORM: 'atto_form'
+        FORM: 'atto_form',
+        BORDERS: 'borders',
+        BORDERSIZE: 'bordersize',
+        BORDERSIZEUNIT: 'px',
+        BORDERCOLOUR: 'bordercolour',
+        BORDERSTYLE: 'borderstyle',
+        BACKGROUNDCOLOUR: 'backgroundcolour',
+        WIDTH: 'customwidth',
+        WIDTHUNIT: '%',
+        AVAILABLECOLORS: 'availablecolors',
+        COLOURROW: 'colourrow'
     },
     SELECTORS = {
         CAPTION: '.' + CSS.CAPTION,
@@ -105,7 +202,16 @@ var COMPONENT = 'atto_table',
         ROWS: '.' + CSS.ROWS,
         COLUMNS: '.' + CSS.COLUMNS,
         SUBMIT: '.' + CSS.SUBMIT,
-        FORM: '.atto_form'
+        BORDERS: '.' + CSS.BORDERS,
+        BORDERSIZE: '.' + CSS.BORDERSIZE,
+        BORDERCOLOURS: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]',
+        SELECTEDBORDERCOLOUR: '.' + CSS.BORDERCOLOUR + ' input[name="borderColour"]:checked',
+        BORDERSTYLE: '.' + CSS.BORDERSTYLE,
+        BACKGROUNDCOLOURS: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]',
+        SELECTEDBACKGROUNDCOLOUR: '.' + CSS.BACKGROUNDCOLOUR + ' input[name="backgroundColour"]:checked',
+        FORM: '.atto_form',
+        WIDTH: '.' + CSS.WIDTH,
+        AVAILABLECOLORS: '.' + CSS.AVAILABLECOLORS
     };
 
 Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
@@ -153,7 +259,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             callback: this._displayTableEditor,
             tags: 'table'
         });
-
         // Disable mozilla table controls.
         if (Y.UA.gecko) {
             document.execCommand("enableInlineTableEditing", false, false);
@@ -175,11 +280,12 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             var dialogue = this.getDialogue({
                 headerContent: M.util.get_string('createtable', COMPONENT),
                 focusAfterHide: true,
-                focusOnShowSelector: SELECTORS.CAPTION
+                focusOnShowSelector: SELECTORS.CAPTION,
+                width: DIALOGUE.WIDTH
             });
 
             // Set the dialogue content, and then show the dialogue.
-            dialogue.set('bodyContent', this._getDialogueContent())
+            dialogue.set('bodyContent', this._getDialogueContent(false))
                     .show();
         }
     },
@@ -217,28 +323,6 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     },
 
     /**
-     * Return the edit table dialogue content, attaching any required
-     * events.
-     *
-     * @method _getEditDialogueContent
-     * @private
-     * @return {Node} The content to place in the dialogue.
-     */
-    _getEditDialogueContent: function() {
-        var template = Y.Handlebars.compile(EDITTEMPLATE);
-        this._content = Y.Node.create(template({
-                CSS: CSS,
-                elementid: this.get('host').get('elementid'),
-                component: COMPONENT
-            }));
-
-        // Handle table setting.
-        this._content.one('.submit').on('click', this._updateTable, this);
-
-        return this._content;
-    },
-
-    /**
      * Return the dialogue content for the tool, attaching any required
      * events.
      *
@@ -246,16 +330,33 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
      * @private
      * @return {Node} The content to place in the dialogue.
      */
-    _getDialogueContent: function() {
+    _getDialogueContent: function(edit) {
         var template = Y.Handlebars.compile(TEMPLATE);
+        var availableColours = this.get('availableColors');
+
         this._content = Y.Node.create(template({
                 CSS: CSS,
                 elementid: this.get('host').get('elementid'),
-                component: COMPONENT
+                component: COMPONENT,
+                edit: edit,
+                nonedit: !edit,
+                allowStyling: this.get('allowStyling'),
+                allowBorders: this.get('allowBorders'),
+                allowBorderStyles: this.get('allowBorderStyles'),
+                borderStyles: this.get('borderStyles'),
+                allowBorderSize: this.get('allowBorderSize'),
+                allowBorderColour: this.get('allowBorderColour'),
+                allowBackgroundColour: this.get('allowBackgroundColour'),
+                availableColours: availableColours,
+                allowWidth: this.get('allowWidth')
             }));
 
         // Handle table setting.
-        this._content.one('.submit').on('click', this._setTable, this);
+        if (edit) {
+            this._content.one('.submit').on('click', this._updateTable, this);
+        } else {
+            this._content.one('.submit').on('click', this._setTable, this);
+        }
 
         return this._content;
     },
@@ -328,7 +429,17 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         var caption,
             captionposition,
             headers,
+            borders,
+            bordersize,
+            borderstyle,
+            bordercolour,
+            backgroundcolour,
+            backgroundcolourvalue = '#FFFFFF',
+            borderSizeValue = '1',
+            borderStyleValue = 'solid',
+            borderhex = '#FFFFFF',
             table,
+            width,
             captionnode;
 
         e.preventDefault();
@@ -341,8 +452,57 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
         captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
+        borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+        bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+        bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+        borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+        backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
+        width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
+
+        if (bordercolour) {
+            borderhex = bordercolour.get('value');
+        }
+
+        if (bordersize) {
+            borderSizeValue = bordersize.get('value');
+        }
+
+        if (borderstyle) {
+            borderStyleValue = borderstyle.get('value');
+        }
+
+        if (backgroundcolour) {
+            backgroundcolourvalue = backgroundcolour.get('value');
+        }
 
         table = this._lastTarget.ancestor('table');
+        // Clear the inline border styling
+        table.removeAttribute('style');
+        table.all('td, th').each(function() {
+            this.removeAttribute('style');
+        });
+
+        if (borders) {
+            if (borders.get('value') === 'outer') {
+                table.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                              borderStyleValue + ' ' + borderhex);
+            } else if (borders.get('value') === 'all') {
+                table.all('td, th').each(function() {
+                    this.setStyle('border', borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                             borderStyleValue + ' ' + borderhex);
+                });
+            } else if (borders.get('value') === 'none') {
+                table.setStyle('border', 'none');
+            }
+        }
+
+        if (width && width.get('value')) {
+            table.setStyle('width', width.get('value') + CSS.WIDTHUNIT);
+        }
+
+        if (backgroundcolourvalue !== '') {
+            table.setStyle('background-color', backgroundcolourvalue);
+        }
 
         captionnode = table.one('caption');
         if (!captionnode) {
@@ -426,10 +586,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     _setTable: function(e) {
         var caption,
             captionposition,
+            borders,
+            bordertable = '',
+            bordercell = '',
+            bordersize,
+            borderstyle,
+            bordercolour,
+            borderSizeValue = '1',
+            borderStyleValue = 'solid',
+            borderhex = '#FFFFFF',
             rows,
             cols,
             headers,
             tablehtml,
+            backgroundcolour,
+            width,
             i, j;
 
         e.preventDefault();
@@ -441,16 +612,62 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
 
         caption = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTION);
         captionposition = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.CAPTIONPOSITION);
+        borders = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERS);
+        bordersize = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSIZE);
+        bordercolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBORDERCOLOUR);
+        borderstyle = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.BORDERSTYLE);
+        backgroundcolour = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.SELECTEDBACKGROUNDCOLOUR);
         rows = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.ROWS);
         cols = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.COLUMNS);
         headers = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.HEADERS);
+        width = e.currentTarget.ancestor(SELECTORS.FORM).one(SELECTORS.WIDTH);
+
+        if (bordercolour) {
+            borderhex = bordercolour.get('value');
+        }
+
+        if (bordersize) {
+            borderSizeValue = bordersize.get('value');
+        }
+
+        if (borderstyle) {
+            borderStyleValue = borderstyle.get('value');
+        }
+
+        if (borders) {
+            if (borders.get('value') === 'outer') {
+                bordertable = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                              borderStyleValue + ' ' + borderhex + ';"';
+            } else if (borders.get('value') === 'all') {
+                bordercell = ' style="border: ' + borderSizeValue + CSS.BORDERSIZEUNIT + ' ' +
+                             borderStyleValue + ' ' + borderhex + ';"';
+            }
+        }
+
+        if (backgroundcolour) {
+            if (bordertable !== '') {
+                bordertable = bordertable.substring(0, bordertable.length-1) +
+                              'background-color: ' + backgroundcolour.get('value') + ';"';
+            } else {
+                bordertable = ' style="background-color: ' + backgroundcolour.get('value') + ';"';
+            }
+        }
+
+        if (width && width.get('value')) {
+            if (bordertable !== '') {
+                bordertable = bordertable.substring(0, bordertable.length-1) + 'width: ' +
+                              width.get('value') + CSS.WIDTHUNIT + ';"';
+            } else {
+                bordertable = ' style="width: ' + width.get('value') + CSS.WIDTHUNIT + ';"';
+            }
+        }
 
         // Set the selection.
         this.get('host').setSelection(this._currentSelection);
 
         // Note there are some spaces inserted in the cells and before and after, so that users have somewhere to click.
         var nl = "\n";
-        tablehtml = '<br/>' + nl + '<table>' + nl;
+        tablehtml = '<br/>' + nl + '<table' + bordertable + '>' + nl;
 
         var captionstyle = '';
         if (captionposition.get('value')) {
@@ -462,7 +679,7 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             i = 1;
             tablehtml += '<thead>' + nl + '<tr>' + nl;
             for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
-                tablehtml += '<th scope="col"></th>' + nl;
+                tablehtml += '<th scope="col"' + bordercell + '></th>' + nl;
             }
             tablehtml += '</tr>' + nl + '</thead>' + nl;
         }
@@ -471,9 +688,9 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             tablehtml += '<tr>' + nl;
             for (j = 0; j < parseInt(cols.get('value'), 10); j++) {
                 if (j === 0 && (headers.get('value') === 'rows' || headers.get('value') === 'both')) {
-                    tablehtml += '<th scope="row"></th>' + nl;
+                    tablehtml += '<th scope="row"' + bordercell + '></th>' + nl;
                 } else {
-                    tablehtml += '<td></td>' + nl;
+                    tablehtml += '<td ' + bordercell + '></td>' + nl;
                 }
             }
             tablehtml += '</tr>' + nl;
@@ -901,6 +1118,35 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
     },
 
     /**
+     * Obtain values for the table borders
+     *
+     * @method _getBorderConfiguration
+     * @param {Node} node
+     * @private
+     * @return {Array} or {Boolean} Returns the settings, if presents, or else returns false
+     */
+    _getBorderConfiguration: function(node) {
+        // We need to make a clone of the node in order to avoid grabbing any
+        // of the computed styles from the DOM. We only want inline styles set by us.
+        var shadowNode = node.cloneNode(true);
+        var borderStyle = shadowNode.getStyle('borderStyle'),
+            borderColor = shadowNode.getStyle('borderColor'),
+            borderWidth = shadowNode.getStyle('borderWidth');
+
+        if (borderStyle || borderColor || borderWidth) {
+            var hexColour = Y.Color.toHex(borderColor);
+            var width = parseInt(borderWidth, 10);
+            return {
+                borderStyle: borderStyle,
+                borderColor: hexColour === "#" ? null : hexColour,
+                borderWidth: isNaN(width) ? null : width
+            };
+        }
+
+        return false;
+    },
+
+    /**
      * Edit table (show the dialogue).
      *
      * @method _editTable
@@ -910,14 +1156,21 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         var dialogue = this.getDialogue({
             headerContent: M.util.get_string('edittable', COMPONENT),
             focusAfterHide: false,
-            focusOnShowSelector: SELECTORS.CAPTION
+            focusOnShowSelector: SELECTORS.CAPTION,
+            width: DIALOGUE.WIDTH
         });
 
         // Set the dialogue content, and then show the dialogue.
-        var node = this._getEditDialogueContent(),
+        var node = this._getDialogueContent(true),
             captioninput = node.one(SELECTORS.CAPTION),
             captionpositioninput = node.one(SELECTORS.CAPTIONPOSITION),
             headersinput = node.one(SELECTORS.HEADERS),
+            borderinput = node.one(SELECTORS.BORDERS),
+            borderstyle = node.one(SELECTORS.BORDERSTYLE),
+            bordercolours = node.all(SELECTORS.BORDERCOLOURS),
+            bordersize = node.one(SELECTORS.BORDERSIZE),
+            backgroundcolours = node.all(SELECTORS.BACKGROUNDCOLOURS),
+            width = node.one(SELECTORS.WIDTH),
             table = this._lastTarget.ancestor('table'),
             captionnode = table.one('caption');
 
@@ -927,6 +1180,10 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captioninput.set('value', '');
         }
 
+        if (width && table.getStyle('width').indexOf('px') === -1) {
+            width.set('value', parseInt(table.getStyle('width'), 10));
+        }
+
         if (captionpositioninput && captionnode && captionnode.getAttribute('style')) {
             captionpositioninput.set('value', captionnode.getStyle('caption-side'));
         } else {
@@ -934,6 +1191,48 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
             captionpositioninput.set('value', '');
         }
 
+        if (table.getStyle('background-color') !== 'transparent' && this.get('allowBackgroundColour')) {
+            var hexColour = Y.Color.toHex(table.getStyle('background-color'));
+            var matchedInput = backgroundcolours.filter('[value="' + hexColour + '"]');
+
+            if (matchedInput) {
+                matchedInput.set("checked", true);
+            }
+        }
+
+        if (this.get('allowBorders')) {
+            var borderValue = 'default',
+                borderConfiguration = this._getBorderConfiguration(table);
+
+            if (borderConfiguration) {
+                if (borderConfiguration.borderStyle && borderConfiguration.borderStyle === 'none') {
+                    borderValue = 'none';
+                } else {
+                    borderValue = 'outer';
+                }
+            } else {
+                borderConfiguration = this._getBorderConfiguration(table.one('td'));
+                if (borderConfiguration) {
+                     borderValue = 'all';
+                }
+            }
+
+            if (borderConfiguration) {
+                var borderStyle = borderConfiguration.borderStyle || DEFAULT.BORDERSTYLE;
+                var borderSize = borderConfiguration.borderWidth || DEFAULT.BORDERWIDTH;
+                borderstyle.set('value', borderStyle);
+                bordersize.set('value', borderSize);
+                borderinput.set('value', borderValue);
+
+                var hexColour = borderConfiguration.borderColor;
+                var matchedInput = bordercolours.filter('[value="' + hexColour + '"]');
+
+                if (matchedInput) {
+                    matchedInput.set("checked", true);
+                }
+            }
+        }
+
         var headersvalue = 'columns';
         if (table.one('th[scope="row"]')) {
             headersvalue = 'rows';
@@ -1054,4 +1353,117 @@ Y.namespace('M.atto_table').Button = Y.Base.create('button', Y.M.editor_atto.Edi
         this.markUpdated();
     }
 
+}, {
+    ATTRS: {
+        /**
+         * Whether or not to allow borders
+         *
+         * @attribute allowBorder
+         * @type Boolean
+         */
+        allowBorders: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow style of borders
+         *
+         * @attribute allowBorderStyle
+         * @type Boolean
+         */
+        allowBorderStyles: {
+            value: true
+        },
+
+        /**
+         * What border styles to allow
+         *
+         * @attribute borderStyles
+         * @type Array
+         */
+        borderStyles: {
+            value: [
+                'solid',
+                'dashed',
+                'dotted'
+            ],
+            setter: function(value) {
+                if (value) {
+                    return value.replace(/ /g,'').split(',');
+                } else {
+                    // Not a valid value - revert to default value.
+                    return Y.Attribute.INVALID_VALUE;
+                }
+            }
+        },
+
+        /**
+         * Whether or not to allow border size
+         *
+         * @attribute allowBorderSize
+         * @type Boolean
+         */
+        allowBorderSize: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow colourizing borders
+         *
+         * @attribute allowBorderColours
+         * @type Boolean
+         */
+        allowBorderColour: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow colourizing the background
+         *
+         * @attribute allowBackgroundColour
+         * @type Boolean
+         */
+        allowBackgroundColour: {
+            value: true
+        },
+
+        /**
+         * Whether or not to allow setting the table width
+         *
+         * @attribute allowWidth
+         * @type Boolean
+         */
+        allowWidth: {
+            value: true
+        },
+
+        /**
+         * Whether we allow styling
+         * @attribute allowStyling
+         * @type Boolean
+         */
+        allowStyling: {
+            readOnly: true,
+            getter: function() {
+                return this.get('allowBorders') || this.get('allowBackgroundColour') || this.get('allowWidth');
+            }
+        },
+
+        /**
+         * Available colors
+         * @attribute availableColors
+         * @type Array
+         */
+        availableColors: {
+            value: [
+                '#FFFFFF',
+                '#EF4540',
+                '#FFCF35',
+                '#98CA3E',
+                '#7D9FD3',
+                '#333333'
+            ],
+            readOnly: true
+        }
+    }
 });
-- 
2.11.4.GIT