Markdown card: tables colspan css

Is it possible in markdown card to:

  • render table with colspans? it seems mardown doesn’t support it. I suceed to use plain html code but it seems that colspans are ignored
  • style the table with css? I tried to use inlined css as well as style block, but both are not apear in final html. Are they filtered out by Lovelace renderer?

I don’t think the HA Markdown cards support tables at all. :frowning:

At least, their cheat sheet from the examples doesn’t say anything about tables, and I couldn’t make this simple table work:

content: >-
  Here is a table:

  |Col 1|Col 2|Col 3|
  |---|---|---|
  |One|Two|Three|

The code editor messes it up immediately.

It should of course look like:

Col 1 Col 2 Col 3
One Two Three

I wish they would switch to something like Github-flavoured Markdown, which supports tables.

EDIT: Dumb mistake, sorry. And they do support the Github-flavoured Markdown style.

content: >-

should have been without the -!

tables created with markdown works for me but I fill markdown card programaticaly from NodeRed. Maybe there is some yaml related glitch.

Do you mean the above “markdown-syntax” table works for you in a Markdown Card?

Looks like HTML tables work, though:

content: >-
  Here is a table in HTML:
  
  <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>One</td>
      <td colspan=2>Two+Three</td>
    </tr>
  </table>

Looks correct in my Markdown Card, even with the colspan.

Yeah, right. Tried with some generated content here (in a template var), and it seems ok. So maybe check your NodeRed output again.

I can see colspan in html code (in browser dev tools) but it’s not applied. Maybe because I’m using th and td. Maybe because specific render mode set by glibal css styles. Have to dig in.

thank yoy

OK, colspan works but column widths cannot be customized. In general all css styles are stripped out from html code. I cannot even add css class to the table to selectively style it with card-mod. It’s really frustrating

Finally I managed to achieve what I want by using old-school html attributes.

obrazek

1 Like

Could you share your code?
Bye
Sandro

Yep. Here is.
The flow will create shelly_status sensor with html code stored in its attribute named: info
Just create markdown card and pass mentioned attribute as data source (see below)

Merry Xmas

