CASE: Converting table in markdown to a table in HTML

Templates Cases
,
1

With the new functionality of HTML available, you might consider converting existing markdown tables to HTML. Not only do you have extra options available, like colspan, vertical alignment and repeating headers, but it might also be easier to understand and read for others. Let’s consider the simple table below.

Schermafbeelding 2022-02-04 om 14.14.47
Schermafbeelding 2022-02-04 om 14.14.471781×158 16.1 KB

A possible way to code this table in markdown can be:

{% stripnewlines %}
| Type shares
| Comment
| End value {{ period.minus_1y.year_end_date | date:'%d/%m/%Y' }}
| Purchases
| Sales
| End value {{ period.year_end_date | date:'%d/%m/%Y' }}
{% newline %}
|----10%----
|----30%----
|----15%----:
|----15%----:
|----15%----:
|----15%----:+
{% newline %}
{% fori share in custom.shares %}
  |{% input share.type as:select options:'A|B|C' %}
  |{% input share.explanation as:text %}
  |{% input share.begin_value as:currency %}
    {% assign total_begin_value = total_begin_value+share.begin_value %}
  |{% input share.purchases as:currency %}
    {% assign total_purchases = total_purchases+share.purchases %}
  |{% input share.sales as:currency %}
    {% assign total_sales = total_sales+share.sales %}
  |{{ share.begin_value+share.purchases-share.sales | currency }}
    {% assign total_end_value = total_end_value+share.begin_value+share.purchases-share.sales %}
  {% newline %}
{% endfori %}
|
|
|^**{{ total_begin_value | currency }}**^
|^**{{ total_purchases | currency }}**^
|^**{{ total_sales | currency }}**^
|^**{{ total_end_value | currency }}**^
{% endstripnewlines %}

After converting to HTML, the code can look like this:

<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-10 usr-line-bottom"><b>Type shares</b></th>
      <th class="usr-width-30 usr-line-bottom"><b>Comment</b></th>
      <th class="usr-width-15 usr-align-right usr-line-bottom"><b>End value {{ period.minus_1y.year_end_date | date:'%d/%m/%Y' }}</b></th>
      <th class="usr-width-15 usr-align-right usr-line-bottom"><b>Purchases</b></th>
      <th class="usr-width-15 usr-align-right usr-line-bottom"><b>Sales</b></th>
      <th class="usr-width-15 usr-align-right usr-line-bottom"><b>End value {{ period.year_end_date | date:'%d/%m/%Y' }}</b></th>
    </tr>
  </thead>
  <tbody>
    {% fori share in custom.shares %}
      <tr>  
        <td class="">{% input share.type as:select options:'A|B|C' %}</td>
        <td class="">{% input share.explanation as:text %}</td>
        <td class=" usr-align-right">{% input share.begin_value as:currency %}</td>
          {% assign total_begin_value = total_begin_value+share.begin_value %}
        <td class=" usr-align-right">{% input share.purchases as:currency %}</td>
          {% assign total_purchases = total_purchases+share.purchases %}
        <td class=" usr-align-right">{% input share.sales as:currency %}</td>
          {% assign total_sales = total_sales+share.sales %}
        <td class=" usr-align-right">{{ share.begin_value+share.purchases-share.sales | currency }}</td>
          {% assign total_end_value = total_end_value+share.begin_value+share.purchases-share.sales %}
      </tr>
    {% endfori %}
    <tr>
      <td class=""></td>
      <td class=""></td>
      <td class="usr-line-top usr-align-right"><b>{{ total_begin_value | currency }}</b></td>
      <td class="usr-line-top usr-align-right"><b>{{ total_purchases | currency }}</b></td>
      <td class="usr-line-top usr-align-right"><b>{{ total_sales | currency }}</b></td>
      <td class="usr-line-top usr-align-right"><b>{{ total_end_value | currency }}</b></td>
    </tr>
  </tbody>
</table>

As you can see, there are some changes but it is also easy to compare which line in the markdown code corresponds to a line in the HTML coding. These are the changes that were made:

  • stripnewlines are replaced by an opening and closing table tag
  • The table definition is merged with the first line in HTML, meaning that only the first line can contain the class usr-width-XX
  • The header in HTML is not automatically underlined or bold, therefore we need to add the class usr-line-bottom and then put our content in between the bold HTML tags . Note that you can still use markdown for this, which means title is the same as ** title **.
  • The right alignment of some columns as defined in the markdown table definition ----15%----:, is equivalent to a th/td class usr-align-right in an HTML table. This class needs to be repeated on every row. N.B. the standard alignment is left.
  • The ‘+’ sign to make sure the table is spread across the full width of the page is translated to the class usr-width-100 in the table tag.
  • Every pipe corresponds to a th tag (in the header) or a td tag (in the body). Keep it in mind though while in markdown you do not need to complete the pipe for empty columns, in HTML it’s mandatory to code all columns.
  • The toplining, indicated by ^^ in markdown, is replaced by the HTML class usr-line-top.

To have a full overview of all possible classes, tags and attributes, visit the developer site (Where to start?).

1 Like