Submit a request
Submit a request

Inserting Tables into a Question using the Toolbar

This page shows how to create various tables in Items and Questions.

Insert a Table

A table can be easily inserted onto a question by clicking on the Insert Table button in the Rich Text Editor.

Insert Table button in the Rich text Editor.

Figure 1: Inserting the Table button in the Rich Text Editor.

The following menu will appear:

Table properties window.

Figure 2: The Table Properties window.

Select the number of rows and columns in the table.

Under the Headers drop down menu choose where you want headers to appear. The options are: first row, first column or both.
Next, choose table styles from the list on the left. Tick the box beside the selected option to apply the style.

Editing a Table

To edit a table you have already created you can do so by right-clicking on the table.

Cell: Insert cell before or after the selected cell, merge cell, delete the selected cell, split cell. Also see "Table Cell Properties" below.

Row: Insert row before or after selected row, delete the selected row.

Column: Insert column before or after selected column, delete selected column.

Delete Table: Delete the entire table.

Table properties: Change table style, select headers.

fig3CT.png

Figure 3: The table options menu.

The following are table styles that can be applied to tables:

Default Table Style

Add no styling to the table.

fig4CT.png

Table Condensed

Makes tables more compact by cutting cell padding in half.

fig5CT.png

Table Striped

Adds zebra-striping to any table row within the table body.

fig6CT.png

Table Hover

Enable a hover state on table rows within the table body.

fig7CT.png

Table Bordered

Add borders and rounded corners to the table.

Fig8CT.png

Exclude All Borders

Add no borders to the table.

fig11CT.png

Content Width

Table column cells will extend to text width.

fig12CT.png

Disable Table Styles

Remove table styling.

fig13Ct.png

Optional Row Classes

Use Bootstrap contextual classes to color table rows. This can only be added in the Item Source. Below see the example of how to use colors in a table and a HTML snippet to implement it.

Class Description
.active Applies the hover color to a particular row or cell.
.success Indicates a successful or positive action.
.warning Indicates a warning that might need attention.
.danger Indicates a dangerous or potentially negative action.

 

fig14CT.png

Figure 3: Colored rows using Bootstrap.

 

Table Cell Properties

Once a table has been created, you can adjust the formatting of any cell individually. To do this, click to put the cursor into the desired cell. Right-click, then choose Cell > Cell Properties from the context menu. The following options for cell properties appear:

Table_Cell_Properties_-_Author_Site.png

Figure 4: The Table Cell Properties dialog.

Width: sets the width of the table cell. This can be specified as pixels or a percentage.

Height: sets the height of the table cell. This can be specified as pixels or a percentage.

Word Wrap: when set, causes text in the cell to wrap and appear on two or more lines, if the text would have extended beyond the cell's original width. 

Horizontal Alignment: choose the alignment of the text within the cell. The options here are left, center, right, or justify (the text will be stretched out inside the cell to evenly cover its width).

Vertical Alignment: choose the alignment of the text within the cell. The options here are top, middle, bottom, or baseline (puts text near the bottom of the cell and tries to aligns with the imaginary line where the base of most text characters "sit" on a given line of text).

Cell Type: choose the intended purpose of the cell, which affects the text formatting within. The options here are header (usually a descriptive title or name at the beginning of a row or column), or data (simple numbers or text values).

Rows Span: controls how many rows a table cell should span vertically. Similar to "merging" cells in spreadsheets.

Columns Span: controls how many columns a table cell should span horizontally. Similar to "merging" cells in spreadsheets.

Background Color: sets the background color of the table cell. Can be named with ordinary colors such as "red" or you can use HTML color codes such as "#FABFAB".

Border Color: sets the border color of the table cell. Can be named with ordinary colors such as "red" or you can use HTML color codes such as "#FABFAB".

Was this article helpful?
1 out of 5 found this helpful

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.