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

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>

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>

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>

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>

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>

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>


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.
Updated about 1 year ago