前言:
此刻看官们对“表格列合并html”大概比较着重,姐妹们都需要分析一些“表格列合并html”的相关文章。那么小编同时在网络上收集了一些对于“表格列合并html””的相关知识,希望各位老铁们能喜欢,同学们快快来了解一下吧!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列
<table><th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr></table>同一行的单元格合并
同一行的单元格要合并,那就是一个单元格,占多个单元格的位置,位置是span,就可以使用colspan = "x",来表示所在的单元格占多少个格子。
第1列
第2列
第3列
第4列
1
2
3
第4列
1
第4列
1
2
3
第4列
1
2
3
第4列
<table><th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td colspan="3">1</td><td>第4列</td></tr><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr></table>同一列的单元格合并
同一列的单元格要合并,那就是一个单元格,占多行单元格的位置,位置是span,就可以使用rowspan = "x",来表示所在的单元格占多少个列方向的单元格。
第1列
第2列
第3列
第4列
1
2
3
第4列
1
2
3
第4列
1
2
3
1
2
3
<table><th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th><tr><td>1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td rowspan="3">1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>行和列同时合并
这个时候,就需要把colspan = "x"和rowspan = "x",同时使用了,下面是二者没有关系的一种情况。
第1列
第2列
第3列
第4列
1
2
3
1
2
3
第4列
1
2
3
1
2
3
<table><th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th><tr><td>1</td><td>2</td><td colspan="2">3</td></tr><tr><td rowspan="3">1</td><td>2</td><td>3</td><td>第4列</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>
下面是二者之间相互关联的一种情况。
第1列
第2列
第3列
第4列
1
2
3
第4列
1
2
1
1
<table><th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th><tr><td>1</td><td>2</td><td>3</td><th>第4列</th></tr><tr><td colspan=3 rowspan =3>1</td><td>2</td></tr><tr><td>1</td></tr><tr><td>1</td></tr></table>表格实战测试
分析:主要是纵向的表格的合并,文字放置在表格的中间,表格头背景颜色设为粉红色,然后表头文字是红色。我们开始实现。
1.先去处理第一列的单元格,占据3个单元格,整体的显示效果和代码如下:
派别
姓名
年龄
性别
武器
1
2
3
4
5
2
3
4
5
2
3
4
5
<table> <th>派别</th><th>姓名</th><th>年龄</th><th>性别</th><th>武器</th> <tr> <!-- 列的方向占据3个cell --> <td rowspan='3'>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>4</td><td>5</td> </tr></table>
2.然后处理第4列的两个单元格,也是纵向的,合并的单元格,会自动占据它所合并的方向的位置,相应的位置,计算的时候会在下一行或者相邻的列里面也计算在内,它下面的一个元素,自动跟在这个“隐藏元素”的后面。比如青云山,男这两个元素的位置,就体现了这个原则。整体的显示效果和代码如下:
派别
姓名
年龄
性别
武器
青云山
2
3
男
5
2
3
5
2
3
4
5
1
2
3
4
5
<table> <th>派别</th><th>姓名</th><th>年龄</th><th>性别</th><th>武器</th> <tr> <!-- 列的方向占据3个cell --> <td rowspan='3'>青云山</td><td>2</td><td>3</td><td rowspan='2'>男</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr></table>
3.然后我们实现居中,使用style,对于整个table设置,也可以对某个tr,或者某一个td使用,越小的控制,起作用的优先级越高,比如第2行,设置向右对齐,它的优先级高于整个table的设置。整体的显示效果和代码如下:
派别
姓名
年龄
性别
武器
青云山
2
3
男
5
2
3
5
2
3
4
5
1
2
3
4
5
<table style="text-align:center;"> <th>派别</th><th>姓名</th><th>年龄</th><th>性别</th><th>武器</th> <tr> <!-- 列的方向占据3个cell --> <td rowspan='3'>青云山</td><td>2</td><td>3</td><td rowspan='2'>男</td><td>5</td> </tr> <tr style="text-align:right;"> <td>2</td><td>3</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr></table>
4.实现其他的表格合并的效果,整体的显示效果和代码如下:
派别
姓名
年龄
性别
武器
青云山
2
3
男
5
2
3
5
2
3
4
5
1
2
3
男
5
鬼王宗
2
3
5
2
3
4
5
<table style="text-align:center;"> <th>派别</th><th>姓名</th><th>年龄</th><th>性别</th><th>武器</th> <tr> <!-- 列的方向占据3个cell --> <td rowspan='3'>青云山</td><td>2</td><td>3</td><td rowspan='2'>男</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>1</td><td>2</td><td>3</td><td rowspan=2>男</td><td>5</td> </tr> <tr> <td rowspan=2>鬼王宗</td><td>2</td><td>3</td><td>5</td> </tr> <tr> <td>2</td><td>3</td><td>4</td><td>5</td> </tr></table>
5.填充数据
派别
姓名
年龄
性别
武器
青云山
张小凡
16
男
烧火棍
曾书书
17
轩辕
陆雪琪
18
女
天琊
天音寺
普智
500
男
嗜血珠
鬼王宗
鬼王
1000
朱雀印
碧瑶
15
女
伤心花
<table style="text-align:center;"> <th>派别</th><th>姓名</th><th>年龄</th><th>性别</th><th>武器</th> <tr> <!-- 列的方向占据3个cell --> <td rowspan='3'>青云山</td><td>张小凡</td><td>16</td><td rowspan='2'>男</td><td>烧火棍</td> </tr> <tr> <td>曾书书</td><td>17</td><td>轩辕</td> </tr> <tr> <td>陆雪琪</td><td>18</td><td>女</td><td>天琊</td> </tr> <tr> <td>天音寺</td><td>普智</td><td>500</td><td rowspan=2>男</td><td>嗜血珠</td> </tr> <tr> <td rowspan=2>鬼王宗</td><td>鬼王</td><td>1000</td><td>朱雀印</td> </tr> <tr> <td>碧瑶</td><td>15</td><td>女</td><td>伤心花</td> </tr></table>
6.修改表头样式,仍然是使用style,修改背景色background-color,字体颜色color就可以了。
派别
姓名
年龄
性别
武器
青云山
张小凡
16
男
烧火棍
曾书书
17
轩辕
陆雪琪
18
女
天琊
天音寺
普智
500
男
嗜血珠
鬼王宗
鬼王
1000
朱雀印
碧瑶
15
女
伤心花
<table style="text-align:center;"> <th style="background-color:#ffc7ce; color: #cb464b">派别</th> <th style="background-color:#ffc7ce; color: #cb464b">姓名</th> <th style="background-color:#ffc7ce; color: #cb464b">年龄</th> <th style="background-color:#ffc7ce; color: #cb464b">性别</th> <th style="background-color:#ffc7ce; color: #cb464b">武器</th> <tr> <!-- 列的方向占据3个cell --> <td rowspan='3'>青云山</td><td>张小凡</td><td>16</td><td rowspan='2'>男</td><td>烧火棍</td> </tr> <tr> <td>曾书书</td><td>17</td><td>轩辕</td> </tr> <tr> <td>陆雪琪</td><td>18</td><td>女</td><td>天琊</td> </tr> <tr> <td>天音寺</td><td>普智</td><td>500</td><td rowspan=2>男</td><td>嗜血珠</td> </tr> <tr> <td rowspan=2>鬼王宗</td><td>鬼王</td><td>1000</td><td>朱雀印</td> </tr> <tr> <td>碧瑶</td><td>15</td><td>女</td><td>伤心花</td> </tr></table>
以上就是实战环节,完成了既定的目标的表格的单元格合并与样式的改造,over!
typora插件
据说VLOOK可以,但是我测试了之后,不行,合并单元格功能无法正常使用。
tables generator
如果你没有html基础,或者是觉得麻烦,或者是不太想去写表格,没关系,也有办法,直接生成,按照目标样式自定义去合并,设置样式,然后生成,拷贝到typora之中即可!!!方便快捷,省时省力!!!只需浏览器收藏url:,因为我们现在实现表格的合并,是通过html的语法来完成的,而tablesgenerator网站可以帮我们实现表格的合并,我们只需要复制其中的代码,然后即可。
标签: #表格列合并html #html合并列单元格代码 #html表格代码合并列