Markdown表格

Markdown表格的语法如下：

 |   |   |   |   |
 | - | - | - | - |
 |   |   |   |   |

显示效果如下：

姓名	性别	年龄	生日
张小凡	男	13	-
陆雪琪	女	16	-
碧瑶	女	15	-

我们可以:在第二行，也就是表头下面的一行，去规定它是左对齐，右对齐，或者是居中，分别是:-，-:，:-:，除此之外，就没有其他的控制的方式了，markdown对于表格的控制是比较弱的，比如说表格的合并，markdown自身就无能为力了，好在它支持html的语法，我们也可以实现表格的控制。

姓名	性别	年龄	生日
张小凡	男	13	-
陆雪琪	女	16	-
碧瑶	女	15	-

HTML表格

html之中，使用table作为表格
table表示表格，里面的元素有表头，行，单元格
th表示表头，tr表示行，td表示单元格

普通的HTML表格

第1列	第2列	第3列	第4列
1	2	3	第4列
1	2	3	第4列
1	2	3	第4列
1	2	3	第4列


第1列 第2列 第3列 第4列

1 2 3 第4列


1 2 3 第4列


1 2 3 第4列


1 2 3 第4列

第1列	第2列	第3列	第4列
1	2	3	第4列
1	2	3	第4列
1	2	3	第4列
1	2	3	第4列

同一行的单元格合并

同一行的单元格要合并，那就是一个单元格，占多个单元格的位置，位置是span，就可以使用colspan = "x"，来表示所在的单元格占多少个格子。

第1列	第2列	第3列	第4列
1	2	3	第4列
1			第4列
1	2	3	第4列
1	2	3	第4列


第1列 第2列 第3列 第4列

1 2 3 第4列


1 第4列


1 2 3 第4列


1 2 3 第4列

第1列	第2列	第3列	第4列
1	2	3	第4列
1	第4列
1	2	3	第4列
1	2	3	第4列

同一列的单元格合并

同一列的单元格要合并，那就是一个单元格，占多行单元格的位置，位置是span，就可以使用rowspan = "x"，来表示所在的单元格占多少个列方向的单元格。

第1列	第2列	第3列	第4列
1	2	3	第4列
1	2	3	第4列
	1	2	3
	1	2	3


第1列 第2列 第3列 第4列

1 2 3 第4列


1 2 3 第4列


1 2 3


1 2 3

第1列	第2列	第3列	第4列
1	2	3	第4列
1	2	3	第4列
1	2	3
1	2	3

行和列同时合并

这个时候，就需要把colspan = "x"和rowspan = "x"，同时使用了，下面是二者没有关系的一种情况。

第1列	第2列	第3列	第4列
1	2	3
1	2	3	第4列
	1	2	3
	1	2	3


第1列 第2列 第3列 第4列

1 2 3


1 2 3 第4列


1 2 3


1 2 3

第1列	第2列	第3列	第4列
1	2	3
1	2	3	第4列
1	2	3
1	2	3

下面是二者之间相互关联的一种情况。

第1列	第2列	第3列	第4列
1	2	3	第4列
1			2
			1
			1


第1列 第2列 第3列 第4列

1 2 3 第4列


1 2


1


1

第1列	第2列	第3列	第4列
1	2	3	第4列
1	2
1
1

表格实战测试

分析：主要是纵向的表格的合并，文字放置在表格的中间，表格头背景颜色设为粉红色，然后表头文字是红色。我们开始实现。

效果

1.先去处理第一列的单元格，占据3个单元格，整体的显示效果和代码如下：

派别	姓名	年龄	性别	武器
1	2	3	4	5
	2	3	4	5
	2	3	4	5


    派别 姓名 年龄 性别 武器
    

        
        1 2 3 4 5
    
    
        2 3 4 5
    
    
        2 3 4 5

派别	姓名	年龄	性别	武器
1	2	3	4	5
2	3	4	5
2	3	4	5

2.然后处理第4列的两个单元格，也是纵向的，合并的单元格，会自动占据它所合并的方向的位置，相应的位置，计算的时候会在下一行或者相邻的列里面也计算在内，它下面的一个元素，自动跟在这个“隐藏元素”的后面。比如青云山，男这两个元素的位置，就体现了这个原则。整体的显示效果和代码如下：

派别	姓名	年龄	性别	武器
青云山	2	3	男	5
	2	3	男	5
	2	3	4	5
1	2	3	4	5


    派别 姓名 年龄 性别 武器
    

        
        青云山 2 3 男 5
    
    
        2 3 5
    
    
        2 3 4 5
    
    
        1 2 3 4 5

