一个包含Markdown表格的div元素

Question

我试图在Markdown中居中一个表格，所以我想把它放在一个div里面，然后将内容的text-align属性设置为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>

但这样做会将它转换为纯HTML格式。我的问题是：如何在一个div中使用markdown表格？并正确地呈现出来。

- aNNgeL0

---

你的确切问题是什么？你是否在寻找另一种方法？ - Ali Sheikhpour

嗯，也许你应该将整个 myWrapper div 居中，而不仅仅是内容？ - Timothy Groote

使用纯Markdown，您只能在分隔行中使用|:---:|来居中列的内容。 - Ali Sheikhpour

我不打算使用纯Markdown。 - aNNgeL0

可能是在Markdown文件中居中表格是否可能？的重复问题。 - Waylan

同样相关的是：如何在另一个<div>中水平居中一个<div>？。如果您想了解为什么应该使用CSS，请参阅是否可以在Github Gist Markdown中将表格居中？的被接受答案（该答案的其余部分关注于GitHub不允许使用CSS，但答案开始解释为什么这不是Markdown本身支持的内容）。 - Waylan

Answer 1

这个回答与问题无关。我正在解决在一个Markdown文档中定义不同表格样式的问题。我正在使用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

以下是CSS规则：

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;
}

这是结果:

- Nick Legend

Answer 2

请看this。

请注意，在块级 HTML 标签中不会处理 Markdown 格式语法。例如，您不能在 HTML 块内使用 Markdown 风格的 强调。

但是

与块级 HTML 标签不同，Markdown 语法在跨度级别的标签内进行处理。

- Kas Elvirov

---

将 div 改为 span 不会包裹我的表格，而是在一个没有文本的 <p> 元素内创建 span 元素，并在 </p> 后放置表格。 - aNNgeL0

@aNNgeL0，关于为什么会发生这种情况的解释，请参见此答案的结尾部分。 - Waylan