How to include a table in your questionnaire?

Include a table in your questionnaire to create a more structured overview of the results. 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.

---

---

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

This guide will teach you:

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.

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

3.2 To add extra rows

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, size etc. in your question editor.

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

What's next?

• Add a Custom Button with HTML: Create a Custom Button with HTML and add it into an outcome or the final page of your questionnaire, in order to embed a hidden hyperlink and redirect your respondents to the webpage of your choice. 
• Edit Design Settings to customize your survey's design to match your company colors and identity. There are loads of different features for you to play around with. Each one works independently, so choose as many or as few as you fancy to customize your design!
• Set up your final screen: The final screen aims to give a final message to your respondents, thank them for participating, give further instructions or leave some extra information. You can also display the respondent score like a percentage or a gauge chart.