Blog about concrete5 cms

Some new concrete5 users get confused when they cannot find a way to add table to a page at their concrete5 website. However in fact there are several ways to do that. I will describe 4 ways to add table on the page with concrete5 cms…

HTML block

You can use HTML block to create tables. This block allows user to input HTML code. For adding table, these tags are used:

<table> – table tag
<tr> – table row
<th> – table head
<td> – table cell

Here is a sample html code for table:

<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Here is its output:

Pros of this way

• HTML is a default concrete5 block, so it is free and always available out of the box

Cons of this way

• HTML knowledge (at least basic) is required
• not convenient to add and update tables, especially if there is much data there

Content block

By default the content block doesn’t have table buttons, but you can add it by enabling advanced mode for WYSIWYG editor:

1. Sign in to dashboard
2. Go to “Sitewide Settings”
3. Find the “Rich Text Editor” panel
4. Choose “Advanced”  toolbar set
5. Click “Save”

After doing this you will see some new buttons in the “Content” block, including the buttons to create tables. You can use it to add tables right in WYSIWYG editor area.

Pros of this way

• Available in concrete5 out of the box
• Built in WYSIWYG editor
• HTML knowledge is not required

Cons of this way

• Need to enable advanced mode (however it is just a one time thing to do)
• Not very convenient to maintain tables with many rows/columns
• It’s hard to customize the table look and feel (add css classes, add some wrappers, etc.)

CSV Displayer

We have contributed a free addon to concrete5 marketplace called CSV Displayer. It allows to display tables from CSV files.

To add a table, you should prepare CSV file (utf-8 encoded), then add “CSV Displayer” block, upload and choose the file via concrete5 file manager, select delimiter and that’s all. The block will read the csv file and will output the data rows from it.

See example here:

http://demo.smartwebprojects.net/csv-displayer/

Pros of this way

• Can be used to output really large tables with many rows and columns
• Developers can customize the layout by modifying either ‘view.php’ file or adding their own custom template for the block

Cons of this way

• The end user needs to know what is csv file and how to create it (I use OpenOffice scalc)
• The end user has to update CSV file to change something on the website

Tables addon

We had a project requiring more than 100 tables and we built a special addon – “Tables”. Can be found at concrete5 marketplace here:

http://www.concrete5.org/marketplace/addons/tables/

This addon creates a new section in concrete5 dashboard – “Tables”. The website admin can create tables there (define columns, enter data row by row or import data from csv files). In the frontend the website admin can simply add ‘Table’ block and choose a table he wants to add.

That is really a comfortable way to manage tables (especially if it is necessary to update data regularly)

Pros of this way to add tables

• The end user doesn’t have to know HTML to add or update tables
• Developers can customize the “Table” block template (view.php) or add their own ones to make the table look exactly in the way they want
• The addon can be used to output large tables with many columns/rows

Cons of this method

• It is not free. $35 for a license

In one of the next posts, we will describe all features of the “Tables” addons. Your feedback and feature requests are always welcome.