Markdown table inside a div element

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

what is your exact question? Are you looking for another method? — Ali Sheikhpour, Jun 16 '17 at 08:07
uh, maybe you should center the entire `myWrapper` div rather than just the content? — Timothy Groote, Jun 16 '17 at 08:08
using pure markdown, you can only center content of column using |:---:| in splitter row — Ali Sheikhpour, Jun 16 '17 at 08:16
Possible duplicate of [Is it possible to center tables in a markdown file?](https://stackoverflow.com/questions/24127507/is-it-possible-to-center-tables-in-a-markdown-file) — Waylan, Jun 16 '17 at 13:17
Also relevant: [How to horizontally center a `
` in another `
`?](https://stackoverflow.com/q/114543/866026). And for an explanation of why you should be using CSS, see the accepted answer to [Is it possible to have a table in the center in Github gist markdown?](https://stackoverflow.com/q/44172954/866026) (the rest of that answer focuses on GitHub not allowing CSS, but the answer begins by explaining why this is not something Markdown supports natively). — Waylan, Jun 16 '17 at 13:23

score 3 · Answer 1 · answered Apr 14 '21 at 12:20

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:

score 1 · Answer 2 · answered Jun 16 '17 at 08:16

1

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.

answered Jun 16 '17 at 08:16

Kas Elvirov

7,394
4
40
62

Changing from div to span will not wrap my table but create the span element inside a
with no text in it and after the
is the table placed – aNNgeL0 Jun 16 '17 at 08:23
@aNNgeL0, For an explanation of why that happens, see the end of [this answer](https://stackoverflow.com/a/44273097/866026). – Waylan Jun 16 '17 at 13:12

Markdown table inside a div element

2 Answers2