# CASE: have one table header different alligned from the sub-headers

**URL:** <https://community.silverfin.com/t/case-have-one-table-header-different-alligned-from-the-sub-headers/1091>\
**Category:** Cases\
**Tags:** tables, case, styling, stripnewlines\
**Created:** [August 7, 2018, 10:19am UTC](https://community.silverfin.com/t/case-have-one-table-header-different-alligned-from-the-sub-headers/1091 "2018-08-07T10:19:08Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sven](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/sven/32/1495_2.png) [@sven](https://community.silverfin.com/u/sven)\
**Post date:** [August 7, 2018, 10:19am UTC](https://community.silverfin.com/t/case-have-one-table-header-different-alligned-from-the-sub-headers/1091/1 "2018-08-07T10:19:08Z")

</div>

Here’s an example of what you can create within a template, where the main header is divided in 2 columns and centered, while the sub-headers and the columns beneath it, are differently alligned:

 ![01](https://canada1.discourse-cdn.com/flex030/uploads/getsilverfin/original/1X/f6b2b042585eb2f47c33111d6c7dc04018da26a3.png)

This is the code behind it:

```auto
{% assign regular_costs = #61 %}

{% stripnewlines %}
{% for acc in regular_costs %}
{% if forloop.first %}
| Account info
| Account values
{% newline %}
|:----60%----:
|:----40%----:+
{% newline %}
{% newline %}
| Acc. Nbr
| Acc. Name
| Mapped number
| Opening Value
|
| End Value
{% newline %}
|----10%----
|----30%----
|----20%----
|----15%----
|----10%----
|----15%----+
{% endif %}
{% newline %}
| {{ acc.number }}
| {{ acc.name }}
| {{ acc.original_number }}
| {{ acc.opening_value | currency }}
|
| {{ acc.value | currency }}
{% endfor %}
{% endstripnewlines %}

```

As you can see, is that there are 2 `newline` tags. This is needed to divide the two different tabled from each other; if there would be only one newline, Liquid will read the whole code as one table instead of 2 different tables.  
So be sure to use 2 newline tags for this!

---

<div class="post-metadata">

**Author:** ![Spencer.Posner](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/spencer.posner/32/1114_2.png) [@Spencer.Posner](https://community.silverfin.com/u/Spencer.Posner)\
**Post date:** [August 8, 2018, 4:32pm UTC](https://community.silverfin.com/t/case-have-one-table-header-different-alligned-from-the-sub-headers/1091/2 "2018-08-08T16:32:09Z")

</div>

Using the logic that the two newline tags are used to divide the two tables from each other, shouldn’t the following code work? I am getting a broken table underneath the first header.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/getsilverfin/original/1X/1c80e871d17be152ad9408dee1c1279e2f942ab5.png)

Note that I have removed the if statement and forloop as it doesn’t apply to this particular table I am trying to create. If the if statement is needed, is there a way to create the table within table without the forloop?

{% stripnewlines %}  
| JJJ  
| JJJ  
| JJJ  
| JJJ  
{% newline %}  
|-----26%-----  
|:----36%----:  
|------2%-----  
|:----36%----:+  
{% newline %}  
{% newline %}  
| a  
| a  
| a  
| a  
| a  
| a  
| a  
| a  
{% newline %}  
|-----26%-----  
|:----12%----:  
|:----12%----:  
|:----12%----:  
|------2%-----  
|:----12%----:  
|:----12%----:  
|:----12%----:+  
{% newline %}  
| x  
| x  
| x  
| x  
| x  
| x  
| x  
| x  
{% endstripnewlines %}

---

<div class="post-metadata">

**Author:** ![sven](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/sven/32/1495_2.png) [@sven](https://community.silverfin.com/u/sven)\
**Post date:** [August 9, 2018, 7:46am UTC](https://community.silverfin.com/t/case-have-one-table-header-different-alligned-from-the-sub-headers/1091/3 "2018-08-09T07:46:11Z")

</div>

Hey @Spencer.Posner,

Your posted code works fine if I use it:

 ![15](https://canada1.discourse-cdn.com/flex030/uploads/getsilverfin/original/1X/43b2f097fcdd54c4d0abc8840eab8507bdb240aa.png)

Is this still an issue at your part?

---

<div class="post-metadata">

**Author:** ![Spencer.Posner](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/spencer.posner/32/1114_2.png) [@Spencer.Posner](https://community.silverfin.com/u/Spencer.Posner)\
**Post date:** [August 9, 2018, 7:39pm UTC](https://community.silverfin.com/t/case-have-one-table-header-different-alligned-from-the-sub-headers/1091/4 "2018-08-09T19:39:18Z")

</div>

No it works now, thank you.

The issue was that I had indented the pipes for ease of reading my code, but once I removed all the indents, it worked well.

---

<div class="post-metadata">

**Author:** ![sven](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/sven/32/1495_2.png) [@sven](https://community.silverfin.com/u/sven)\
**Post date:** [August 9, 2018, 7:47pm UTC](https://community.silverfin.com/t/case-have-one-table-header-different-alligned-from-the-sub-headers/1091/5 "2018-08-09T19:47:53Z")

</div>

Thanks for the feedback @Spencer.Posner! 👌