派别	姓名	年龄	性别	武器
青云山	2	3	男	5
2	3	5
2	3	4	5
1	2	3	4	5

3.然后我们实现居中，使用style，对于整个table设置，也可以对某个tr，或者某一个td使用，越小的控制，起作用的优先级越高，比如第2行，设置向右对齐，它的优先级高于整个table的设置。整体的显示效果和代码如下：

派别	姓名	年龄	性别	武器
青云山	2	3	男	5
	2	3	男	5
	2	3	4	5
1	2	3	4	5


    派别 姓名 年龄 性别 武器
    

        
        青云山 2 3 男 5
    
    
        2 3 5
    
    
        2 3 4 5
    
    
        1 2 3 4 5

派别	姓名	年龄	性别	武器
青云山	2	3	男	5
2	3	5
2	3	4	5
1	2	3	4	5

4.实现其他的表格合并的效果，整体的显示效果和代码如下：

派别	姓名	年龄	性别	武器
青云山	2	3	男	5
	2	3	男	5
	2	3	4	5
1	2	3	男	5
鬼王宗	2	3	男	5
鬼王宗	2	3	4	5


    派别 姓名 年龄 性别 武器
    

        
        青云山 2 3 男 5
    
    
        2 3 5
    
    
        2 3 4 5
    
    
        1 2 3 男 5
    
    
        鬼王宗 2 3 5
    
    
        2 3 4 5

派别	姓名	年龄	性别	武器
青云山	2	3	男	5
2	3	5
2	3	4	5
1	2	3	男	5
鬼王宗	2	3	5
2	3	4	5

5.填充数据

派别	姓名	年龄	性别	武器
青云山	张小凡	16	男	烧火棍
	曾书书	17	男	轩辕
	陆雪琪	18	女	天琊
天音寺	普智	500	男	嗜血珠
鬼王宗	鬼王	1000	男	朱雀印
鬼王宗	碧瑶	15	女	伤心花


    派别 姓名 年龄 性别 武器
    

        
        青云山 张小凡 16 男 烧火棍
    
    
        曾书书 17 轩辕
    
    
        陆雪琪 18 女 天琊
    
    
        天音寺 普智 500 男 嗜血珠
    
    
        鬼王宗 鬼王 1000 朱雀印
    
    
        碧瑶 15 女 伤心花

派别	姓名	年龄	性别	武器
青云山	张小凡	16	男	烧火棍
曾书书	17	轩辕
陆雪琪	18	女	天琊
天音寺	普智	500	男	嗜血珠
鬼王宗	鬼王	1000	朱雀印
碧瑶	15	女	伤心花

6.修改表头样式，仍然是使用style，修改背景色background-color，字体颜色color就可以了。

派别	姓名	年龄	性别	武器
青云山	张小凡	16	男	烧火棍
	曾书书	17	男	轩辕
	陆雪琪	18	女	天琊
天音寺	普智	500	男	嗜血珠
鬼王宗	鬼王	1000	男	朱雀印
鬼王宗	碧瑶	15	女	伤心花


    派别
    姓名
    年龄
    性别
    武器
    

        
        青云山 张小凡 16 男 烧火棍
    
    
        曾书书 17 轩辕
    
    
        陆雪琪 18 女 天琊
    
    
        天音寺 普智 500 男 嗜血珠
    
    
        鬼王宗 鬼王 1000 朱雀印
    
    
        碧瑶 15 女 伤心花

派别	姓名	年龄	性别	武器
青云山	张小凡	16	男	烧火棍
曾书书	17	轩辕
陆雪琪	18	女	天琊
天音寺	普智	500	男	嗜血珠
鬼王宗	鬼王	1000	朱雀印
碧瑶	15	女	伤心花

以上就是实战环节，完成了既定的目标的表格的单元格合并与样式的改造，over!

typora插件

据说VLOOK可以，但是我测试了之后，不行，合并单元格功能无法正常使用。

tables generator

如果你没有html基础，或者是觉得麻烦，或者是不太想去写表格，没关系，也有办法，直接生成，按照目标样式自定义去合并，设置样式，然后生成，拷贝到typora之中即可！！！方便快捷，省时省力！！！只需浏览器收藏url：
https://www.tablesgenerator.com/html_tables，因为我们现在实现表格的合并，是通过html的语法来完成的，而tablesgenerator网站可以帮我们实现表格的合并，我们只需要复制其中的代码，然后即可。

生成table