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: Insert Table button in the Rich text Editor.

The following menu will appear:

Table properties window.

Figure 2: 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.

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: 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.

Was this article helpful?
0 out of 0 found this helpful

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