Need help? Looking for tips and tricks?

This knowledge base contains loads of useful advice and answers to common questions.

If you're still stuck you can always submit a support request and we'll get back to you ASAP.

Tables - how to add tables to a consultation

Louise Cato -

It’s often useful to show data to your participants in table form and creating a table in HTML is the best way to embed it into your consultation. You can add a table as an image, by taking a screenshot for example, however respondents using screen-readers will hear only the alternative-text attached to an image, whilst by using HTML all the information in the table is able to be interpreted and read out to your respondent.

This article explains how to convert a table into HTML for those who are not confident in writing HTML themselves. We're going to show you how to use an online tool called Tables Generator to convert your existing table to HTML, as this gives you the most styling options and is really simple.

A note about pasting from Word:
Please be aware that tables cannot reliably be copied and pasted directly from Word, as Word's formatting does not talk to websites well. This means that the way your table looks can vary according to the browser you and your respondents are using and may mean lines go missing, cells and wording may move and things such as colours and styling will not carry across. This is not unique to Citizen Space and is true of copying and pasting from Word into any site.

Getting started:

Below are the instructions for embedding an HTML table in your consultation and a simple solution for converting your existing table into HTML if you are not a coding maestro.

You can add an HTML table to a consultation anywhere that you see this menu.

WYSIWYG menu bar showing options available for free text box

Using an online converter to create the code for you:

Below are links to some online converters that will transform your tables into shiny HTML source code.  Some will give you a preview of how your table will look and some give you the option to amend the formatting.  The way your table looks will be limited by the formatting options on the converter site you are using.

This first option from a site called Tables Generator allows you to build your table using their online tool, and it also gives you the ability to add colours and additional styling to it - something the other converters do not:

http://www.tablesgenerator.com/html_tables#

These other converters below may be more useful if you just want to paste from Word (or other document software) as you can paste the info into them, however there are limited styling options available using these, for example, colours are not supported.

http://tableizer.journalistopia.com

http://pressbin.com/tools/excel_to_html_table/

 

Using Tables Generator to turn a table from Word into HTML.

Step 1:

The steps below provide an example of how to copy an existing table from a Word document into the tool to create your HTML table.

This is the first screen you will see when you arrive on the Table Generator site:

The introductory screen for Tables Generator showing an empty table and menu options as described in next sentence

The blue drop down menu options are described in brief below.

  • File - this gives you the menu options for creating a new table, with parameters on the number of columns and rows. It also has the options for copying and pasting existing data from a spreadsheet or a document.
  • Edit - provides the 'undo' action and 'repeat' action buttons. 
  • Table - this provides the option to resize the table, an option to clear the cell values in the table you've created already and the option to adjust the spacing in your table.
  • Column - this provides the option to change the text alignment within the cells and options to add/delete columns
  • Row - options to add/delete rows
  • Cell - options to merge/split selected cells
  • Help - help options

Step 2 - copying and pasting your table:

Open the document with the table in (this can be a Word/Excel/other document), highlight and copy the table from your document.

image of a table in a Word document which can be copied for use in the Table Generator tool

Once the table is copied, go back to the Table Generator and select File -> Paste table data.

image of the File > Paste table data option on the Tables Generator site

A pop-up box opens which will allow you to paste in your table. Do this and press load:

image of the pop up box which appears for you to paste your table data into

Your table will then have been imported into the HTML generator. 

image of the table now on the Table Generator site in the main body of the page

Step 3 - styling and getting the code

You can then use the different tools available in the generator to alter the appearance of your table to best suit your needs. The Theme button is a useful tool to add pre-existing colour and format schemes to your table. Once you are happy with the your table you can then press the Generate button to generate the HTML code.

image of the table with some colour styling and the Generate button highlighted

 

The HTML code for your table is generated in the box below the it. You can highlight and copy the code using Ctrl+C / Cmd+C on your keyboard or just use the Copy to clipboard button.

image of the HTML code created and the copy to clipboard button

  

Putting your HTML table into your survey:

This is done back in Citizen Space anywhere you see the WYSIWYG toolbar.

If you have any text that you would like to enter before you insert your table, type it into the text box first and then select the Source button, as shown below:

WYSIWYG text box with Source button highlighted and indicative text in box

Paste in the HTML source code for your table directly after any text you have submitted:

Example of html table code input into the consultation builder

Click on Source again to see how your table looks and then preview your consultation to see how your table will appear to your respondents.

 

Where to use a table:

A nice way to use tables is in an introduction or fact bank to provide more information to your respondents on a particular topic or question within your consultation.  We have written an article on Fact Banks and how to use them which provides more detail. Our article on turning detailed documents into consultations gives lots of examples of how to make your data come alive.

EventWhenWhere
Writing For Children Workshop 21/11/2013 Town Hall
Book Festival 2013 01/12/2013 Central Library
Literacy Testing 03/12/2013 Central Library
Poetry Matters 21/12/2013 Arts House

(Fittingly, this table has been added in to this article using HTML rather than as an image)

More information on HTML:

If you want to know more about HTML and how to get started, then this link is incredibly helpful and can give you examples of how HTML tables are built:

http://www.w3schools.com/html/html_examples.asp