Markdown表格之合并单元格效果

转载请注明来源-作者@loongshawn:http://blog.csdn.net/loongshawn/article/details/72829090,建议读者阅读原文,确保获得完整的信息

1.实例分析

  日常工作编辑文档绘制表格时,不仅仅需要规整的n*m行列表格,有时候也需要对表格进行单元格合并,比如下图:

这里写图片描述

  但是Markdown本身不提供单元格合并语法,但是不要忘了,Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并。

主要用到了HTML的一个标签:

  • rowspan:规定单元格可横跨的行数。横跨几行属性值就写几,如上图中横跨7行,则rowspan=”7”
  • colspan:规定单元格可纵深的列数。

  HTML代码如下:

<table>
<tr>
    <td rowspan="7"> 文件状态:<br/>
        [√] 草稿<br/>
        [√] 正在修改<br/>
        [√] 正式发布 </td>
    <td>文件标识:</td>
    <td> </td>
</tr>
<tr>
    <td>当前版本:</td>
    <td>2.7</td>
</tr>
<tr>
    <td>作    者:</td>
    <td></td>
</tr>
<tr>
    <td>创建日期:</td>
    <td></td>
</tr>
<tr>
    <td>最后更新:</td>
    <td></td>
</tr>
<tr>
    <td>密    级:</td>
    <td></td>
</tr>
<tr>
    <td>版权说明:</td>
    <td></td>
</tr>
</table>

  显示效果如下图:

这里写图片描述

2.其他举例

2.1合并行

  HTML代码:

<table>
    <tr>
        <td>列一</td> 
        <td>列一</td> 
   </tr>
    <tr>
        <td colspan="2">合并行</td>    
    </tr>
    <tr>
        <td colspan="2">合并行</td>    
    </tr>
</table>

  显示效果:

列一列一
合并行
合并行

2.2合并列

  HTML代码:

<table>
    <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
    <tr>
        <td rowspan="2">合并列</td>    
        <td >行二列二</td>  
    </tr>
    <tr>
        <td >行三列二</td>  
    </tr>
</table>

  显示效果:

列一列二
合并列行二列二
行三列二

2.3合并行列

  HTML代码:

<table>
    <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
   <tr>
        <td colspan="2">合并行</td>    
   </tr>
   <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
    <tr>
        <td rowspan="2">合并列</td>    
        <td >行二列二</td>  
    </tr>
    <tr>
        <td >行三列二</td>  
    </tr>
</table>

  显示效果:

列一列二
合并行
列一列二
合并列行二列二
行三列二

3.一点思考

  虽说利用HTML语言可以实现表格合并单元格,显示效果完全没有问题,但是产生了一个附加问题,降低了Markdown文档的可读性,看着HTML一推推的,还真难看出个啥。Markdown的目标是易读易写,尽量不要违背这一原则。

  有时候技术手段不支持的,就改变下策略,不一定非得按一种方式操作。

  • 7
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值