mxcdh
1
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 <%=
?
mxcdh
3
Hello
Thanks! This Is table from this website:
This is source:
How I can prepare this table, to render in obsidian?
ZenMoto
4
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><main></td>
</tr>
<tr>
<td>navigation</td>
<td><nav></td>
</tr>
<tr>
<td>banner</td>
<td><header role=banner></td>
</tr>
<tr>
<td>contentinfo</td>
<td><footer role=contentinfo></td>
</tr>
<tr>
<td>search</td>
<td><form role=search></td>
</tr>
<tr>
<td>form</td>
<td><form></td>
</tr>
<tr>
<td>complementary</td>
<td><aside></td>
</tr>
<tr>
<td>region</td>
<td><section></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 
2 Likes