Apply CSS class to Pandas DataFrame using to_html

Question

I\'m having trouble applying \"classes\" argument with Pandas \"to_html\" method to style a DataFrame.

\"classes : str or list or tuple, default None CSS class(es) t

Answer 1

Pandas' to_html simply outputs a large string containing HTML table markup. The classes argument is a convenience handler to give the

a class attribute that will be referenced in a previously created CSS document that styles it. Therefore, incorporate to_html into a wider HTML document build that references an external CSS.

Interestingly, to_html adds dual classes

which can be referenced in CSS individually, .dataframe {...} .mystyle{...}, or together .dataframe.mystyle {...}. Below demonstrates with random data.

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 (save as 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 

html_string = ''' {table} . ''' # 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 (references df_style.css, assumed in same directory; see class argument in table) ... 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 0 讨论(0) 查看其它4个回答 发布评论: 提交评论  加载中... 验证码  看不清? 提交回复 热议问题