整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

html开发笔记20-合并单元格-列和行

、什么是合并单元格？

一个表格中分为 行 和 列 ，有时候你经常在网页中看到类似这样的表格，有时候是合并了列，有时候是合并了行。那么这个是怎么做的？也是通过下面的方法实现的。

二、怎么合并？

向单元格添加属性即可实现，合并 列 和 行的属性不一样

1、合并列的属性：clospan="2" //要合并几列数字就是几

2、合并行的属性：rowspan="2" //同理，要合并几行数字就是几

3、合并后的单元格（行或列）必然会自动多出来一个，需要手动删掉。

4、重点：合并单元格只和 td 标签有关系：

（1）合并列：是左右合并，在左侧的 td 标签中添加 colspan="2" 要合并的 td 的数量。

（2）合并行：是上下合并，在上面的 td 标签中添加 rowspan="2" 要合并的td的数量。

（3）合并完后删除多余的 td 标签。

三、两个属性的用法

1、合并 列 的用法：

（1）首先确定你要合并的单元格在第几行第几列，然后找到它，从他的td标签中添加属性。

例如要合并第4行的，第4和第5列：


<tr>
    <td>第三节</td>
    <td>html</td>
    <td>css</td>
    <td colspan="2">php</td> <!-- 合并 列 的用法-->
    <td>php</td>
  </tr>

2、合并 行 的用法：

例如下面：合并第3行和第4行的第1列。

完整代码：↓

者：Roman Orac
鱼羊 编译整理
量子位 报道 | 公众号 QbitAI

数据分析，如何能错过 Pandas 。

现在，数据科学家 Roman Orac 分享了他在工作中相见恨晚的 Pandas 使用技巧。

了解了这些技巧，能让你在学习、使用 Pandas 的时候更加高效。

话不多说，一起学习一下~

Pandas实用技巧

用 Pandas 做数据分析，最大的亮点当属 DataFrame。不过，在展示成果的时候，常常需要把 DataFrame 转成另一种格式。

Pandas 在这一点上其实十分友好，只需添加一行代码。

DataFrame 转 HTML

如果你需要用 HTML 发送自动报告，那么 to_html 函数了解一下。

比如，我们先设定这样一个 DataFrame：

import numpy as np
import pandas as pd
import random

n = 10
df = pd.DataFrame(
    {
        "col1": np.random.random_sample(n),
        "col2": np.random.random_sample(n),
        "col3": [[random.randint(0, 10) for _ in range(random.randint(3, 5))] for _ in range(n)],
    }
)

用上 to_html，就可以将表格转入 html 文件：

df_html = df.to_html()
with open(‘analysis.html’, ‘w’) as f: f.write(df_html)

与之配套的，是 read_html 函数，可以将 HTML 转回 DataFrame。

DataFrame 转 LaTeX

如果你还没用过 LaTeX 写论文，强烈建议尝试一下。

要把 DataFrame 值转成 LaTeX 表格，也是一个函数就搞定了：

df.to_latex()

DataFrame 转 Markdown

如果你想把代码放到 GitHub 上，需要写个 README。

这时候，你可能需要把 DataFrame 转成 Markdown 格式。

Pandas 同样为你考虑到了这一点：

print(df.to_markdown())

注：这里还需要 tabulate 库

DataFrame 转 Excel

说到这里，给同学们提一个小问题：导师/老板/客户要你提供 Excel 格式的数据，你该怎么做？

当然是——

df.to_excel(‘analysis.xlsx’)

需要注意的是，如果你没有安装过 xlwt 和 openpyxl 这两个工具包，需要先安装一下。

另外，跟 HTML 一样，这里也有一个配套函数：read_excel，用来将excel数据导入pandas DataFrame。

DataFrame 转字符串

转成字符串，当然也没问题：

df.to_string()

5个鲜为人知的Pandas技巧

此前，Roman Orac 还曾分享过 5 个他觉得十分好用，但大家可能没有那么熟悉的 Pandas 技巧。

