龙空技术网

Markdown表格合并

画画的尼莫 57

前言:

此刻看官们对“表格列合并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网站可以帮我们实现表格的合并,我们只需要复制其中的代码,然后即可。

生成table

标签: #表格列合并html #html合并列单元格代码 #html表格代码合并列