使用 to_html 将 CSS 类应用到 Pandas DataFrame

2023-12-04

我在使用 Pandas“to_html”方法应用“classes”参数来设置 DataFrame 样式时遇到问题。

“类:str或列表或元组,默认无 应用于生成的 html 表的 CSS 类” 从:https://pandas.pydata.org/pandas-docs/stable/ generated/pandas.DataFrame.to_html.html

我能够像这样渲染一个样式化的 DataFrame(例如):

df = pd.DataFrame([[1, 2], [1, 3], [4, 6]], columns=['A', 'B'])

myhtml = df.style.set_properties(**{'font-size': '11pt', 'font-family': 'Calibri','border-collapse': 'collapse','border': '1px solid black'}).render()

with open('myhtml.html','w') as f:
    f.write(myhtml)        

如何使用“classes”和“to_html”来设置 DataFrame 的 html 输出样式,如下所示:

df.to_html('myhtml.html',classes=<something here>)

Pandas' to_html只是输出一个包含 HTML 表标记的大字符串。类参数是一个方便的处理程序,用于提供<table> a class将在 a 中引用的属性先前创建的设置其样式的 CSS 文档。因此,纳入to_html到引用外部 CSS 的更广泛的 HTML 文档构建中。

有趣的是,to_html添加双类<table class="dataframe mystyle">可以在 CSS 中单独引用,.dataframe {...} .mystyle{...},或一起.dataframe.mystyle {...}。下面用随机数据进行演示。

Data

import pandas as pd
import numpy as np

pd.set_option('display.width', 1000)
pd.set_option('colheader_justify', 'center')

np.random.seed(6182018)
demo_df = pd.DataFrame({'date': np.random.choice(pd.date_range('2018-01-01', '2018-06-18', freq='D'), 50),
                        'analysis_tool': np.random.choice(['pandas', 'r', 'julia', 'sas', 'stata', 'spss'],50),              
                        'database': np.random.choice(['postgres', 'mysql', 'sqlite', 'oracle', 'sql server', 'db2'],50), 
                        'os': np.random.choice(['windows 10', 'ubuntu', 'mac os', 'android', 'ios', 'windows 7', 'debian'],50), 
                        'num1': np.random.randn(50)*100,
                        'num2': np.random.uniform(0,1,50),                   
                        'num3': np.random.randint(100, size=50),
                        'bool': np.random.choice([True, False], 50)
                       },
                        columns=['date', 'analysis_tool', 'num1', 'database', 'num2', 'os', 'num3', 'bool']
          )


print(demo_df.head(10))
#      date    analysis_tool     num1      database     num2        os      num3  bool 
# 0 2018-04-21     pandas     153.474246       mysql  0.658533         ios   74    True
# 1 2018-04-13        sas     199.461669      sqlite  0.656985   windows 7   11   False
# 2 2018-06-09      stata      12.918608      oracle  0.495707     android   25   False
# 3 2018-04-24       spss      88.562111  sql server  0.113580   windows 7   42   False
# 4 2018-05-05       spss     110.231277      oracle  0.660977  windows 10   76    True
# 5 2018-04-05        sas     -68.140295  sql server  0.346894  windows 10    0    True
# 6 2018-05-07      julia      12.874660    postgres  0.195217         ios   79    True
# 7 2018-01-22          r     189.410928       mysql  0.234815  windows 10   56   False
# 8 2018-01-12     pandas    -111.412564  sql server  0.580253      debian   30   False
# 9 2018-04-12          r      38.963967    postgres  0.266604   windows 7   46   False

CSS (另存为 df_style.css)

/* includes alternating gray and white with on-hover color */

.mystyle {
    font-size: 11pt; 
    font-family: Arial;
    border-collapse: collapse; 
    border: 1px solid silver;

}

.mystyle td, th {
    padding: 5px;
}

.mystyle tr:nth-child(even) {
    background: #E0E0E0;
}

.mystyle tr:hover {
    background: silver;
    cursor: pointer;
}

Pandas

pd.set_option('colheader_justify', 'center')   # FOR TABLE <th>

