Creating Table in markdown card

Configuration Frontend
1

Hello,
I’m new to HA and first time using Markdown.
I would like to show the temperature and humidity data of eight localities in tabular form. Where heating is in use, the row is displayed in a different color. After a long struggle I succeeded, the code is not pretty, but it works. If I arrange it in a table, I cannot change the color of the individual rows. If there is a better and simpler solution, I would like to l earn from it. Thanks.

2024-08-10 145056

Termosztát                    Hőmérséklet       Páratartalom
___
{% if is_state('switch.r0_2', 'on') %}
<font color=red> 
{% else %} <font color=white>
{% endif %}
- Nappali &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_0')  }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_0') }} %

{% if is_state('switch.r1_2', 'on') %}
<font color=red> 
{% else %} <font color=white>
{% endif %}
- Háló &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_0') }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_0') }} %

{% if is_state('switch.r2_2', 'on') %}
<font color=red> 
{% else %} <font color=white>
{% endif %}
- Tetőtér &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_0') }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_0') }} %

{% if is_state('switch.r3_2', 'on') %}
<font color=red> 
{% else %} <font color=white>
{% endif %}
- Torony &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_0') }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_0') }} %

{% if is_state('switch.r4_2', 'on') %}
<font color=red> 
{% else %} <font color=white>
{% endif %}
- Vendégszoba &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_0') }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_0') }} %

{% if is_state('switch.r6_2', 'on') %}
<font color=red> 
{% else %} <font color=white>
{% endif %}
- Műhely &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_6') }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_6') }} %

{% if is_state('switch.r5_2', 'on') %}
<font color=red> 
{% else %} <font color=white>
{% endif %}
- Medencetér &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_0') }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_0') }} %

<font color=white>

- Garázs &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.homerseklet_garazs') }} °C &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ states('sensor.paratartalom_garazs') }} %

___
&nbsp;
2

Go to main card mod thread → 1st post → link at the bottom → markdown → styling tables
It will show you

  • how to properly create a table in markdown w/o those horrible “nbsp”
  • how to style elements
1 Like
3

Thanks for the advice, it’s a very, very useful tool, I’m sure I’ll be using it a lot. (Google hasn’t found it yet.)
I still don’t see how I can use it in this case, but I’m looking for a way.

4

HI, since you are new to HA and I myself also was using MD cards from the start mainly to have more data-points on one line… also have a look at this one

benct/lovelace-multiple-entity-row: Show multiple entity states and attributes on entity rows in Home Assistant’s Lovelace UI (github.com)

The MD will likely allow a lot more flexibiltiy but the readability of the card will reduce similarly (negative)

5

What you need to do is setting up a markdown table. To make it easier for yourself, you could use a markdown table generator. :slight_smile:

Like this one:
https://www.tablesgenerator.com/markdown_tables

If you have fnished the basic structure, you can then use card-mod to style the table. I’d first setup all the necessary entries/entities and such, and only in the end use some styling.

In theory a markdwon table isn’t hard, but it has its quirks. :slight_smile:

A basic table will look like this:

|Termosztát|H..|Páratartalom|
|---|---|---|
|{{ state_attr('sensor.nappali', 'friendly_name') }}|{{ states('sensor.nappali') }}|another sensor|
|Háló|temp|humidity|

If you put this code into your markdown card, you should see the table, that looks like this (this is thee xact sam code from above):

Termosztát H… Páratartalom
{{ state_attr(‘sensor.nappali’, ‘friendly_name’) }} {{ states(‘sensor.nappali’) }} another sensor
Háló temp humidity
6

This table was created for the first time, but I could not change the color of the individual rows because the table fell apart in the process. So we have this table. I don’t yet know how to do this with the card mod. If I can get help with this, I will gladly take it.

7

card-mod.js works on almost all my cards except the Markdown card. How is this possible? Where can the error be?

c
c803×374 30.3 KB

b
b831×894 110 KB

8

Sorry, I tried in a visual editor, I didn’t switch to a code editor!

9

Just use a HTML table in the markdown card.


type: markdown
content: >-
  <table width=100%>
  <tr><td align=left>termostat 1</td><td align=right width=10%>26.8</td><td align=right width=30>52.2</tr>
  <tr><td align=left>termostat 2</td><td align=right>19.8</td><td align=right>42.2</tr>
  </table>

The width should only be necessary to set in the first row and the rest will adhere to that.

10

Thanks for the help, I managed to understand and do it as I planned.

1 Like