1. Home
  2. Tutorials
  3. Pages
  4. Display a table in a website
 

Table

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

 

List of volunteers

Photo First Name Last Name Birthdate Money Earned Prensce confirmed
Clementine1 Sam Durand 12/05/1986 12.00€ done
Sophie1 Maddie Dufresne 12/12/1987 54.00€
Veronique Sara Dupont 05/07/1954 128.00€ done
Michel1 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.