html_string = '''
<html>
  <head><title>HTML Pandas Dataframe with CSS</title></head>
  <link rel="stylesheet" type="text/css" href="df_style.css"/>
  <body>
    {table}
  </body>
</html>.
'''

# OUTPUT AN HTML FILE
with open('myhtml.html', 'w') as f:
    f.write(html_string.format(table=demo_df.to_html(classes='mystyle')))

OUTPUT

HTML (引用 df_style.css,假设在同一目录中;请参阅表中的类参数)

<html>
  <head><title>HTML Pandas Dataframe with CSS</title></head>
  <link rel="stylesheet" type="text/css" href="df_style.css"/>
  <body>
    <table border="1" class="dataframe mystyle">
  <thead>
    <tr style="text-align: center;">
      <th></th>
      <th>date</th>
      <th>analysis_tool</th>
      <th>num1</th>
      <th>database</th>
      <th>num2</th>
      <th>os</th>
      <th>num3</th>
      <th>bool</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>0</th>
      <td>2018-04-21</td>
      <td>pandas</td>
      <td>153.474246</td>
      <td>mysql</td>
      <td>0.658533</td>
      <td>ios</td>
      <td>74</td>
      <td>True</td>
    </tr>
    <tr>
      <th>1</th>
      <td>2018-04-13</td>
      <td>sas</td>
      <td>199.461669</td>
      <td>sqlite</td>
      <td>0.656985</td>
      <td>windows 7</td>
      <td>11</td>
      <td>False</td>
    </tr>
    <tr>
      <th>2</th>
      <td>2018-06-09</td>
      <td>stata</td>
      <td>12.918608</td>
      <td>oracle</td>
      <td>0.495707</td>
      <td>android</td>
      <td>25</td>
      <td>False</td>
    </tr>
    <tr>
      <th>3</th>
      <td>2018-04-24</td>
      <td>spss</td>
      <td>88.562111</td>
      <td>sql server</td>
      <td>0.113580</td>
      <td>windows 7</td>
      <td>42</td>
      <td>False</td>
    </tr>
    <tr>
      <th>4</th>
      <td>2018-05-05</td>
      <td>spss</td>
      <td>110.231277</td>
      <td>oracle</td>
      <td>0.660977</td>
      <td>windows 10</td>
      <td>76</td>
      <td>True</td>
    </tr>
    ...
  </tbody>
</table>
  </body>
</html>

HTML Output

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 to_html 将 CSS 类应用到 Pandas DataFrame 的相关文章

