Cannot change color of my table in markdown card

Configuration Frontend
1

Hi, I have a few shelly pro in my house and have created a realtime monitoring of the power consumption of the house using markdown card like this :

image
image1920×833 121 KB

the code is the following

type: markdown
content: |

  <table width="100%" border="1">
    <tr>
      <th colspan="2"></th>
      <th align="center">T= {{ states('sensor.master_phase_a_active_power') | round(0) }} W</th>
      <th></th>
      <th align="center">T= {{ states('sensor.master_phase_b_active_power') | round(0) }} W</th>
      <th></th>
      <th align="center">T= {{ states('sensor.master_phase_c_active_power') | round(0) }} W</th>
      <th align="center">T= {{ states('sensor.master_total_active_power') | round(0) }} W</th>
    </tr>
    <tr>
      <th align="center">NAME</th>
      <th align="center">CIRCUIT</th>
      <th align="center">POWER A</th>
      <th align="center">CIRCUIT</th>
      <th align="center">POWER B</th>
      <th align="center">CIRCUIT</th>
      <th align="center">POWER C</th>
      <th align="center">TOTAL</th>
    </tr>

    <tr>
      <td align="center">T2</td>
      <td align="center">Clim 1st Floor</td>
      <td align="center">{{ states('sensor.tuya2_phase_a_active_power') | round(0) }} W</td>
      <td align="center">Oven</td>
      <td align="center">{{ states('sensor.tuya2_phase_b_active_power') | round(0) }} W</td>
      <td align="center">Plugs WC & Playroom</td>
      <td align="center">{{ states('sensor.tuya2_phase_c_active_power') | round(0) }} W</td>
      <td align="center">{{ states('sensor.tuya2_total_active_power') | round(0) }} W</td>
    </tr>

    <tr>
      <td align="center">T3</td>
      <td align="center">Clim RDC</td>
      <td align="center">{{ states('sensor.tuya3_phase_a_active_power') | round(0) }} W</td>
      <td align="center">Volet Roulant</td>
      <td align="center">{{ states('sensor.tuya3_phase_b_active_power') | round(0) }} W</td>
      <td align="center">Prise étage</td>
      <td align="center">{{ states('sensor.tuya3_phase_c_active_power') | round(0) }} W</td>
      <td align="center">{{ states('sensor.tuya3_total_active_power') | round(0) }} W</td>
    </tr>

    <tr>
      <td align="center">T4</td>
      <td align="center">Plug Guestroom & Corridor</td>
      <td align="center">{{ states('sensor.tuya4_phase_a_active_power') | round(0) }} W</td>
      <td align="center">Plug Garage</td>
      <td align="center">{{ states('sensor.tuya4_phase_b_active_power') | round(0) }} W</td>
      <td align="center">Water Heater</td>
      <td align="center">{{ states('sensor.tuya4_phase_c_active_power') | round(0) }} W</td>
      <td align="center">{{ states('sensor.tuya4_total_active_power') | round(0) }} W</td>
    </tr>

    <tr>
      <td align="center">T5</td>
      <td align="center">Water Heater</td>
      <td align="center">{{ states('sensor.tuya5_phase_a_active_power') | round(0) }} W</td>
      <td align="center">Light Bathroom, Guestroom, and Laundry</td>
      <td align="center">{{ states('sensor.tuya5_phase_b_active_power') | round(0) }} W</td>
      <td align="center">Plug Laundry and Outside Pump</td>
      <td align="center">{{ states('sensor.tuya5_phase_c_active_power') | round(0) }} W</td>
      <td align="center">{{ states('sensor.tuya5_total_active_power') | round(0) }} W</td>
    </tr>

    <tr>
      <td align="center">T6</td>
      <td align="center">Radiator 1st Floor</td>
      <td align="center">{{ states('sensor.tuya6_phase_a_active_power') | round(0) }} W</td>
      <td align="center">Radiator Ground Floor</td>
      <td align="center">{{ states('sensor.tuya6_phase_b_active_power') | round(0) }} W</td>
      <td align="center">Plug 1st Floor</td>
      <td align="center">{{ states('sensor.tuya6_phase_c_active_power') | round(0) }} W</td>
      <td align="center">{{ states('sensor.tuya6_total_active_power') | round(0) }} W</td>
    </tr>

    <tr>
      <td align="center">T7</td>
      <td align="center">Kitchen</td>
      <td align="center">{{ states('sensor.tuya7_phase_a_active_power') | round(0) }} W</td>
      <td align="center">Dishwashing Machine</td>
      <td align="center">{{ states('sensor.tuya7_phase_b_active_power') | round(0) }} W</td>
      <td align="center">Plug 1st Floor</td>
      <td align="center">{{ states('sensor.tuya7_phase_c_active_power') | round(0) }} W</td>
      <td align="center">{{ states('sensor.tuya7_total_active_power') | round(0) }} W</td>
    </tr>

    <tr>
      <td align="center">T8</td>
      <td align="center">Washing Machine</td>
      <td align="center">{{ states('sensor.tuya8_phase_a_active_power') | round(0) }} W</td>
      <td align="center">Plug Entrance and Interphone</td>
      <td align="center">{{ states('sensor.tuya8_phase_b_active_power') | round(0) }} W</td>
      <td align="center">Plug Kitchen</td>
      <td align="center">{{ states('sensor.tuya8_phase_c_active_power') | round(0) }} W</td>
      <td align="center">{{ states('sensor.tuya8_total_active_power') | round(0) }} W</td>
    </tr>


  </tr>
   <tr><td align=center>T9</td>
   <td align=center> Light Kitchen & Living & Outdoor </td> 
   <td align=center> {{ states('sensor.tuya9_phase_a_active_power') | round(0) }} W</td>
   <td align=center> Light Outside </td> 
   <td align=center> {{states('sensor.tuya9_phase_b_active_power') | round(0)}} W</td>
   <td align=center> Light First floor & VMC </td> 
   <td align=center> {{states('sensor.tuya9_phase_c_active_power') | round(0)}} W</td>
   <td align=center> {{states('sensor.tuya9_total_active_power') | round(0)}} W</td>
  </tr>

  </tr>
   <tr><td align=center>T10</td>
   <td align=center> Plug living & TV  </td> 
   <td align=center {% if states('sensor.tuya10_phase_a_active_power') | float > 20 %} style='background-color: red;' {% endif %}"> {{states('sensor.tuya10_phase_a_active_power') | round(0)}} W</td>
   <td align=center> Plug Dining room </td> 
   <td align=center> {{states('sensor.tuya10_phase_b_active_power') | round(0)}} W</td>
   <td align=center> Pool Pump </td> 
   <td align=center> {{states('sensor.tuya10_phase_c_active_power') | round(0)}} W</td>
   <td align=center> {{states('sensor.tuya10_total_active_power') | round(0)}} W</td>
  </tr>

  </tr>
   <tr><td align=center>T11</td>
   <td align=center> Garden  </td> 
   <td align=center> {{states('sensor.tuya11_phase_a_active_power') | round(0)}} W</td>
   <td align=center> Pool </td> 
   <td align=center> {{states('sensor.tuya11_phase_b_active_power') | round(0)}} W</td>
   <td align=center> U/VMC </td> 
   <td align=center> {{states('sensor.tuya11_phase_c_active_power') | round(0)}} W</td>
   <td align=center> {{states('sensor.tuya11_total_active_power') | round(0)}} W</td>
  </tr>

  </tr>
   <tr><td align=center>T12</td>
   <td align=center> Portail  </td> 
   <td align=center> {{states('sensor.tuya12_phase_a_active_power') | round(0)}} W</td>
   <td align=center> Pool House & Sauna </td> 
   <td align=center> {{states('sensor.tuya12_phase_b_active_power') | round(0)}} W</td>
   <td align=center> PAC Pool </td> 
   <td align=center> {{states('sensor.tuya12_phase_c_active_power') | round(0)}} W</td>
   <td align=center> {{states('sensor.tuya12_total_active_power') | round(0)}} W</td>
  </tr>

  </tr>
   <tr><td align=center>T13</td>
   <td align=center> Water heater NOT WORKING </td> 
   <td align=center> {{states('sensor.tuya13_phase_a_active_power') | round(0)}} W</td>
   <td align=center> Sauna </td> 
   <td align=center> {{states('sensor.tuya13_phase_b_active_power') | round(0)}} W</td>
   <td align=center> Plug sauna </td> 
   <td align=center> {{states('sensor.tuya13_phase_c_active_power') | round(0)}} W</td>
   <td align=center> {{states('sensor.tuya13_total_active_power') | round(0)}} W</td>
  </tr>

  </tr>
   <tr><td align=center>T14</td>
   <td align=center> Spa  </td> 
   <td align=center> {{states('sensor.tuya14_phase_a_active_power') | round(0)}} W</td>
   <td align=center> Spa </td> 
   <td align=center> {{states('sensor.tuya14_phase_b_active_power') | round(0)}} W</td>
   <td align=center> Spa </td> 
   <td align=center> {{states('sensor.tuya14_phase_c_active_power') | round(0)}} W</td>
   <td align=center> {{states('sensor.tuya14_total_active_energy') | round(0)}} W</td>
  </tr>


  </table>
   
grid_options:
  columns: 48
  rows: auto

I’d like to change the color of the background cell based on the value of this cell but even a simple “style='background-color: red;” does not change the color.

What did I miss?

Fred

2

Try this card instead:
https://github.com/PiotrMachowski/lovelace-html-card

I’m not certain, but I don’t think a Markdown card has the same ability to process extended HTML commands. This card works well and you won’t need to change much code.