How to render html table in note?

Hello

How I can render in note this HTML table?

<table class="text-left table-fixed">
  <caption class="text-2xl">Landmarks</caption>
  <thead>
    <tr>
      <th style="width: 12em">Role name</th>
      <th>HTML element</th>
    </tr>
  </thead>
  <tbody class="text-white bg-purple-900 border border-purple-700">
    <%= table_rows([
      ["**main**", "`<main>`"],
      ["**navigation**", "`<nav>`"],
      ["**banner**", "`<header role=banner>`"],
      ["**contentinfo**", "`<footer role=contentinfo>`"],
      ["**search**", "`<form role=search>`"],
      ["**form**", "`<form>`"],
      ["**complementary**", "`<aside>`"],
      ["**region**", "`<section>`"],
    ]) %>
  </tbody>
</table>

You can just paste HTML into your note, and it will render in Live Preview and Reading View.

But it looks like you have some non-HTML in there that probably won’t render. What is the stuff starting with <%=?

Hello
Thanks! This Is table from this website:

This is source:

How I can prepare this table, to render in obsidian?

That stuff between <%= and %> is JS auto-rendering (EJS) - which Obsidian can’t process, as @CawlinTeffid pointed out.

Instead, you can render your table by converting all code in <tbody> to normal table rows (example below).

And since you want to render some html tags as plain-text, you have to encode them:

  • <main> becomes &lt;main&gt;

**

Here is how your table will look:

Landmarks
Role name HTML element
main <main>
navigation <nav>
banner <header role=banner>
contentinfo <footer role=contentinfo>
search <form role=search>
form <form>
complementary <aside>
region <section>

**

And this is the code:

<table class="text-left table-fixed">
  <caption class="text-2xl">Landmarks</caption>
  <thead>
    <tr>
      <th>Role name</th>
      <th>HTML element</th>
    </tr>
  </thead>
  <tbody class="text-white bg-purple-900 border border-purple-700">
    <tr>  
      <td>main</td>
      <td>&lt;main&gt;</td>
    </tr>
    <tr>  
      <td>navigation</td>
      <td>&lt;nav&gt;</td>
    </tr>
    <tr>  
      <td>banner</td>
      <td>&lt;header role=banner&gt;</td>
    </tr>
    <tr>  
      <td>contentinfo</td>
      <td>&lt;footer role=contentinfo&gt;</td>
    </tr>
    <tr>  
      <td>search</td>
      <td>&lt;form role=search&gt;</td>
    </tr>
    <tr>  
      <td>form</td>
      <td>&lt;form&gt;</td>
    </tr>
    <tr>  
      <td>complementary</td>
      <td>&lt;aside&gt;</td>
    </tr>
    <tr>  
      <td>region</td>
      <td>&lt;section&gt;</td>
    </tr>
  </tbody>
</table>

**

  • everything in <tbody> has been converted to table rows
  • plain-text <html> tags have been converted from <main> to &lt;main&gt;

^ you can paste that code in Obsidian and see :tropical_fish:

2 Likes