1、data_range

从外部 API 或数据库获取数据时，需要多次指定时间范围。

Pandas 的 data_range 覆盖了这一需求。

import pandas as pd
date_from = “2019-01-01”
date_to = “2019-01-12”
date_range = pd.date_range(date_from, date_to, freq=”D”)
print(date_range)

freq = “D”/“M”/“Y”，该函数就会分别返回按天、月、年递增的日期。

2、合并数据

当你有一个名为left的DataFrame：

和名为right的DataFrame：

想通过关键字“key”把它们整合到一起：

实现的代码是：

df_merge = left.merge(right, on = ‘key’, how = ‘left’, indicator = True)

3、最近合并（Nearest merge）

在处理股票或者加密货币这样的财务数据时，价格会随着实际交易变化。

针对这样的数据，Pandas提供了一个好用的功能，merge_asof。

该功能可以通过最近的key（比如时间戳）合并DataFrame。

举个例子，你有一个存储报价信息的DataFrame。

还有一个存储交易信息的DataFrame。

现在，你需要把两个DataFrame中对应的信息合并起来。

最新报价和交易之间可能有10毫秒的延迟，或者没有报价，在进行合并时，就可以用上 merge_asof。

pd.merge_asof(trades, quotes, on=”timestamp”, by=’ticker’, tolerance=pd.Timedelta(‘10ms’), direction=‘backward’)

4、创建Excel报告

在Pandas中，可以直接用DataFrame创建Excel报告。

import numpy as np
import pandas as pd

df = pd.DataFrame(np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]]), columns=["a", "b", "c"])

report_name = 'example_report.xlsx'
sheet_name = 'Sheet1'
writer = pd.ExcelWriter(report_name, engine='xlsxwriter')
df.to_excel(writer, sheet_name=sheet_name, index=False)

不只是数据，还可以添加图表。

# define the workbook
workbook = writer.book
worksheet = writer.sheets[sheet_name]
# create a chart line object
chart = workbook.add_chart({'type': 'line'})
# configure the series of the chart from the spreadsheet
# using a list of values instead of category/value formulas:
#     [sheetname, first_row, first_col, last_row, last_col]
chart.add_series({
    'categories': [sheet_name, 1, 0, 3, 0],
    'values':     [sheet_name, 1, 1, 3, 1],
})
# configure the chart axes
chart.set_x_axis({'name': 'Index', 'position_axis': 'on_tick'})
chart.set_y_axis({'name': 'Value', 'major_gridlines': {'visible': False}})
# place the chart on the worksheet
worksheet.insert_chart('E2', chart)
# output the excel file
writer.save()

注：这里需要 XlsxWriter 库

5、节省磁盘空间

Pandas在保存数据集时，可以对其进行压缩，其后以压缩格式进行读取。

先搞一个 300MB 的 DataFrame，把它存成 csv。

df = pd.DataFrame(pd.np.random.randn(50000,300))
df.to_csv(‘random_data.csv’, index=False)

压缩一下试试：

df.to_csv(‘random_data.gz’, compression=’gzip’, index=False)

文件就变成了136MB。

gzip压缩文件可以直接读取：

df = pd.read_csv(‘random_data.gz’)

这一份Pandas技巧笔记，暂且说到这里。各位同学都做好笔记了吗？

Talk is cheap, show me the code。学会了，就用起来吧

— 完 —

量子位 QbitAI · 头条号签约

关注我们，第一时间获知前沿科技动态

arkdown表格

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：https://www.tablesgenerator.com/html_tables，因为我们现在实现表格的合并，是通过html的语法来完成的，而tablesgenerator网站可以帮我们实现表格的合并，我们只需要复制其中的代码，然后即可。

生成table


在线咨询
上一篇：第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
下一篇：HTML的pre标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 乌苏市 馆陶县 淮安 伊宁市 罗源县 宜都市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服