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

Question

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

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

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

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

Answer 1

这对我很有效

def getTableHTML(df):
    
    """
    From https://stackoverflow.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)

Answer 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>''')