Markdown table inside a div element - html

Question

I am trying to center a table in markdown so i was thinking of putting it inside a div and then text-align the content to center.
<div class="myWrapper" markdown="1">
| Col1 | Col2 | Col3 |
| ------ | ------ | ------ |
| r0 | r0 | r0 |
| r1 | r1 | r1 |
| r2 | r2 | r2 |
| r3 | r3 | r3 |
| r4 | r4 | r4 |
</div>
But doing this will transform it into pure HTML
My question is: How can i use that markdown table inside a div ? And get properly rendered

Answer 1

This answer is aside of the question. I was solving the problem of defining different table styles inside one Markdown document. I'm using Python-Markdown.
The default table stile:
Item No | Name | Description | Price
--------|------|-------------|------
1 | Chair | Kitchen chair | 101.50
2 | Table | Kitchen table | 450.00
The "plated" table style:
<div class="tablePlated"></div>
|Item No | Name | Description | Price|
|--------|------|-------------|------|
|1 | Chair | Kitchen chair | 101.50|
|2 | Table | Kitchen table | 450.00|
And the "gridded" table style:
<div class="tableGridded"></div>
Item No | Name | Description | Price
--------|------|-------------|------
1 | Chair | Kitchen chair | 101.50
2 | Table | Kitchen table | 450.00
Here are the CSS rules:
table {
font-size: 16px;
}
td, th {
padding: 7px 14px;
}
div.tablePlated+table {
border-spacing: 1px;
border-collapse: separate;
}
div.tablePlated+table td, div.tablePlated+table th {
background-color: lightblue;
}
div.tableGridded+table {
border-spacing: 0;
border-collapse: collapse;
}
div.tableGridded+table td, div.tableGridded+table th {
border: solid 1px dodgerblue;
}
And here is the result:

Answer 2

Look at this
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.
but
Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.