Markdown中表格使用技巧

luckpunk

发布于 2023-09-09 14:27:18

45500

代码可运行

文章被收录于专栏：人人都是架构师人人都是架构师

运行总次数：0

代码可运行

表格中内容对齐、换行

在Markdown中我们都会这样使用表格：

| 姓名 | 年龄 |  爱好 |
| -- | -- | -- |
| 小明 | 9 | 篮球 |
| 小刚 | 10 | 篮球、足球 |

效果如下:

姓名	年龄	爱好
小明	9	篮球
小刚	10	篮球、足球

设置对齐方式

|:--:|居中对齐、|:--|左对齐、|--:|右对齐。

| 姓名 | 年龄 |  爱好 |
| :--: | :-- | --: |
| 小明 | 9 | 篮球 |
| 小刚 | 10 | 篮球、足球 |

效果如下:

姓名	年龄	爱好
小明	9	篮球
小刚	10	篮球、足球

表格内容换行

Markdown本身不提供单元格换行，但是，Markdown是兼容HTML的，因此，我们可以使用<br>来实现单元格换行。

| 姓名 | 年龄 |  爱好 |
| :-- | :-- | :-- |
| 小明 | 9 | 篮球 |
| 小刚 | 10 | 篮球 <br> 足球 |

效果如下:

姓名	年龄	爱好
小明	9	篮球
小刚	10	篮球足球

表格中单元格的合并

合并单元格还是要与HTML网页结合起来，来达到效果。

这会用到HTML的标签：

colspan：规定单元格可纵深的列数
rowspan：规定单元格可横跨的行数

可以直接在markdown中写html标签，不过渲染出来的样式，不同的markdown编辑器会有不同。

合并表格行

<table>
    <tr>
        <td>张</td>
        <td>王</td>
    <tr>
    <tr>
        <td colspan="2">姓氏</td>
    <tr>
</table>

效果图：

合并表格列

<table>
    <tr>
        <td>类别</td>
        <td>名称</td>
    </tr>
    <tr>
        <td rowspan="2">颜色</td>
        <td>红色</td>
    </tr>
    <tr>
        <td>黄色</td>
    </tr>
    <tr>
        <td rowspan="2">姓氏</td>
        <td>张</td>
    </tr>
    <tr>
        <td>王</td>
    </tr>
</table>

效果图:

综合使用

<table>
    <tr>
        <td>类别</td>
        <td>名称</td>
    </tr>
    <tr>
        <td rowspan="2">颜色</td>
        <td>红色</td>
    </tr>
    <tr>
        <td>黄色</td>
    </tr>
    <tr>
        <td colspan="2">姓氏</td>
    </tr>
    <tr>
        <td>王</td>
        <td>张</td>
    </tr>
</table>

效果图:

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-07-01，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染