Markdown表格合并单元格及颜色

1. 基础:[Markdown]本体表格语法

Markdown本身的表格语法比较简单,支持任意行列数的表格的绘制,其中第一行固定为表头,文字加粗,底色为浅蓝色。其他行文字不加粗,底色白灰 (对应颜色代码#F7F7F7) 相间。行高、列宽自动分布,不支持调整。支持文本居左、居中、居右的调整,但每一列的文本位置保持一致。字号比正文小一号,不支持调整。

换行就是换行
单元格之间以| 相隔
表头和表格内容之间固定有一行 - (数量不限几个都行),左边加: 就是居左,右边加 : 就是居右,两边都不加或者都加 : 就是居中
不赘述,直接上两个Markdown官方示例:

官方示例1

1
2
3
4
5
项目     | Value
-------- | -----
电脑 | $1600
手机 | $12
导管 | $1

显示效果

项目 Value
电脑 $1600
手机 $12
导管 $1

官方示例2

1
2
3
| Column 1 | Column 2      |
|:--------:| -------------:|
| centered 文本居中 | right-aligned 文本居右 |

显示效果

Column 1 Column 2
centered 文本居中 right-aligned 文本居右

2. 进阶:基于HTML的表格格式

虽然Markdown本身支持的格式比较少,但好在它能兼容[HTML语言]。而且语句很简单,我毫无代码基础都能会。

2.1. HTML表格基本语法结构

HTML语言中, 表格的语法结构是一行一行来,每一行里一格一格来。

代码 含义 备注
<table> 表格开始
</table> 表格结束
<capital> 标题开始
</capital> 标题结束
<tr> 表格行 (table row) 开始
</tr> 表格行 (table row) 结束
<td> 单元格 (table datagrid) 开始
</td> 单元格 (table datagrid) 结束
<th> 表头 (table header) 开始 替代<td>,改变单元格为表头格式
</th> 表头 (table header) 结束 替代</td>,改变单元格为表头格式

2.2. HTML表格格式选项语句(居左、居右、合并单元格、涂色)

选项语句位于开始标签内,后括号之前,多个选项语句以空格相隔

代码 含义 备注
align="left" 居左
align="center" 居中
align="right" 居右
bgcolor="white"<br/>bgcolor=#FFFFFF 背景颜色 “white”可替换为“black”、“blue”等其他颜色名称
#FFFFFF 可替换为其他 #+6位16进制数 格式的颜色代码
对表头无效
colspan=x 水平合并单元格 x为数字,代表这个格子占x列
rowspan=y 竖直合并单元格 y为数字,代表这个格子占y行

2.3. HTML文本格式语句

代码 含义 备注
<b> 开始加粗
</b> 停止加粗 如单元格后续没有不加粗的内容可省略
<i> 开始斜体
</i> 停止斜体 如单元格后续没有不斜体的内容可省略
<mark> 开始高亮
</mark> 停止高亮 如单元格后续没有不高亮的内容可省略
<br> 换行

2.4. HTML表格示例

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<capital>如何在Markdown里面画这样的表格:</capital>
<tr>
<th>普通表头</th>
<th align="right"><i>斜体表头而且居右</th>
<th colspan=2>表头横向合并单元格</th>
</tr>
<tr>
<th>左边也可以有表头</th>
<td bgcolor=#ffffcc>涂个颜色</td>
<td><mark>高亮文本</mark>但不全高亮</td>
<td><b>有时候加粗</b><i>有时候斜体</i></td>
</tr>
<tr>
<td>表头不一定是一整行或者一整列的</td>
<td rowspan=2>纵向合并单元格要注意<br>下一行少一个单元格<br>字太多必要时我会换行</td>
<td rowspan=2 colspan=2>单元格也可以从两个方向合并</td>
</tr>
<td align="left"> 简单做个居左 </td>
</tr>
</table>

显示效果

如何在Markdown里面画这样的表格:
普通表头 斜体表头而且居右 表头横向合并单元格
左边也可以有表头 涂个颜色 高亮文本但不全高亮 有时候加粗有时候斜体
表头不一定是一整行或者一整列的 纵向合并单元格要注意
下一行少一个单元格
字太多必要时我会换行
单元格也可以从两个方向合并
rowspan=2表示纵向合并2个单元格

colspan=2表示横向合并2个单元格
简单做个居左
打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2015-2023 Move Jian
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信