Menu
I have a Pandas dataframe inside of a Jupyter / IPython notebook. The dataframe's style as an HTML table inside of Jupyter is pretty nice. The header row has bold style, the font is nice, and the table borders are thin.
I then export the dataframe to an HTML file (following instructions here and here):
df.to_html('myfile.html')
But the resulting HTML file's table styling is not good.
The HTML in that file is plain:
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>Id</th>
<th>Index</th>
<th>Feature</th>
<th>Timestamp</th>
<th>Feature2</th>
</tr>
</thead>
How do I modify the styling of this exported table directly from my Python / Pandas code?
283
I wrote a Python function that basically adds an HTML <style> to the dataframe's HTML representation so that the resulting HTML table looks nice.
import pandas as pd
def write_to_html_file(df, title='', filename='out.html'):
'''
Write an entire dataframe to an HTML file with nice formatting.
'''
result = '''
<html>
<head>
<style>
h2 {
text-align: center;
font-family: Helvetica, Arial, sans-serif;
}
table {
margin-left: auto;
margin-right: auto;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-size: 90%;
}
table tbody tr:hover {
background-color: #dddddd;
}
.wide {
width: 90%;
}
</style>
</head>
<body>
'''
result += '<h2> %s </h2>\n' % title
if type(df) == pd.io.formats.style.Styler:
result += df.render()
else:
result += df.to_html(classes='wide', escape=False)
result += '''
</body>
</html>
'''
with open(filename, 'w') as f:
f.write(result)
Here's the resulting HTML when you write it to an .html file. Note how the dataframe's to_html() output fits into the middle.
Below is some example usage of my function. I first load up a dataset from sklearn to demonstrate.
import numpy as np
import pandas as pd
from sklearn.datasets import load_iris
iris = load_iris()
data1 = pd.DataFrame(data=np.c_[iris['data'], iris['target']],
columns=iris['feature_names'] + ['target'])
data1.head()
In Jupyter / IPython Notebook, the table looks pretty nice:
I can write out the dataframe to an HTML file with the usual to_html() function like this:
data1.to_html('iris.html')
However, the result doesn't look good, as shown below. The border is thick and font is not pleasant because this is just a <table> ... </table> with no styling.
To make the dataframe look better in HTML, I used my function above.
write_to_html_file(data1, 'Iris data set', 'iris2.html')
The table looks much nicer now because I applied styling. I also added row highlighting.
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With