Just like you can use colspan in HTML tables (as explained here), it is now also possible to use rowspan.
Imagine below table (don’t mind the practicality of this example, it’s just to highlight the ability of rowspan
):
As you can see, it’s a simple table with 3 rows, in which each row has 3 cells. But the main title Assets is on the very first row, and could be placed better if it was centered right in the middle of those 3 rows. In other words, I’d like that cell to span 3 rows (instead of just 1), so it looks like this
This is now possible to do so.
How does it work?
You’ll need to add rowspan in the cell of the very first row that is part of the rowspan (just like colspan really), with the amount of rows you want to merge.
See below code snippet, to create that specific table:
{% comment %}TRANSLATIONS{% endcomment %}
{% t= "t_assets_title" default:"Assets" %}
{% t= "t_ifa_title" default:"Intangible assets" %}
{% t= "t_ifa" default:"Intangible assets lack physical substance but provide long-term value through legal rights or intellectual advantage. They are often the most valuable assets for tech and pharmaceutical companies." %}
{% t= "t_tfa_title" default:"Tangible assets" %}
{% t= "t_tfa" default:"Tangible assets are physical resources that you can see and touch. They are the 'bricks and mortar' of a business and usually form the backbone of industries like manufacturing or real estate." %}
{% t= "t_ffa_title" default:"Financial assets" %}
{% t= "t_ffa" default:"Financial assets are a specific subset of intangible assets. They don't have physical form, but their value is derived from a contractual claim or ownership right." %}
{% comment %}TABLE VARS{% endcomment %}
{% capture cell_explanation %}usr-valign-top usr-align-justify usr-line-right usr-line-left usr-line-bottom{% endcapture %}
{% capture cell_sub_title %}usr-align-left usr-valign-center usr-line-left usr-line-bottom{% endcapture %}
{% comment %}TABLE{% endcomment %}
<table class="usr-width-100">
<tbody>
{% comment %}ROW I - intangible assets{% endcomment %}
<tr>
<td class="usr-line-left usr-line-top usr-valign-center" rowspan="3"><b>{::font size='l'}{% t "t_assets_title" %}{:/font}</b></td>
<td class="{{ cell_sub_title }} usr-line-top">{% t "t_ifa_title" %}</td>
<td class="{{ cell_explanation }} usr-line-top">{% t "t_ifa" %}</td>
</tr>
{% comment %}ROW II - tangible assets{% endcomment %}
<tr>
<td class="{{ cell_sub_title }}">{% t "t_tfa_title" %}</td>
<td class="{{ cell_explanation }}">{% t "t_tfa" %}</td>
</tr>
{% comment %}ROW III - financial assets{% endcomment %}
<tr>
<td class="{{ cell_sub_title }}">{% t "t_ffa_title" %}</td>
<td class="{{ cell_explanation }}">{% t "t_ffa" %}</td>
</tr>
{% comment %}DEFINITION TABLE{% endcomment %}
<tr>
<td class="usr-width-10 usr-line-top"></td>
<td class="usr-width-15 usr-line-top"></td>
<td class="usr-width-75 usr-line-top"></td>
</tr>
</tbody>
</table>
Notice, that on the very first row, we add rowspan=”3”, which means that from that row onwards, we will span that cell for those rows (so the current row, and the next 2).
But, you also need to tweak the next 2 rows, and remove that cell that is being merged with that rowspan (if not, the table will error). So those 2 rows do not have 3 cells coded, but the remaining 2 (the ones that are not part of a rowspan).
Think of it like this:
When you use rowspan=“N” on a cell in row $R$, you must omit $N-1$ cells from the subsequent rows (specifically, the cells that would normally appear in the same column in rows $R+1$ through $R+N-1$). This is because the initial cell is already taking up their space.

