HTML not working to format Markdown card?

I’m looking for help with creating a formatted Markdown card. I have tried searching the form (several similar questions since 2022 that are never answered by anyone) and four different AIs… I spent an hour trying them, nothing worked.

I simply want to set the column size so that no matter what the text is, the columns are always wide enough. they dont look good right now…

here’s the YAML, appreciate if someone has the knowledge to share please do. I’d like to learn by a real world example - thank you.

type: markdown
content: >-
  {% set input_minutes = 1440 %}

  {% set hours = (input_minutes // 60) %} {% set minutes = input_minutes % 60 %}

  {% set display_time = '' %} {% if hours > 0 %}
    {% set display_time = display_time ~ hours | int ~ ' hr' ~ ('s' if hours > 1 else '') %}
  {% endif %} {% if minutes > 0 %}
    {% set display_time = display_time ~ ' ' ~ minutes | int ~ ' min' %}
  {% elif hours == 0 %}
    {% set display_time = '0 min' %}
  {% endif %}

  {% set ns = namespace(sensor_name_time=[]) %}

  {% for entity in states.binary_sensor %}
    {% if 'binary_sensor.alarm_' in entity.entity_id %}
      {% if ('door' in entity.name | lower or 
             (entity.attributes.device_class is defined and 
              entity.attributes.device_class == 'door')) %}

        {% set name_without_door = entity.name
           | replace(" Door", "")
           | replace(" Sensor", "")
           | replace("Door ", "")
           | replace("Sensor ", "") %}
        
        {% set time_diff = (now() - entity.last_changed).total_seconds() %}
        {% set hours = (time_diff // 3600) | int %}
        {% set minutes = ((time_diff % 3600) // 60) | int %}
        
        {% set time_display = '' %}
        {% if hours > 0 %}
          {% set time_display = time_display ~ hours ~ ' hr' ~ ('s' if hours > 1 else '') %}
        {% endif %}
        {% if minutes > 0 %}
          {% set time_display = time_display ~ ' ' ~ minutes ~ ' min' %}
        {% elif hours == 0 %}
          {% set time_display = '0 min' %}
        {% endif %}
        
        {% set ns.sensor_name_time = ns.sensor_name_time + [{
            "name": name_without_door,
            "time": time_display,
            "state": entity.state,
            "last_changed": entity.last_changed
        }] %}
      {% endif %}
    {% endif %}
  {% endfor %}

  {% set myList = ns.sensor_name_time | sort(attribute='last_changed',
  reverse=true) %}

  {% if myList | count > 0 %}
    ## Door Activity
    
    |  | Last Change |  |
    |:-----------|------------------:|:----------:|
    {%- for each in myList %} 
    | {% if each.state == 'on' %}<font color="yellow">{{ each.name }}</font>{% else %}{{ each.name }}{% endif %} | {% if each.state == 'on' %}<font color="yellow">{{ each.time }}</font>{% else %}{{ each.time }}{% endif %} | {% if each.state == 'on' %}<ha-icon icon="mdi:door-open" style="color: blue;"></ha-icon>{% endif %} |
    {%- endfor %}
  {% else %}
    ## <ha-icon icon="mdi:door-open"></ha-icon> Door Activity
    
    No activity in the last {{ display_time }}
  {% endif %}

Put it in a table instead and use the width of the cells to control the fields

Thank you for the help! It got me to the answer in a way you may not expect…

Funny story (frustrating) … all four AI systems failed to get an HTML table to work in the YAML after an hour of trying. I’ve not done HTML coding in like 10+ years so assumed it would work as HTML is pretty easy. This morning after your message I search and found…

… then noticed that your HTML was different than the code all the AIs used…

        <tr>
          <th style="text-align:left; width:25ch">Name</th>
          <th style="text-align:center">Last Change</th>
          <th style="text-align:center"></th>
        </tr>

using STYLE did not work, at all, with Markdown

as much as I love HA, its super frustrating how everything in HA is ‘different’. In this case, STYLE has been used for decades but yet HA cant use it… arg. Why not just have a normal / universal HTML card separate from a Markdown (which can only do basic stuff, per its design intended for). Clearly HTML is more well known, more flexible, and can be done without expertise since ther e are 1000 free online HTML generators and AI can do it flawlessly.

… sorry, I’ve spend 2 hours on this now, if normal HTML worked it would have been 3 minutes.

If the HTML in the card is not controlled, then it could render the entire dashboard inoperative and some HTML tags and CSS style settings would have same effect.

I get that. Wrapping the HTML inside Markdown makes things more complicated, especially for noobies since it seems that Markdown doesnt support all common HTML methods.

thanks for the help, its working as I’d like now…

The HA devs have just taken the marked.js and implemented that in a card, so they do not really control the markdown features that much.