随机推荐

  • 更改 Woocommerce 中购买产品的“添加到购物车”按钮

    我想做的是这样的 客户购买产品 它不会显示 添加到购物车 而是显示 查看数字产品 并具有指向特定页面的自定义链接 我正在查找 WooCommerce 的数据库 并试图弄清楚如何知道某个商品已被购买 以便我可以弄清楚如何让一个函数自动执行此操
  • 支持所有 Android 平板电脑分辨率

    我们公司的设计师希望我给他 Android 平板电脑的分辨率 以便他开始设计一个新的应用程序 我知道有很多不同的解决方案 此处列出 安卓平板电脑 我还知道 Android 对不同 dpi 的划分 ldpi mdpi 我的问题 我应该告诉设计
  • 如何更改CListCtrl列的颜色

    我想将特定列的背景颜色更改为对话框的颜色 灰色 我怎样才能实现它 void CUcsOpTerminalDlg OnCustomdrawFeatureList NMHDR pNMHDR LRESULT pResult LPNMCUSTOMD
  • 正则表达式 javascript 中仅排除 0

    我想创建一个正则表达式 它将采用一到十个数值 但如果只提供 0 则它不应该接受 例如 1 is valid input 1111123455 is valid input 01 is valid input 010 is valid inp
  • 如何使用 Java DeflaterOutputStream

    编辑 我真的只需要知道 Deflater 派生类何时决定写入页眉和页脚数据 以及如何利用这些事实 我真的很想做以下事情 用一些字节为 Deflater 派生类准备字典 我想我明白了 发送一些要压缩的数据到 Deflater 派生类 我想我明
  • 填充第二个选择框 - 绑定问题

    我使用以下代码用城市填充第二个选择框 jQuery country live change function populateCityListBox alert jQuery select city val function populat
  • Objective-C 从自定义单元格访问方法

    好吧 这可能是一个新手问题 但我需要帮助 我有一个 someview m 其中有一个在 customCell h 和 m 中定义的自定义单元格 所以在 someview m 我有 UITableViewCell tableView UITa
  • 如何在php中创建hmac md5?

    我正在使用 payU 信用卡系统 但我没办法 payU 告诉我必须创建 hmac md5 哈希值 我的密钥是 3 9 X4 660 ak h6 T 我想转换为 HMAC MD5 哈希 8GEMISEPE6208617192012 12 15
  • 创建文件夹并使 ES File Explorer 添加我的应用程序的图标

    我想将文件夹与我的应用程序关联起来 就像 WhatsApp 和 Viber 那样 我尝试创建文件夹 File folder new File Environment getExternalStorageDirectory getPath M
  • 注释可以出现在 DOCTYPE 声明之前吗?

    我想发表评论 style 位于 HTML 代码的最顶部 位于 DOCTYPE 声明之前 这符合标准吗 主流浏览器都支持吗 这样做有什么陷阱吗 It is 完全有效 to do However 带来allIE 版本怪癖模式 除非是forced
  • 如何避免 Xstream 生成带有 & 或 "e 或类似字符的 xml 文件?

    我开始工作Xstream与Java 我有一个名为的汽车列表CarList 我有一辆汽车作为一个名为Car XStream xstream new XStream new StaxDriver xstream alias Car Car cl
  • 使用 Rvest 抓取包含多个表的 URL

    我正在尝试学习如何做一些scraping使用 rvest 包 我正在用这个url加载信息 我试图获取 URL 中标记为 高级 的表的信息 当我尝试加载信息时 我所能得到的只是第一个表 我的意思是 当我使用谷歌浏览器检查时 我看到表中的数字被
  • 在 XSLT v1.0 中使用以结尾

    我正在尝试编辑当前的 XSLT 我想要的功能是当 code no 的值以01结尾时我想编辑当前城市位置 目前此功能不存在 我尝试过使用字符串和子字符串 但它给了我一个错误 说结尾功能不存在 请帮忙 来自 xml 的值是
  • 使 Android 模拟器适用于 1600x1200

    我尝试在模拟器中将 Android 的皮肤布局编辑为 1600x1200 但模拟器无法打开窗口 它适用于较小的分辨率 如 1024x480 等 但不适用于大分辨率 尽管即使使用 1024x480 模拟器窗口的一部分也无法访问且不可见 我的问
  • PHP 编码电子邮件地址

    我需要一条路PHP仅使用对电子邮件地址进行编码a zA Z0 9所以基本上编码时没有任何特殊字符 但随后能够将其解码回原始内容 Example email protected gt ENCODE gt n6bvJjdh7w6QbdVB373
  • NodeJS并行回调设计模式

    我正在尝试找到一个好的模式来执行一堆并行任务 让我定义一些任务来举例说明 任务a b c d e f g执行为a function er ra task a returned ra is result so do b to g 还有一些任务
  • Webpack 反应热加载程序不工作

    下面是我的 webpack config js 代码 var webpack require webpack var path require path module exports context dirname app entry we
  • 右栏按钮项目不显示

    我有以下用于放置 rightbarbuttonitem 的代码 UIButton rightbutton UIButton buttonWithType UIButtonTypeCustom rightbutton setBackgroun
  • 某些 JSON 文件出现 PowerShell FilterScript 错误

    感谢 iRon 本周早些时候提供的帮助question 他对我目前正在进行的一项工作提供了巨大帮助 总之 我们有一个 Azure CICD 管道来部署策略 我们有一个包含 200 多个 JSON 策略文件的文件夹 CICD 流程将它们全部放
  • 使用 to_html 将 CSS 类应用到 Pandas DataFrame

    我在使用 Pandas to html 方法应用 classes 参数来设置 DataFrame 样式时遇到问题 类 str或列表或元组 默认无 应用于生成的 html 表的 CSS 类 从 https pandas pydata org