本篇介绍使用html语法在MarkDown中实现较复杂的功能,主要介绍以下几部分:

  • 绘制复杂表格

  • ……

绘制复杂表格

首先在Excel中设计好需要的表格结构,如下图示例:

将Excel表格中设计好的表格复制到这里:No-Cruft Excel to HTML Table Converter,按照下图所示进行转换:

转换后的原始代码是这样的:·

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td></td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td></td>
</tr>
</table>

直接将其粘贴在MarkDown中,效果如下:

1
2 3 4
5 6

可以看到这时还不是我们想要的结果,需要对转换的代码进行适当修改:

  • 删除所有空格:<td></td>,注意本例中倒数第3行的<td></td>删除后,其前后两行也无用,也可删除
  • 水平单元格合并:将1前的<td>修改为<td colspan="3">,意思是扩展3列
  • 竖直单元格合并:将2前的<td>修改为<td rowspan="2">,意思是扩展2行

修改后的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>

修改后的显示效果:

1
2 3 4
5 6

可以看出基本结构已经一致了,还可以继续修改:

  • 想要在2所在单元格显示两行:通过<Br/>换行

    将上面的<td rowspan="2">2</td>修改为<td rowspan="2">2<Br/>7</td>

  • 居中对齐:使用<center> </center>包围

  • 单元格添加背景颜色: <td后添加bgcolor=#FFF8DC参数

    颜色表可查阅:HTML 颜色名

修改后代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<tr>
<td bgcolor=#FFF8DC colspan="3"><center>1</center></td>
</tr>
<tr>
<td rowspan="2">2<Br/>7</td>
<td><center>3</center></td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>

效果如下:

1
2
7
3
4
5 6