Table Plugin
the Table plugin provides specialized controls for table insertion and manipulation.
1 Table Plugin
The Table Plugin will allow you to edit tables within your contents. You can do pretty much everything that you’d expect from editing tables, like adding and deleting rows and columns as well as merging and splitting cells. You can use the tab key to jump from one cell to the next.
2 Functional Description
The Table plugin allows you to create, edit and delete a table, add or delete single rows or columns, define headers etc.
2.1 Create a table and make it WAI accessible
In order to create a table move a cursor to your desired position, open the “Insert” tab in the Aloha Editor and click on the Table button. Now choose how many rows and columns you want to have via moving the mouse over the grid and click on the last marked cell and create the table. The whole table is wrapped into a <table> tag and each row consists of <tr> and each cell of a <td> tag. Every table has a WAI (Web Accessibility Initiative) icon which will turn green if a summary is added.
2.2 Selecting text and cells
- Dragging the mouse in a single cell will select contents (but not the cell itself)
- Dragging the mouse over multiple cells will select a “rectangular” cell-range covering the area between the start position and the current position (see note below about Internet Explorer)
- Clicking into cells while holding the SHIFT-key will add the cell to the selected cell-range, which will then cover the “rectangular” area between the first and the last SHIFT-clicked cell.
- Clicking into the grey area above a column will select the column
- SHIFT-Clicking into the grey area above a column will extend the current column selection to cover the area between the first and last SHIFT-clicked column
- Clicking or SHIFT-clicking the grey area besides a row will select the row similar to selection of columns
In Internet Explorer it is not possible to select cells when you select a cell (the text in it) and drag the mouse over the other cells you want to select — you’ll have to click and drag on the table cell border which is sometimes quite tricky. In that case you can click into the first cell and then “shift-click” into the last cell of the coherent cell range you want to select.
2.3 Add and delete rows and columns
Move the mouse pointer into the grey area beside or above the row or column (the mouse standard pointer turn into a little black arrow) and click. To mark two or more rows or columns just press shift and hold it down while clicking beside other rows or columns to mark them as well. Now you can click on the desired button to add a cell or row before or after or delete the selected rows.
2.4 Table headline
To format a row or column as a headline select the row or column and click on the table header button in Aloha Editor. To delete the header formatting, select the row or column and click the button again.
2.5 Merge and split cells
In order to merge two or more cells select the desired cells, rows or columns and click the merge cells button at the Aloha Editor. The content of all cells will be displayed in on cell. To split cells just select the cells, rows or column and click the split cells button.
All contents will be merged into the first cell and all other previously split cells will be empty.
2.6 Resizing rows and columns
This feature is not available for IE 7 or below.
Table columns and rows can be resized using drag & drop. When hovering over a cells bottom or right edge the cursor will change to indicate that the cell can be resized.
To enable table resizing the following options are available:
Aloha.settings.plugins.table: { // allow resizing the table width (default: false) tableResize: true, // allow resizing the column width (default: false) colResize: true, // allow resizing the row height (default: false) rowResize: true };
Cell resizing won’t allow you to resize a cell smaller than the size of its contents. You might need to increase the width of the table first before resizing cells is possible.
To reset a table’s size, after it has been resized, use the “reset size” button from the toolbar.
2.7 Table layout
Each cell, row or column can have an individual style applied. You only have to select the cells, rows or columns and choose one layout from the table layout list.
2.8 Table caption & summary
To add a caption to a table click inside of one cell and click the button table caption. A summary may be added by using the according field in the sidebar.
3 Configuration settings
The table configuration allows for some special settings:
Aloha.settings.plugins: { table: { // all elements with no specific configuration are not allowed to insert tables config : [ 'table' ], editables: { '#one': [ 'table' ], '#two': [ ] }, // the table summary is editable in the sidebar summaryinsidebar : true, // the following settings allow the user to apply specific classes to // either the whole table or a column or row. The name is used as a // class attribute, while the iconClass is applied as a class attribute // to style the buttons tableConfig : [ { name:'hor-minimalist-a' }, { name:'box-table-a' }, { name:'hor-zebra' }, ], columnConfig : [ { name: 'table-style-bigbold', iconClass: 'aloha-button-col-bigbold' }, { name: 'table-style-redwhite', iconClass: 'aloha-button-col-redwhite' } ], rowConfig : [ { name: 'table-style-bigbold', iconClass: 'aloha-button-row-bigbold' }, { name: 'table-style-redwhite', iconClass: 'aloha-button-row-redwhite' } ], cellConfig : [ { name: 'table-style-bigbold', iconClass: 'aloha-button-row-bigbold' }, { name: 'table-style-redwhite', iconClass: 'aloha-button-row-redwhite' } ], // allow resizing the table width (default: true) tableResize: true, // allow resizing the column width (default: true) colResize: true, // allow resizing the row height (default: true) rowResize: true, //add a default class to newly created tables defaultClass : 'table-responsive' } };
If the table layout options are used alongside the sanitize-content-handler, make sure that the ‘class’-attribute is included in the whitelist of allowed attributes for the elements ‘table’, ‘tr’ and ‘td’. Without this entries in the sanitize-content-handler’s whitelist, the content-handler will per default remove the class attribute from tables, table-rows and table-cells.
4 Components
- table – insert a table into the content
- addrowbefore – adds a row before the current row
- addrowafter – adds a row after the current row
- deleterow – deletes the current row
- deletecolumn – deletes the current column
- rowheader – turns current row into a row of headers
- columnheader – turns current column into a column of headers
- romergecells – merge all cells within this row
- rowsplitcells – split merged cells within this row
- columnmergecells – merge all cells within this column
- columnsplitcells – split merged cells within this column
- addcolumnleft – add a column left of the current column
- addcolumnright – add a column right of the current column
- tablemergecells – merge selected cells
- tablesplitcells – split selected cells
- mergecells – merge selected cells
- splitcells – split selected cells
- tablecaption – input field which allows you to add a caption to the table
- naturalfit – removes defined widths and heights from rows and columns