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.
Figure 1: inserting the table button in the rich text editor.
The following menu will appear:
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.
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.
Table Condensed
Makes tables more compact by cutting cell padding in half.
Table Striped
Adds zebra-striping to any table row within the table body.
Table Hover
Enable a hover state on table rows within the table body.
Table Bordered
Add borders and rounded corners to the table.
Exclude All Borders
Add no borders to the table.
Content Width
Table column cells will extend to text width.
Disable Table Styles
Remove table styling.
Optional Row Classes
Use 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. |
Table 1: using colors in a table.
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:
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".