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列
同一行的单元格合并
同一行的单元格要合并,那就是一个单元格,占多个单元格的位置,位置是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列
同一列的单元格合并
同一列的单元格要合并,那就是一个单元格,占多行单元格的位置,位置是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
行和列同时合并
这个时候,就需要把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 | 第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
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
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
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
5.填充数据
派别 | 姓名 | 年龄 | 性别 | 武器 |
青云山 | 张小凡 | 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 女 伤心花
以上就是实战环节,完成了既定的目标的表格的单元格合并与样式的改造,over!
typora插件
据说VLOOK可以,但是我测试了之后,不行,合并单元格功能无法正常使用。
tables generator
如果你没有html基础,或者是觉得麻烦,或者是不太想去写表格,没关系,也有办法,直接生成,按照目标样式自定义去合并,设置样式,然后生成,拷贝到typora之中即可!!!方便快捷,省时省力!!!只需浏览器收藏url:
https://www.tablesgenerator.com/html_tables,因为我们现在实现表格的合并,是通过html的语法来完成的,而tablesgenerator网站可以帮我们实现表格的合并,我们只需要复制其中的代码,然后即可。