以与 Jupyter Notebook 相同的样式将 pandas 数据框呈现为 HTML

Posted 2023-03-12

【中文标题】以与 Jupyter Notebook 相同的样式将 pandas 数据框呈现为 HTML

【英文标题】：Rendering a pandas dataframe as HTML with same styling as Jupyter Notebook

【发布时间】：2019-02-05 20:24:46

【问题描述】：

我想以与 Jupyter Notebook 相同的方式将 pandas 数据框呈现为 html，即具有所有花里胡哨的功能，例如漂亮的样式、列突出显示和单击时的列排序。

pandas.to_html 只输出一个普通的 HTML 表格，需要手动设置样式等。

jupyter 使用的数据帧渲染代码是否可作为可在任何 Web 应用程序中使用的独立模块提供？

另外，js/css文件等资产是否与jupyter解耦，方便复用？

【问题讨论】：

这可能会回答你的问题：***.com/questions/36897366/…

从长远来看，我放弃了使用 jupyter 样式的想法，因为我不喜欢生成的内联样式的冗长，而是选择将数据作为 JSON 提供给动态 @987654324 @ -- 这样您就可以进行服务器端分页、正确排序并应用各种客户端转换，包括 OOTB 区域设置相关的日期和数字格式。

【参考方案1】：

这对我很有效

def getTableHTML(df):
    
    """
    From https://***.com/a/49687866/2007153
    
    Get a Jupyter like html of pandas dataframe
    
    """

    styles = [
        #table properties
        dict(selector=" ", 
             props=[("margin","0"),
                    ("font-family",'"Helvetica", "Arial", sans-serif'),
                    ("border-collapse", "collapse"),
                    ("border","none"),
    #                 ("border", "2px solid #ccf")
                       ]),

        #header color - optional
    #     dict(selector="thead", 
    #          props=[("background-color","#cc8484")
    #                ]),

        #background shading
        dict(selector="tbody tr:nth-child(even)",
             props=[("background-color", "#fff")]),
        dict(selector="tbody tr:nth-child(odd)",
             props=[("background-color", "#eee")]),

        #cell spacing
        dict(selector="td", 
             props=[("padding", ".5em")]),

        #header cell properties
        dict(selector="th", 
             props=[("font-size", "100%"),
                    ("text-align", "center")]),


    ]
    return (df.style.set_table_styles(styles)).render()

iris = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')
getTableHTML(iris)

【参考方案2】：

首先要澄清几点：

Pandas 与样式没有任何关系，样式发生在

所有

HTML 表格中，而不仅仅是数据帧。这很容易通过在 Jupyter 中显示 HTML 表格来检查（答案末尾的示例代码）。 您的 Jupyter 或已安装的扩展之一似乎正在执行“额外”样式，默认样式不包括列排序或列突出显示。只有奇数/偶数行着色和行突出显示（检查 Jupyter 源代码和我的本地 Jupyter 安装）。这意味着我的回答可能不会包含您想要的所有样式。

---

答案

jupyter 使用的数据帧渲染代码是否可作为可用于任何网络应用程序的独立模块提供？

不完全是一个独立的模块，但所有表格的格式和样式似乎都附加到rendered_html class。通过检查 Firefox 中的笔记本 HTML 来仔细检查。 您可以使用上面直接链接的.less 文件或将所需的样式复制到您的 HTML。

另外，js/css文件等资产是否与jupyter解耦，方便复用？

就像任何精心设计的网络项目（实际上是任何软件项目）一样，包和模块是分开的。这意味着您可以轻松地重用项目中的大量代码。您可以在 Jupyter 源代码 here 中找到大部分 .less 样式文件。

---

检查样式是否适用于所有 HTML 表格的示例：

from IPython.display import HTML

HTML('''<table>
  <thead><tr><th></th><th>a</th><th>b</th></tr></thead>
  <tbody>
    <tr><th>0</th><td>1</td><td>3</td></tr>
    <tr><th>1</th><td>2</td><td>4</td></tr>
  </tbody>
</table>''')

【讨论】：

确实，我安装了jupyter_contrib_nbextensions，并添加了额外的列排序和行突出显示。感谢less 链接！

@qusai-alothman 我很欣赏这个解释，我只是不明白如何使用你提到的rendered_html_class 来设置我的数据框的样式？