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.

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 / Justify text alignment	`<th>/<td>`	`usr-align-right` `usr-align-left` `usr-align-center` `usr-align-justify` / `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 indentation 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 hide header on same page	`<thead>` Makes sure the header is skipped when a new table starts on the same page as the previous table but is added again (and repeated) when a new page starts	`<thead>`	`usr-hide-samepage-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>
    <tr>
      <td class="usr-align-justify">Table data content - the text in this column is justified</td>
      <td class="usr-align-center">Table data content - the text in this column is is centered</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

HTML hide header on same page

The class usr-hide-samepage-header allows us to split tables, while ensuring the header is skipped when the new table starts on the same page as the previous table, but is added again (and repeated) when a new page starts.

<table>
  <thead class="usr-repeated-header usr-hide-samepage-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>

A case on how to use this new class, can be found here.