How to include a table in your questionnaire?

If you’d like to create a more structured overview in your questionnaire or add a text-only screen with a table, you can quickly include it by copying the piece of code for a basic table that is included below. Tables are a visually great way to show the data.


Essential 
Professional 
Enterprise ✓
ReportR ✓

But let’s take it one step at a time!


table example


Don’t worry, you don’t have to know how to write code, all necessary snippets are included in this guide and their specific use will be explained. In this guide, we'll discuss:

  1. Preparing your question
  2. Including the code for a table
  3. Adding extra rows or columns
  4. Including respondent data in your table
  5. Styling your table


1 Preparing your question

Make sure that you have your questionnaire ready and add a new question where you’d like to include the table. 

For our example, we’ve opted for a Text-Only question and we’ll use it as an “in-between update” for respondents taking a quiz.


You can already add the content that you don’t want to include in your table. Such as a title or a short explanatory intro.


Now click on the icon indicated in the screenshot below, this will open the “code” of your question.


preparing a question gif

The current lines that you see here can stay there, you don't need to do anything to those. 

By clicking the “</>” button again you can switch back to the regular view.


2 Including the code for a table

The code snippet provided below is a very basic table with some dummy content. Simply copy and paste this into the code-view of your question, directly behind the other code you see. (most likely the last word you see is </div>)


code for the question


Copy the below code to include this in your code view:


<table>
<tr>
<th>Title 1 </th>
<th>Title 2 </th>
<th>Title 3 </th>
</tr>
<tr>
<td>Company X</td>
<td>John Smith</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>Company Z</td>
<td>Jane Smith</td>
<td>Belgium</td>
</tr>
</table>


Now if you switch back to the normal view by clicking the “</>” button, you’ll notice that this table is included and already contains some dummy text. You can use the regular question editor to adapt the content of your table.


3 Adding extra rows or columns

3.1 To add extra columns

Include an extra <th> Title x </th> for each additional column to your code snippet.

This snippet stands for a title at the top of your table ("table heading"), this means that you’ll also have to add an additional <td> extra cell </td> to your lines below.


(You can do this directly into the question editor in code-view, but this might be easier in Notepad or an empty word-document)


Your code would then look something like this:


<table>
<tr>
<th>Title 1</th>
<th>Title 2 </th>
<th>Title 3</th>
<th> NEW TITLE X</th>
<th> NEW TITLE Y </th>
</tr>
<tr>
<td>Company X</td>
<td>John Smith</td>
<td>United Kingdom</td>
<td> NEW CELL </td>
<td> NEW CELL </td>
</tr>
<tr>
<td>Company Z</td>
<td>Jane Smith</td>
<td>Belgium</td>
<td> NEW CELL </td>
<td> NEW CELL </td>
</tr>
</table>

(To use this code, simply copy and paste!)


3.2 To add extra rows

Include the following code snippet for one additional row.

<tr>
<td>New Company </td>
<td>New name</td>
<td>New country</td>
</tr>

Your code would then look something like this:

<table>
<tr>
<th>Title 1 </th>
<th>Title 2 </th>
<th>Title 3 </th>
</tr>
<tr>
<td>Company X</td>
<td>John Smith</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>Company Z</td>
<td>Jane Smith</td>
<td>Belgium</td>
</tr>
<tr>
<td>NEW COMPANY </td>
<td>NEW NAME</td>
<td>NEW COUNTRY</td>
</tr>
</table>

(To use this code, simply copy and paste!)


You can add as many rows or columns as you need by repeating this process.

4 Including respondent data in your table

To include respondent data in your table, such as a score or a specific answer, you can make use of piping variables.


respondent data



In this empty cell, we want to include the country that the respondent chose.

By selecting the right variable from the list, the software will automatically include the correct response to the table while your respondent is taking the questionnaire.


chose variables

In your question editor, this variable will look like this:


the variable example


5 Styling your table

Styling your table works the same way as you would style the rest of your question. Add colors, change font-weight, … etc. in your question editor.


For a more advanced table or features, you can use Custom CSS.


That’s it! You’re done. Don't forget to save your progress regularly. 

V
Vincent is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.