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 · 頭條號簽約

關注我們，第一時間獲知前沿科技動態

天我們說下HTML的表格結構標簽，包含<thead></thead>、<tbody></tbody>等。

<thead></thead> 用于定義表格的頭部，<thead>內部必須包含<tr>標簽，一般是位于第一行。頭部區域
<tbody></tbody>用于定義表格的主體，主要用于放數據本體。主題區域。
以上兩個標簽都是放在<table></table>標簽中

先看下效果:

然后看下代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

在<body>中，我們看到層次分明的三個部分

首先是頁面整體配置:

然后是head部分

接下來是tbody部分

接下來說下合并單元格

特殊情況下，可以把多個單元格合并為一個單元格，只需要了解簡單合并單元格就可以了。

合并單元格方式：跨行合并:rowspan="合并單元格的個數"跨列合并:colspam="合并單元格的個數"
目標單元格
合并單元格的步驟
跨行合并跨列合并

綜上顯示:

目標單元格:

跨行:最上側單元格為目標單元格，寫合并代碼

跨列:最左側單元格為目標單元格，寫合并代碼

首先，需要先確定是跨行還是跨列合并

其次，找到目標單元格，寫上合并方式=合并的單元格數量，比如 <td colspan="2"></td>

最后，刪除多余的單元格

先創建一個3x3的單元格，代碼如下:

對應代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<h1>今天我們學習合并單元格</h1>

<body>

<h3>首先，我們先創建一個3x3的單元格</h3>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

按照上面的代碼試了一下，發現不行，重新寫了測試代碼

先看樣式:

然后進行單元格合并:

為啥我的是這樣呢，是準備合并第一行的第二列和第三列數據

先看下代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

發現是還沒有刪除第三行的代碼，格子給擠出去了。現在看就好了

我們看下全部代碼:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<tr>

>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

好的，今天就先到這里，大家下周再見

在線咨詢

上一篇：使用 Vanilla JavaScript 框架創建一個簡單的天氣應用
下一篇：HTML+CSS實現左右兩邊顯示，左側顯示多組數據，右側顯示一組數據

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html開發筆記20-合并單元格-列和行

、什么是合并單元格？

二、怎么合并？

三、兩個屬性的用法

Pandas實用技巧

5個鮮為人知的Pandas技巧

您的項目需求