Table basics

Video outline

In Liquid, you have the possibility to present data and numbers in a table-form. You might not always think you would need a table in your template as the content you are thinking of doesn’t really require an actual table. However, tables can also be very useful in order to present certain content in a structured and organized manner. A good example of such a use is a checklist with equal spacing between the line items.

Syntax

Here you see an overview of the minimum code required to build a simple table.

{% stripnewlines %}
| Header 1
| Header 2
{% newline %}
|--------
|--------
{% newline %}
| content
| content
{% newline %}
| content
| content
{% endstripnewlines %}

This code can be automatically generated by typing “table” in the liquid editor followed by pressing the TAB button.

One of the first things to notice, is that all table code is placed between stripnewlines tags. These tags will remove all line breaks from your table. Remember that these tags have an opening tag (i.e. {% stripnewlines %} ) and a closing tag (i.e. {% endstripnewlines %}). All table code should be written between these tags as seen in the example above. Remember to add a {% newline %} tag every time a line break is needed within {% stripnewlines %} tags.

Before starting to build the actual table, we need to think about how it should look like. The following questions come to mind:

  • How many table columns do I need?
  • Should all columns have the same width or should some have a smaller/bigger width?
  • What text alignment do I need for each column (left, right or center)?
  • Should the table cover the entire width of your screen or is this not required?

Not having answered these questions clearly beforehand, can lead to big puzzles in case you are dealing with larger or more complex tables.

In order to create separate columns, we use the pipe sign. For example, if you have 3 columns in your table, we will use three pipes.

{% stripnewlines %}
| Column 1
| Column 2
| Column 3
{% endstripnewlines %}

Remember to use the same number of pipes across every part of your table in order to avoid breaking it. Place every column on a new line as shown in the picture. This will improve the readability of your code.

Each table in liquid consist of 3 parts of coding, each separated by a “newline” tag:

  • Table titles (optional)
  • Lay-out
  • Content

Titles

Titles are the first part of your table. These will be automatically be printed in bold (with a bold underline) and a slightly bigger font. To create a title for each column, you enter a pipe for each column and type the appropriate title next to it.

After completing the required column title, enter a “newline” tag, after which you can start on the lay-out (see below).

| Title 1 
| Title 2 
| Title 3
{% newline %}

General lay-out code

To start with the lay-out, again type pipe for each column. Next to each sign, you enter 8 dashes (less will work, but for readability 8 dash is advised). As we are building a table with 3 columns, the following code is used if you do not want to set a specific column width or keep the standard text alignment (which is alignment to the left). We close the lay-out section with a newline tag again. In our example (building onto our already created titles):

| Title 1 
| Title 2 
| Title 3
{% newline %}
|-------- 
|-------- 
|--------
{% newline %}

Set column width

For each column, you can specify what percentage of the total table width that specific column should hold. This can be accomplished by adding the appropriate percentage in the middle of the dashes for each column (a number from 1 to 100, following by the “%” sign).

For example, if you would like the second and third column to have a width of respectively 10% and 20% of the total available table width, you can use the following code (leave the first column as is, it will take the remaining space of the table):

| Title 1 
| Title 2 
| Title 3
{% newline %}
|-------- 
|----10----% 
|----20----%
{% newline %}

Text alignment

If you would like to differ from the standard (left) text alignment, you can add a “:” to each column where needed:

  • If you add this to the right of the dashes, the text will be aligned to the right. (e.i. |--------: )
  • If you add a “:” on both sides of the dashes, the text will be centered. |:--------:
  • You don’t need to add anything to have text alignment to the left, but you can add a “:” to the left of the dashes to make it clearer. |:--------

Expand table to fit screen

In principle, the table will take up the space it needs. However, if you like the table to take up the entire width of the screen, you can add a + at the end of the last column. If you have the text aligned to the right or centered, just add the + after the “:” (e.g.: |:————:+ )

Change table style

It is possible to change how the table looks by adding a “#” at the end of the last column. (e.g.: |:————:# )

After completing the titles and lay-out sections, all there is to do is to create the content for each row.

As usual, enter a “|” sign for every column to make sure your table doesn’t break. In our example of 3 columns per row, you will need to use 3 “|” signs. After finishing your first row, use the “newline” tag to start entering the second row. You can enter as many lines as you want as long as you put a “newline” tag between them.

| Title 1 
| Title 2 
| Title 3
{% newline %}
|-------- 
|----10----% 
|----20----%
{% newline %} 
| Content 
| Content 
| Content
 {% newline %} 
| Content
| Content
| Content

📘

TIP

If your table seems to be broken (i.e. you don’t have the same amount of columns on every row), the “newline” tag should be the problem in 90% of the cases. Either you forgot the enter a newline between rows in which case you will just keep adding columns to the same row without going to the next line. Another possibility is that you have used multiple newline tags right after each other. This will reset the table lay-out you completed earlier and break your table.