Display a table in a website

The table widget allows you to present data to users. To create a table you have several solutions: use the visual editor, the Calc application on Google Drive or insert the Table widget.

Learn how to create a table easily in a page with the table widget by adding rows, columns, and selecting the desired fields (dates, text, checkboxes, images, etc.).

Table

List of volunteers

First Name	Last Name	Birthdate	Money Earned
Sam	Durand	12/05/1986	12.00€
Maddie	Dufresne	12/12/1987	54.00€
Sara	Dupont	05/07/1954	128.00€
Mike	Dugong	02/04/1945	352.00€

The different fields of the table

You will be able to add various fields and web visitors can sort through the results.

Text: As the name suggests, it allows you to add free text content, such as a name, a first name, an address. You can also insert HTML code.
Date: We offer different formats of date in the form 12-Jan-1995, 12/01/1995, etc ...
Time: Display time in different ways (example: days / hours, hours / minutes, hours / minutes / seconds etc ...)
Numerical: you can choose the symbol that follows the value, convenient to express amounts in € or in $, quantities in liter or weight!
Checkbox: This field is used to display a "validated" or "confirmed" status. For example, you could have a column "adjusted settlement" and indicate by a Check Box that the payment of a member is validated.
Image: allows to display an image, such as an avatar for example
File: allows to display a file to be downloaded in a cell of the table (this file is hosted in your storage space).

Add a table in three clicks

If you know how to create a dynamic page, you can make your pages with rows and columns. Click add a block then choose Other widgets> Gadgets> Table

The base settings

The first step is to choose a title for your table. In this pop-up, you can define the general options of the table, such as enabling sorting on columns or displaying the row number.

Create Columns

Choose the name and what each column will contain (text, date, image). Easily rearrange and order your columns with drag and drop.

Add the content

As on a spreadsheet, complete the cells for each column. To add an image or a file, you must double click on it. All lines can be inverted.

Tricks

You can sort the data on the manager side and allow the user to sort the data on the site.

To do this, activate the "Enable sort on this column" option. The columns in our demo table at the top of this tutorial can be sorted. Try clicking on the title of a column: for example, you can reorder the rows of the table by sorting the column "first name" in alphabetical order

Insert links into your table cells

If you want to insert links in the cells of your table, it is possible but you have to do it in HTML. Copy and paste your link in HTML code. On your website, the link will appear clickable like any other link.