How can I add tab spacing in a template?

How can I add tab spacing in the below 2 templates between the process names and memory utilization? I can only add a single space.

{{ states('sensor.process_0_exe') }} | VIRT:{{ states('sensor.process_0_res') }}M  RES:{{ states('sensor.process_0_virt') }}M
{{ states('sensor.process_1_exe') }} | VIRT:{{ states('sensor.process_1_res') }}M  RES:{{ states('sensor.process_1_virt') }}M

Screenshot:
image

Code: configuration.yaml

  - platform: template
    sensors:
      process_0:
        value_template: >
                {{ states('sensor.process_0_exe') }} | VIRT:{{ states('sensor.process_0_res') }}M  RES:{{ states('sensor.process_0_virt') }}M
        availability_template: >-
                {{ states("sensor.process_1_virt") not in ["unknown", "unavailable", "none"] }}
      process_1:
        value_template: >
                {{ states('sensor.process_1_exe') }} | VIRT:{{ states('sensor.process_1_res') }}M  RES:{{ states('sensor.process_1_virt') }}M
        availability_template: >-
                {{ states("sensor.process_1_virt") not in ["unknown", "unavailable", "none"] }}

Card code:

show_name: false
show_icon: false
show_state: true
type: glance
entities:
  - entity: sensor.process_0
    style: |
      div {
          text-align: left;
      }
  - entity: sensor.process_1
    style: |
      div {
          text-align: left;
      }
state_color: false
columns: 1
title: Top 2 processes

Would adding this help?

{{ '   ' }}

Not really. I’m looking specifically for tab spacing in order for all the items displayed line up correctly each time the sensor updates.

Its HTML, so you can’t really.
You can make a markdown card and use a table inside it.

1 Like

Try this

{{'\t'}}

Thanks for the tip! Your suggestion gave me full control of what I wanted to see… even with my limited HTML skills.
Screenshot 05-21-2023 at 04.48.59 PM

type: markdown
content: |-

  <div class="tg-wrap"><table width=100%">
  <thead>
    <tr>
      <td><b>EXE</b></td>
      <td><b>RES</b></td>
      <td><b>VIRT</b></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ states('sensor.process_0_exe') }}</td>
      <td>{{ states('sensor.process_0_res') }}M</td>
      <td>{{ states('sensor.process_0_virt') }}M</td>
    </tr>
    <tr>
      <td>{{ states('sensor.process_1_exe') }}</td>
      <td>{{ states('sensor.process_1_res') }}M</td>
      <td>{{ states('sensor.process_1_virt') }}M</td>
    </tr>
  </tbody>
  </table></div>
title: Top 2 Processes
1 Like

I would probably just finish it off with a few align=“right” or align=“center” in the <td> to values, like
<td align="right">