Video outline

In Silverfin, 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 are an essential part of development and are used everywhere to display data in a structured and organized manner.

Things to consider

Before you start building the actual table, you need to think about what 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 cause delays in your development especially when dealing with larger or more complex tables.

Table elements

To structure the format of your template we will be using HTML Tables in the Silverfin editor.

The structure of an HTML table is made up of several elements, including the table element, row element, cell element, and header element.

Let’s take a closer look at the different elements you need to create an HTML table.

Creating a table

We must first create the table that will contain the data by using the table element. The table element is the main container for the entire table and acts as the starting point. You will start with the opening and closing tag for the table.

<table> </table>

Within the silverfin code editor, we have some useful shortcuts for you to use.

• writing < table > automatically adds the closing tag
• writing <table and pressing tab automatically gives you a basic html table structure. Here you already see an overview of the necessary elements to build a simple HTML table.

<table class="">
  <thead>
    <tr>
      <th class="">content</th>
      <th class="">content</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">content</td>
      <td class="">content</td>
    </tr>
  </tbody>
</table>

Table Rows

The first step in entering data into the table is to add rows. The row element is used to define each row of the table. Within each row you can have multiple cell elements.

Create a row using the table row element: < tr >. Start adding a row to your table with the opening and closing tag:

<tr> </tr>

Again we have some shortcuts in the editor built in:

• writing < tr > automatically adds the closing tag
• writing <tr and pressing tab automatically gives you a row and some basic elements that would go inside a row

Table Data

Just the table rows are not enough to enter data into the table. We also have to define each cell in the row. In HTML you can add data by using the table data element. This tag again has an opening and closing tag:

<td> </td>

Table Headers

To define headers for the table, you can label each column using the table heading element. Again with a closing and opening tag:

<th></th>

The table heading element is used just like a table data element, except with a relevant title. Just like table data, a table heading must be placed within a table row.

When using table headings you will have to section off the table’s column headings and the table’s body by using the < thead > and the < tbody > element. A thead without a tbody will give liquid errors.

Conclusion

• Tables are used in Silverfin to display data in a structured organized way
• Before coding a table, think about its layout / what it should look like
• HTML Tables are created with the following tags and elements
  Table: < table >< /table >
  Table rows: < tr >< /tr >
  Table data: < td >< /td >
  Table headers: < th >< /th >
  Table head: < thead >< /thead >
  Table body / content: < body >< /tbody >