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.


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



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.


Here’s how you set it up: 


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.

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>)


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.



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.


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



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.


That’s it! You’re done.

Don't forget to save your progress regularly.