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.
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.
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:
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.
Using Tables Generator to turn a table from Word into HTML.
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 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.
Once the table is copied, go back to the Table Generator and select File -> Paste table data.
A pop-up box opens which will allow you to paste in your table. Do this and press load:
Your table will then have been imported into the HTML generator.
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.
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.
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:
Paste in the HTML source code for your table directly after any text you have submitted:
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.
|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: