Using tables in content

You can easily add a table of any size to content and customize its layout to structure data for readability. In the following screen capture we use a wiki page editing example, but the table capability is available with the editor (TinyMCE) for any content area throughout the Arm Community. 

Click the Table > Insert Table menu option on the enhanced editor toolbar. The Insert/Edit Table graph appears.

 

Tasks

The following sections explain common table functions in posts.

Create a table

  1. In post edit mode, click the Table > Insert table menu option. The Insert/Edit table dialog box appears.
  2. Holding down the mouse button, select the table cells to draw the table you desire (number of rows and columns).
  3. Click. Your table is added to the page with no content. Enter the appropriate content and save your post to view your table or click Tools > Preview.

Insert a row

  1. Enter post edit mode.
  2. Click anywhere in a row above or below where you want to insert a new row.
  3. Right-click and select Row.
  4. To insert a new row above the current row, select Insert a Row Before from the contextual menu.
  5. To insert a new row below the current row, select Insert a Row After from the contextual menu.

Delete a row

  1. Enter post edit mode.
  2. Click anywhere in the table row you want to delete.
  3. Right-click and select Row.
  4. Right-click and select Delete Row from the contextual menu. The row is removed.

Insert a column

  1. Enter post edit mode.
  2. Click anywhere in the table column left or right of where you want to insert a column.
  3. Right-click and select Column. 
  4. Right-click and select Insert a column before to insert one to the left. Select Insert a column after to insert one to the right.

Delete a column

  1. Enter post edit mode.
  2. Click anywhere in the column you want to delete.
  3. Right-click and select Column. Right-click and select Remove Column. The column is removed.

Merge cells

  1.  Enter post edit mode.
  2. Select the cells you want to merge.
  3. Right-click and select Cell > Merge cells. The Merge cells dialog box appears.
  4. In Cols, specify the total number of columns (including the one where your cursor is) that you want to combine into one column.
  5. In Rows, specify the total number of rows (including the one where your cursor is) that you want to combine into one row.
  6. Click Update. Note that if you decide to split the merged cells, the content will remain merged together after the split.

Split merged cells

  1. Enter post edit mode.
  2. Click in the merged cell.
  3. Right-click and select Cell > Split cell. The cell is split back to the way they were previously (such as back to single columns or rows). Content from merged cells remains merged together, and you will need to separate it manually if desired.

Add a background colour to a table cell

  1. Enter post edit mode.
  2. Select the cell where you want to add a background colour.
  3. Right-click and select Cell > Cell properties. The Cell properties dialog box appears.
  4. Click Advanced.
  5. Click in the Background Colour field. You can either enter the colour hex code or click the colour button to select it on a colour selector.
  6. Click OK.

Delete a table

  1. Enter post edit mode.
  2. Click in a cell within the table.
  3. Right-click and select Delete table.

Make a table scrollable

If your table is too wide for your page, you can make it scrollable (left to right):

  1. Open the wiki page HTML window.
  2. Locate the <table> tag.
  3. Insert the following tag immediately preceding it:
    <div style='overflow: scroll'>
  4. Locate the </table> tag and insert the following tag immediately following it:
    </div>

Settings

The insert/edit table dialog box has two tabs, which are explained in the following sections.

Cell properties

The following table describes the options for the Cell properties dialog box General and Advanced tabs. These properties can be overridden the page's HTML source if required.

Item Description
Width The fixed width, in pixels, of the cell. If you do not specify the width, the cell automatically expands to accommodate the widest text, wrapping when necessary.
Height The fixed height, in pixels, of the cell. If you do not specify the height, the cell automatically expands to accommodate the number of lines in the row of text.
Cell type Either a regular table cell or Header cell. Header cell inserts the <th> tag.
H Align None, Left, Center, Right. Horizontal alignment. Inserts the halign style.
V Align None, Top, Middle, Bottom. Inserts the valign style.
Style Style class for cell. These are the the same as the items in the Styles drop-down list.
Border colour Colour of the cell border. Enter the colour or select it using the colour selector button.
Background colour Colour of the cell background. Enter the colour or select it using the colour selector button.

Row properties

The following table describes the options for the Row properties dialog box General and Advanced tabs. These properties can be overridden the page's HTML source if required.

Item Description
Row type Header, Body, or Footer.
Alignment None, Left, Center, or Right.
Height If specified, will create a hard height boundary for the row.
Style Style class for row. These are the the same as the items in the Styles drop-down list.
Border colour Colour of the row border. Enter the colour or select it using the colour selector button.
Background colour Colour of the row background. Enter the colour or select it using the colour selector button.

Importing tables from Microsoft Word

You can import tables from Microsoft Word or Apple Pages into the Community using simple copy and paste commands. (Do not use Paste as Text.) However, the TinyMCE's import functionality might not support all cell shading or border formatting. 

Related
Recommended