Skip to main content

Search

Tiled tables

  • Updated

Tiled tables are text entry tables which allow respondents to either type a numeric response or use buttons to increase or decrease the value of their response. To create a tiled table, include mode: tiled in the table's code.

Try it!

Details

  • Tiled tables can be created with either simple table syntax or the start table widget.
  • The step tag specifies how much each click of the arrows increases or decreases the respondent's input.
  • Both type: number table and type: integer table will allow for whole number steps. Use type: number table if decimal steps are necessary.
  • The layout tag can be included to alter the positioning of the buttons in relation to the table's text fields. The 'split' and 'split-reverse' layouts are recommended for surveys that will be translated to right-to-left (RTL) languages such as Arabic or Hebrew.

Commonly used tags

Tag Description
columns Specifies a max number of columns in which to display the table's rows.
datatype

Defines the type of input accepted for a response.

Frequently used datatypes include: 'number', 'whole', 'integer', and 'decimals'.

instructions

(alias instruct)

 Provides instructional text to guide the respondent.
layout

Specifies the location of the buttons used to increase/decrease the respondent's input. Options include:

  • split — Default layout; displays buttons on either side of the input field, starting with minus relative to direction of language. [-]____[+] for English, [+]____[-] for right-to-left (RTL) languages.
  • split-reverse — Displays buttons on either side of the input field, starting with plus relative to direction of language. [+]____[-] for English, [-]____[+] for RTL languages.
  • minus-plus — Displays buttons on either side of the input field, always placing minus on the left, plus on the right, regardless of language. [-]____[+].
  • plus-minus — Displays buttons on either side of the input field, always placing plus on the left, minus on the right, regardless of language. [+]____[-].
  • left — Displays buttons on the left side of the input field, one above the other (plus on top) [±]____.
  • right — Displays buttons on the right side of the input field, one above the other (plus on top) ____[±].
lefttoright Used with the columns tag; accepts 'y' and 'n' inputs. If set to 'n', displays the rows numbering downward before continuing into the next column.
max Specifies the maximum accepted value for a response.
min Specifies the minimum accepted value for a response.
postfix Specifies text to be displayed after the text field.
prefix Specifies text to be applied before the text field.
range Defines and validates a numeric range. Can be used in place of the min and max tags.

showcolumntotal

(alias sct)

 Adds a "Total" tile at the bottom of the table which keeps a running total of the column's sum.
size Defines the size (width) of the text field in ems. This tag can be applied to any text question type to override the system defaults.
step

Adds buttons to a numeric text question so the respondent can increase or decrease an inputted value by a set amount (or "step"). Accepts both whole number and decimal inputs.

Tip! HTML for "non-breaking space" ( ) can be added to accommodate a needed space after or before the prefix and postfix tags, respectively.

Additional examples

SCT tables

Tiled tables can be used with SCT tables by including showcolumntotal, which adds a "Total" tile that displays a running sum of the other tiles. The following example uses a step of '5' so the respondent's input will increase or decrease by 5% as the buttons are clicked.

With columns

The columns tag lets programmers set a maximum number of columns to display the table's tiles. Whether the specified number of columns is used depends on the respondent's device display width. A comparison of the default layout versus columns: 2 is shown below.

Additionally, ifnotset: 0 and required: n have been included here so that respondents can submit their input without having to manually enter '0' in a text field.

Textbox tables

Textbox tables can support mode: tiled as well, offering an alternative for clients seeking a different way to display textbox tables to respondents.

Note, CSS has been added to improve the way the HTML is rendered. If you need assistance with HTML in a tiled table, please reach out to Support.

Related to

Related articles

Comments

0 comments

Please sign in to leave a comment.