Video Outline

The Silverfin platform allows us to access predefined HTML classes starting with usr- to add styling to certain HTML elements. You can’t use CSS in the editor because we only allow you to access certain parts of the HTML layer in Silverfin.

So, what can you do with these HTML classes?

• Set the column width
• Define the alignment (horizontal and vertical) of your text/data
• Setting borders for your table
• Setting indentation for your cell
• Repeating headers for different pages on an export

On our documentation page you can access an overview of all supported HTML classes.

Table widths

Table width vs. column width

• Table width allows you to define the width of the entire table, this is specified as a percentage of the total space available on the page
• Column width allows you to define the with of an individual column within the table, this is specified as a percentage of the width of the overall table.

There are 3 possible setups when defining the column widths on an HTML table:

1. Width is defined for all columns. This always needs to add up to 100%.
2. Width is defined for all columns except one. That column will dynamically take the remaining available width, sum of the defined column widths need to be less than 100% for the columns to fit inside the table.
3. Width is not defined for any column. The column width will change dynamically depending on content of the columns.

Any other scenarios are not supported and will not work properly.

Understanding width percentages

One common misunderstanding regarding widths in the header is that the totals always need to match the width specified on the table, however, they always need to add up to 100%.

This is incorrect :

In the code snippet below we are setting the table width to span 50% of the total width of the page. However, each header is set to 25% of our specified width which means we are missing 50%. This will result in an error being thrown as seen in the output below.

<table class="usr-width-50">
  <thead>
    <tr>
      <th class="usr-width-25">Header 1</th>
      <th class="usr-width-25">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">content 1</td>
      <td class="">content 2</td>
    </tr>
  </tbody>
</table>

This is correct:

In the code snippet below we are setting the table width to span 50% of the total width of the page. We are then setting our header column to span 50% of 50% (i.e. 25% of the total page width per heading).

<table class="usr-width-50">
  <thead>
    <tr>
      <th class="usr-width-50">Header 1</th>
      <th class="usr-width-50">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">content 1</td>
      <td class="">content 2</td>
    </tr>
  </tbody>
</table>

Styling overview

Let’s start adding some styling to our table:

• Let’s make sure the table is aligned over the entire width of the page. We can do that by adding the class usr-width-100 to the table element
• We can use usr-bordered to set borders for the whole table and add style to the header. Undo again
• Next we’re going to define the alignment and widths for our two header cells: add usr-width-45 and usr-align-center for our first header and usr-width-55 and usr-align-right for the second header. We can also add a class so that the second header is vertically aligned to the bottom usr-valign-bottom
• Let’s add a border to one of the headers: let’s use a double top line usr-double-line-top for the second header
• If we want to make the column headers bold, we can also use the < b > html tag. You can also use < em > and < u > tags for italic and underline.
• We can now do the same in the body and add styling to one of the cells there by adding a class to a table data element. Let’s add some indentation to the first and second cell: usr-indent-1. You can use 1 to 10 which are different levels of indentation.

<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-align-right usr-width-45"><b>Header 1</b></th>
      <th class="usr-align-center usr-double-line-top usr-width-55"><b>Header 2</b></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="usr-indent-1" >1</td>
      <td class="usr-indent-2" >2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

Add in liquid language & logic

Now let’s take a look at an example that combines everything we have learned so far but add in some liquid template language and logic.

{% assign range_profitloss = period.accounts | range:"100" %}

<table class="usr-width-100">
  <thead class="usr-repeated-header">
    <tr>
      <th class="usr-align-right usr-width-45">
      Right align with  <b>Bold</b> <em>Italic</em> <u>underline</u> 
      </th>
      <th class="usr-align-center usr-double-line-top usr-width-55">
      Centered double top
      </th>
    </tr>
  </thead>
  <tbody>
  {% for acc in range_profitloss %}
    {% if acc.name contains "Computer software"%}
      <tr>
        <td> {{ acc.number }}{{ acc.name }} </td>
        <td class="usr-align-right"> {{ acc.value }} </td>
      </tr>
    {% endif %}
  {% endfor %}
    <tr>
      <td class="usr-indent-1">
      {% input period.custom.table.width as:integer default:100 %}
      </td>
      <td>
      {::infotext} Info text {:/infotext}
      </td>
    </tr>
  </tbody>
</table>

Colspan

Colspan is an attribute that allows us to specify the number of columns that the cell fills in both < td > and < th > tags. It provides the same functionality as “merge cell” in a spreadsheet program like Excel.

You should apply the attribute in the cell that you want to “merge/span”, defining the number of columns you want it to take.

The syntax is as follows:

<th class="usr-line-bottom" colspan="2">cell content</th>

🚧

Bear in mind that the usr-width class cannot be used in rows with colspan. The width needs to be defined in any of the other < tr > .

This can be useful when we want, for example, to group a few columns under the same category like in the example below:

{% capture all_borders_class %}usr-line-bottom usr-line-top usr-line-left usr-line-right{% endcapture %}

<table class="usr-width-100">
  <thead>
    <tr>
      <th class= "{{ all_borders_class }} usr-align-center" colspan="2">**Income**</th>
      <th class= "{{ all_borders_class }} usr-align-center" colspan="2">**Expenses**</th>
    </tr>
    <tr>
      <th class="usr-width-25 {{ all_borders_class }}">**Current year**</th>
      <th class="usr-width-25 {{ all_borders_class }}">**Previous year**</th>
      <th class="usr-width-25 {{ all_borders_class }}">**Current year**</th>
      <th class="usr-width-25 {{ all_borders_class }}">**Previous year**</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="{{ all_borders_class }}">£ 2,000</td>
      <td class="{{ all_borders_class }}">£ 3,000</td>
      <td class="{{ all_borders_class }}">£ 4,000</td>
      <td class="{{ all_borders_class }}">£ 5,000</td>
    </tr>
  </tbody>
</table>

Empty rows

Colspan can also be useful when our table has empty rows and we don’t want to repeat the < td > tags many times.

If we don’t use colspan we would need to do this which is inefficient.

<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>

Colspan allows us to create one < td > and set the total number of columns in the table as the colspan value which is much more efficient.

<table class="usr-bordered">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
      <th>Header 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td colspan="6"></td>
    </tr>
  </tbody>
</table>

Conclusion

• HTML tables can be styled by using HTML Classes
• Column widths always need to add to 100% and not to the width for the entire table
• HTML tables can also include more complex logic such as:
  • if statements, for Loops, & fori loops, input fields, ability to add attachments
• Colspan can be used to “merge” cells