有沒有一種將熊貓數據框轉換爲漂亮的HTML表格的快速方法？

Question

的問題：df.to_html()輸出是一個普通的HTML表，這是沒有什麼好看的：

同時，在Jupyter筆記本dataframes的視覺表現是好多了，但如果有一個簡單的方法來複制它，我還沒有找到它。

我知道它應該有可能通過與df.style左右擺弄生成更美觀的表，但在我走之前先學習CSS，有沒有人已經寫一個函數來做到這一點？

Answer 1

考慮我的數據框df

df = pd.DataFrame(np.arange(9).reshape(3, 3), list('ABC'), list('XYZ')) 

df 

    X Y Z 
A 0 1 2 
B 3 4 5 
C 6 7 8 

我撕開這個風格了我的jupyter筆記本

my_style = """background-color: rgba(0, 0, 0, 0); 
border-bottom-color: rgb(0, 0, 0); 
border-bottom-style: none; 
border-bottom-width: 0px; 
border-collapse: collapse; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(0, 0, 0); 
border-left-style: none; 
border-left-width: 0px; 
border-right-color: rgb(0, 0, 0); 
border-right-style: none; 
border-right-width: 0px; 
border-top-color: rgb(0, 0, 0); 
border-top-style: none; 
border-top-width: 0px; 
box-sizing: border-box; 
color: rgb(0, 0, 0); 
display: table; 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
font-size: 12px; 
height: 1675px; 
line-height: 20px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 12px; 
table-layout: fixed; 
text-size-adjust: 100%; 
width: 700px; 
-webkit-border-horizontal-spacing: 0px; 
-webkit-border-vertical-spacing: 0px; 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);""" 

我得到這個從my post

def HTML_with_style(df, style=None, random_id=None): 
    from IPython.display import HTML 
    import numpy as np 
    import re 

    df_html = df.to_html() 

    if random_id is None: 
     random_id = 'id%d' % np.random.choice(np.arange(1000000)) 

    if style is None: 
     style = """ 
     <style> 
      table#{random_id} {{color: blue}} 
     </style> 
     """.format(random_id=random_id) 
    else: 
     new_style = [] 
     s = re.sub(r'</?style>', '', style).strip() 
     for line in s.split('\n'): 
       line = line.strip() 
       if not re.match(r'^table', line): 
        line = re.sub(r'^', 'table ', line) 
       new_style.append(line) 
     new_style = ['<style>'] + new_style + ['</style>'] 

     style = re.sub(r'table(#\S+)?', 'table#%s' % random_id, '\n'.join(new_style)) 

    df_html = re.sub(r'<table', r'<table id=%s ' % random_id, df_html) 

    return HTML(style + df_html) 

然後，我實現

HTML_with_style(df, '<style>table {{{}}}</style>'.format(my_style)) 

您可以修改代碼以轉儲HTML

def HTML_with_style(df, style=None, random_id=None): 
    import numpy as np 
    import re 

    df_html = df.to_html() 

    if random_id is None: 
     random_id = 'id%d' % np.random.choice(np.arange(1000000)) 

    if style is None: 
     style = """ 
     <style> 
      table#{random_id} {{color: blue}} 
     </style> 
     """.format(random_id=random_id) 
    else: 
     new_style = [] 
     s = re.sub(r'</?style>', '', style).strip() 
     for line in s.split('\n'): 
       line = line.strip() 
       if not re.match(r'^table', line): 
        line = re.sub(r'^', 'table ', line) 
       new_style.append(line) 
     new_style = ['<style>'] + new_style + ['</style>'] 

     style = re.sub(r'table(#\S+)?', 'table#%s' % random_id, '\n'.join(new_style)) 

    df_html = re.sub(r'<table', r'<table id=%s ' % random_id, df_html) 

    return style + df_html 

現在

HTML_with_style(df, '<style>table {{{}}}</style>'.format(my_style)) 

'<style>\ntable#id850184 {background-color: rgba(0, 0, 0, 0);\ntable#id850184 border-bottom-color: rgb(0, 0, 0);\ntable#id850184 border-bottom-style: none;\ntable#id850184 border-bottom-width: 0px;\ntable#id850184 border-collapse: collapse;\ntable#id850184 border-image-outset: 0px;\ntable#id850184 border-image-repeat: stretch;\ntable#id850184 border-image-slice: 100%;\ntable#id850184 border-image-source: none;\ntable#id850184 border-image-width: 1;\ntable#id850184 border-left-color: rgb(0, 0, 0);\ntable#id850184 border-left-style: none;\ntable#id850184 border-left-width: 0px;\ntable#id850184 border-right-color: rgb(0, 0, 0);\ntable#id850184 border-right-style: none;\ntable#id850184 border-right-width: 0px;\ntable#id850184 border-top-color: rgb(0, 0, 0);\ntable#id850184 border-top-style: none;\ntable#id850184 border-top-width: 0px;\ntable#id850184 box-sizing: border-box;\ntable#id850184 color: rgb(0, 0, 0);\ntable#id850184 display: table#id850184;\ntable#id850184 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;\ntable#id850184 font-size: 12px;\ntable#id850184 height: 1675px;\ntable#id850184 line-height: 20px;\ntable#id850184 margin-left: 0px;\ntable#id850184 margin-right: 0px;\ntable#id850184 margin-top: 12px;\ntable#id850184-layout: fixed;\ntable#id850184 text-size-adjust: 100%;\ntable#id850184 width: 700px;\ntable#id850184 -webkit-border-horizontal-spacing: 0px;\ntable#id850184 -webkit-border-vertical-spacing: 0px;\ntable#id850184 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}\n</style><table id=id850184 border="1" class="dataframe">\n <thead>\n <tr style="text-align: right;">\n  <th></th>\n  <th>X</th>\n  <th>Y</th>\n  <th>Z</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n  <th>A</th>\n  <td>0</td>\n  <td>1</td>\n  <td>2</td>\n </tr>\n <tr>\n  <th>B</th>\n  <td>3</td>\n  <td>4</td>\n  <td>5</td>\n </tr>\n <tr>\n  <th>C</th>\n  <td>6</td>\n  <td>7</td>\n  <td>8</td>\n </tr>\n </tbody>\n</table>'