[{"id":"437d0212.218284","type":"tab","label":"Shellies status","disabled":false,"info":""},{"id":"43e58151.919f38","type":"mqtt in","z":"437d0212.218284","name":"","topic":"shellies/announce","qos":"0","datatype":"json","broker":"7d8a84d.aa3f57c","x":150,"y":360,"wires":[["f2e32e34.396498"]]},{"id":"71a2695d.44ee2","type":"ha-entity","z":"437d0212.218284","name":"Fill up shelly_status sensor","server":"6cdd0bc8.b8e434","version":1,"debugenabled":false,"outputs":1,"entityType":"sensor","config":[{"property":"name","value":"shelly_status"},{"property":"device_class","value":"input_text"},{"property":"icon","value":""},{"property":"unit_of_measurement","value":""}],"state":"ok","stateType":"str","attributes":[{"property":"info","value":"payload","valueType":"msg"}],"resend":true,"outputLocation":"","outputLocationType":"none","inputOverride":"allow","x":880,"y":540,"wires":[[]]},{"id":"7685265e.480758","type":"mqtt out","z":"437d0212.218284","name":"","topic":"shellies/command","qos":"","retain":"","broker":"7d8a84d.aa3f57c","x":790,"y":280,"wires":[]},{"id":"f2e32e34.396498","type":"join","z":"437d0212.218284","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"5","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"num","reduceFixup":"","x":370,"y":360,"wires":[["cfc77687.baae8"]]},{"id":"cd8b865b.5e8b9","type":"function","z":"437d0212.218284","name":"Update Data","func":"var newMsg = {};\nnewMsg.payload = true;\n\nvar arrdata = Array();\narrdata = flow.get('shellies_data');\nif (arrdata === undefined) arrdata = {};\n\nvar recent_versions = flow.get('recent_versions');\n\nvar shellykeys = Array();\nshellykeys['shelly1']   = 'SHSW-1';\nshellykeys['shelly25']  = 'SHSW-25';\nshellykeys['shellydw']  = 'SHDW-1';\nshellykeys['shellyht']  = 'SHHT-1';\nshellykeys['shellyplug']= 'SHPLG-S';\n\nvar shellykey;\n\nmsg.payload.forEach(item => \n{\n    if (item.hasOwnProperty('model')) item.shelly_key = item.model;\n    else \n    {\n        shellykey = item.id.split('-', 1)[0];\n        item.shelly_key     = (shellykey in shellykeys ? shellykeys[shellykey] : '');\n    }\n    \n    arrdata[item.id]    = item;\n});\n    \nflow.set('shellies_data', arrdata);    \n\nnewMsg.payload = arrdata;\n\nreturn newMsg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":550,"y":420,"wires":[["7c9ec05f.c9ba08"]]},{"id":"cfc77687.baae8","type":"sort","z":"437d0212.218284","name":"","order":"ascending","as_num":false,"target":"payload","targetType":"msg","msgKey":"id","msgKeyType":"jsonata","seqKey":"payload","seqKeyType":"msg","x":530,"y":360,"wires":[["cd8b865b.5e8b9"]]},{"id":"7b2bd4d8.90a874","type":"inject","z":"437d0212.218284","name":"System Start","repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":100,"wires":[["66cd744a.f2b154","e67508e4.87a038"]]},{"id":"66cd744a.f2b154","type":"change","z":"437d0212.218284","name":"Set defaults","rules":[{"t":"set","p":"recent_versions","pt":"flow","to":"{}","tot":"str"},{"t":"set","p":"shellies_data","pt":"flow","to":"{}","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":310,"y":80,"wires":[[]]},{"id":"b8be67f1.d14e7","type":"comment","z":"437d0212.218284","name":"Config","info":"","x":90,"y":40,"wires":[]},{"id":"a737c781.480ea8","type":"change","z":"437d0212.218284","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"announce","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":280,"wires":[["7685265e.480758"]]},{"id":"d88a029.ad3b5","type":"inject","z":"437d0212.218284","name":"","props":[{"p":"payload","v":"Manual Announce","vt":"str"},{"p":"topic","v":"","vt":"string"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Manual Announce","payloadType":"str","x":130,"y":280,"wires":[["a737c781.480ea8"]]},{"id":"e67508e4.87a038","type":"delay","z":"437d0212.218284","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":300,"y":120,"wires":[["a737c781.480ea8","e5a01afb.3292e8"]]},{"id":"e5a01afb.3292e8","type":"http request","z":"437d0212.218284","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://api.shelly.cloud/files/firmware","tls":"","persist":false,"proxy":"","authType":"","x":510,"y":220,"wires":[["d59129ac.1af58"]]},{"id":"d59129ac.1af58","type":"change","z":"437d0212.218284","name":"","rules":[{"t":"set","p":"recent_versions","pt":"flow","to":"payload.data","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":810,"y":220,"wires":[["7c9ec05f.c9ba08"]]},{"id":"fd09093b.6c1d9","type":"inject","z":"437d0212.218284","name":"Retrieve versions","repeat":"28800","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":130,"y":220,"wires":[["e5a01afb.3292e8"]]},{"id":"779f69a0.62842","type":"function","z":"437d0212.218284","name":"Render Page","func":"var newMsg = {};\nnewMsg.payload = '';\n\n\nvar format_version = function(a)\n{\n    \n    var paragraph;\n    const regex = /([0-9]+)-[0-9]+\\/(.*?)@/;\n    var found;\n    \n    found = a.match(regex);\n    if (found === null) return '';\n    return found[2] + ' (' + found[1] + ')';\n}\n\n\nObject.keys(msg.payload).sort().forEach(key =>\n{\n    if (newMsg.payload.length > 0) newMsg.payload += \"\\n\\n***\\n\";\n  \n    item = msg.payload[key];\n//    node.error(item.id + ' [' + (item.fw_ver.split('/'))[1] + '] [' + (item.fw_ver_recent.split('/'))[1] + ']');     \n    \n    \n    \n    txt = '<table width=\"100%\" style=\"width:100%\" class=\"shellies\"><thead><tr><td width=\"20%\"></td><td width=\"50%\"></td><td></td></tr><tr><td colspan=\"2\"><b>' + item.id + '</b></td><td align=\"right\">'; \n    if ((item.fw_ver.split('/'))[1] != (item.fw_ver_recent.split('/'))[1])\n    {\n    txt += '<font color=\"#AA0000\"><a href=\"http://' + item.ip + '/ota?update=1\">[UPDATE]</a></font>&nbsp;&nbsp;';\n    }\n    txt += '<a href=\"http://' + item.ip + '\">[GUI]</a>';\n    txt += '</td></tr></thead>';\n    txt += '<tbody>'\n    txt += '<tr><td>mac address</td><td colspan=\"2\">' + item.mac + '</td></tr>'; \n    txt += '<tr><td>ip address</td><td colspan=\"2\">' + item.ip + '</td></tr>'; \n    txt += '<tr><td>firmware ver</td><td colspan=\"2\">' + format_version(item.fw_ver) + '</td></tr>'; \n    txt += '<tr><td>recent ver </td><td colspan=\"2\">' + format_version(item.fw_ver_recent) + '</td></tr>'; \n    txt += '</tbody></table>';\n  \n  \n  newMsg.payload += txt;\n  \n});\n\nreturn newMsg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":830,"y":480,"wires":[["71a2695d.44ee2"]]},{"id":"7c9ec05f.c9ba08","type":"function","z":"437d0212.218284","name":"Update Versions","func":"var newMsg = {};\nnewMsg.payload = true;\n\nvar arrdata = Array();\narrdata = flow.get('shellies_data');\n\nvar recent_versions = flow.get('recent_versions');\n\nObject.keys(arrdata).forEach(key =>\n{\n    item = arrdata[key];\n\n    item.fw_ver_recent  = (item.shelly_key in recent_versions ? recent_versions[item.shelly_key].version : '');\n    arrdata[item.id]    = item;\n});\n    \nflow.set('shellies_data', arrdata);    \n\nnewMsg.payload = arrdata;\n\nreturn newMsg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":820,"y":420,"wires":[["779f69a0.62842"]]},{"id":"7d8a84d.aa3f57c","type":"mqtt-broker","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"6cdd0bc8.b8e434","type":"server","name":"Home Assistant"}]

card code:

content: '{{  state_attr(''sensor.shelly_status'', ''info'')  }}'
title: Shellies overview
type: markdown
2 Likes

Thank you so much.
I do a similar aproach with Nodered, your is better.
Bye
Sandro