Markdown 复杂表格

发表于 | 分类于 | 评论数： | 阅读次数：
本文字数： 1.7k | 阅读时长 ≈ 3 分钟

由于Markdown语法本身不包含复杂表格的插入，但是可以使用html语法来实现，一般的Markdown编辑器都是支持html语法的。

复杂表格与简单表格最大的差异有两点：水平单元格的合并和纵向单元格的合并，通过html语法实现这两个操作本质就是：删除多余的空白单元格，然后使用某些单元格的colspan和rowspan属性进行扩展填充。

  • 水平单元格的合并：基于colspan属性，即使一个单元格占多列的空间。
  • 纵向单元格的合并：基于rowspan属性，即使一个单元格占多行的空间。

可以从Word或者Excel中复制表格，通过网站 No-Cruft Excel to HTML Table Converter 转换获得html代码。

合并行

1
2
3
4
5
6
7
8
9
10
11
12
<table>
    <tr>
        <td>列一</td>
        <td>列一</td>
   </tr>
    <tr>
        <td colspan="2">合并行</td>
    </tr>
    <tr>
        <td colspan="2">合并行</td>
    </tr>
</table>

显示效果：












列一列一
合并行
合并行

合并列

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <tr>
        <td>列一</td>
        <td>列二</td>
   </tr>
    <tr>
        <td rowspan="2">合并列</td>
        <td >行二列二</td>
    </tr>
    <tr>
        <td >行三列二</td>
    </tr>
</table>

显示效果：













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

合并行列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>

显示效果：




















列一列二
合并行
列一列二
合并列行二列二
行三列二
相关文章
0%