HTML tables

Due to the limitations of markdown tables (e.g. repeating headers, vertical alignment, padding issues, etc.), HTML tables have been introduced.

The move to HTML tables will also ensure that exported pdf’s are consistent with web versions.

HTML tables can be perfectly combined in a template together with markdown tables. Note that in time markdown tables will be deprecated.

Each specific HTML element and HTML class is enabled by our core developers. As such it is currently not possible to access all elements and classes within the HTML layer of Silverfin.


Supported HTML tags and attributes

The following HTML tags are currently supported.

Tag

Definition

Allowed Attributes

<table>

HTML table

<thead>

The <thead> tag is used to group header content in an HTML table.

<tbody>

The <tbody> tag is used to group the body content in an HTML table.

<tr>

Table row

<th>

Table header

colspan

<td>

Table data cell

colspan


HTML Table basic structure

<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>
Output

Supported HTML table classes

HTML classes are used to add styling to certain elements in our table.

These classes are named with the prefix usr-. It is not possible to create new custom classes.

Please find a list of supported classes below:

Classes

Description

Allowed elements

Syntax

HTML table width

A class to set the width of table as a whole and/or your columns individually.

<table>/<th>/<td>

usr-width-1 → usr-width-100

HTML table text alignment

Horizontal text alignment / Vertical text alignment

<th>/<td>

usr-align-right usr-align-left usr-align-center /
usr-valign-top usr-valign-center usr-valign-bottom

HTML table bordered

It sets all borders for the whole table and adds style to the header. Equivalent to using "#" in a markdown table

<table>

usr-bordered

HTML table borders

Set borders for the side of a cell or a table

<table>/<th>/<td>

usr-line-top usr-line-bottom usr-line-right usr-line-left usr-double-line-top usr-double-line-bottom usr-double-line-right usr-double-line-left

HTML table indentation

Set indention for the cell

<th>/<td>

usr-indent-1 → usr-indent-10

HTML table repeated header

<thead>
When the template is exported in pdf and the table takes more than one page, the whole <thead> section will be repeated on top of each page. This has no effect in the input view in Silverfin

<thead>

usr-repeated-header


HTML table width

  • The usr-width class is used to define the width of the table/column
  • Table width can be set within the range of 1% to 100% of the total page width
  • Column widths can be set between 1% and 100% of table width
  • Column widths must total 100% of table width
  • A single column width can be left blank, in which case the remaining % automatically be applied
<table class="usr-width-75">
  <thead>
    <tr>
      <th class="usr-width-25">Header 25%</th>
      <th>Header remainding %</th>
      <th class="usr-width-25">Header 25%</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="">content 25%</td>
      <td class="">content remainding%</td>
      <td class="">content 25%</td>
    </tr>
  </tbody>
</table>
Output

HTML table text alignment

The usr-align classes are used to format the table layout.

<table class="usr-width-50">
  <thead>
    <tr>
      <th class="usr-align-left">Table header text left</th>
      <th class="usr-align-right">Table header text right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="usr-align-right">Table data content right</td>
      <td class="usr-align-left">Table data content left</td>
    </tr>
    <tr>
      <td class="usr-align-left">Table data content left</td>
      <td class="usr-align-right">Table data content right</td>
    </tr>
  </tbody>
</table>
Output

HTML table bordered

The usr-bordered class automatically adds borders to the entire table.

<table class="usr-bordered usr-width-100">
  <thead>
    <tr>
      <th>Bordered table header</th>
      <th>Bordered table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bordered table content</td>
      <td>Bordered table content</td>
    </tr>
  </tbody>
</table>
Output

HTML table borders

To manually set the borders of an HTML table use the usr-line-left or usr-double-line classes

<table>
  <thead>
    <tr>
      <th class="usr-line-bottom usr-line-top usr-line-left usr-line-right">content</th>
      <th class="usr-double-line-bottom usr-double-line-top usr-line-left usr-line-right">content</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="usr-line-left usr-line-right">content</td>
      <td class="usr-line-bottom usr-line-left usr-line-right">content</td>
    </tr>
  </tbody>
</table>
Output

HTML table indentation

The usr-indent class is used to add indentation within our table

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="usr-indent-4">content indented 4</td>
      <td class="usr-indent-9">content indented 9</td>
    </tr>
  </tbody>
</table>
Output

HTML table repeated header

If you have a long table that will span multiple pages you can use the usr-repeated-header class to ensure that headers are repeated at the top of each page to help with readability.

<table>
  <thead class="usr-repeated-header">
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Page 1 content</td>
      <td>Page 1 content</td>
    </tr>
  </tbody>
</table>
Output page 1
Output page 2