How to render html table in note?

mxcdh · December 21, 2022, 11:00am

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>

CawlinTeffid · December 22, 2022, 9:57am

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 <%=?

mxcdh · December 28, 2022, 9:48am

Hello
Thanks! This Is table from this website:

This is source:

github.com

ComponentsGuide/components_guide/blob/master/lib/components_guide_web/templates/react_typescript/testing.html.md

# React Testing Guide

## Use Roles First

Most semantic HTML elements have an implicit role. This role is used by accessibility tools such as screen readers. But as we’ll explain, you can also use it to write easy-to-understand tests.

Because the ARIA specs are more recent than HTML 1.0, it clarifies HTML and provides improved names for a lot of the traditional HTML elements. The names used are more what everyday users would use too, such as `link` rather than `a`.

### Roles are better than Tag Names

Roles are better than tag names, as they generalize towards the user behaviour not the nitty-gritty of HTML specifics.

As an example, `<input type="text">` and `<textarea></textarea>` both have the role **textbox**. A user probably does not care for the difference — it’s just a text field that they can type into.

These roles allow us to think in the language that our users would use:

- The **save** _button_
- The **email** _text field_
- The **primary** _navigation_
- The **notifications** icon _image_

This file has been truncated. show original

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

ZenMoto · December 28, 2022, 1:49pm

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 <main>

**

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 <main>

^ you can paste that code in Obsidian and see