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 |
---|---|---|---|---|---|
![]() |
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.