美文网首页makedown技巧
Markdown表格中换行、合并单元格

Markdown表格中换行、合并单元格

作者: 0蛐蛐0 | 来源:发表于2019-07-19 10:48 被阅读0次

    1、表格中内容对齐、换行

    常规表格使用

    一般我们都会这样用表格如下:

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

    效果如下:

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

    设置对齐方式

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

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

    效果如下:

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

    表格内容换行

    Markdown本身不提供单元格换行,但是,Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格换行。

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

    效果如下:

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

    2、表格中单元格的合并

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

    这会用到HTML的标签:

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

    合并表格行

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

    效果图:

    合并行.png

    合并表格列

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

    效果图:

    合并列.png

    综合使用

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

    效果图:

    综合.png

    相关文章

      网友评论

        本文标题:Markdown表格中换行、合并单元格

        本文链接:https://www.haomeiwen.com/subject/wlfjlctx.html