Applying styling to Pandas dataframe saved to HTML file

Question

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?

Answer 1

Option A

You can use the border-collapse CSS property with the .render() method from the Styler object.

[for Pandas >= 1.4 use Styler.to_html()]

You pass the borders style with .style.set_table_styles().

Example that works on Pandas 1.1.3:

import pandas as pd
from sklearn.datasets import load_iris

iris = load_iris()
df = pd.DataFrame(iris.data, columns=iris.feature_names)
dh = df.head()

borders = [{
              'selector': 'td, th, table'
            , 'props'   : [  ('border', '1px solid lightgrey')
                           , ('border-collapse', 'collapse')
                          ]
            }]


html_fragment = dh.style.hide_index().set_table_styles(borders).render()

html_fragment renders to:

<style  type="text/css" >
    #T_da4a1131_90ff_11ec_9603_dcfb48c86a17 td, th, table {
          border: 1px solid lightgrey;
          border-collapse: collapse;
    }</style><table id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17" ><thead>    <tr>        <th class="col_heading level0 col0" >sepal length (cm)</th>        <th class="col_heading level0 col1" >sepal width (cm)</th>        <th class="col_heading level0 col2" >petal length (cm)</th>        <th class="col_heading level0 col3" >petal width (cm)</th>    </tr></thead><tbody>
                <tr>
                                <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row0_col0" class="data row0 col0" >5.100000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row0_col1" class="data row0 col1" >3.500000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row0_col2" class="data row0 col2" >1.400000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row0_col3" class="data row0 col3" >0.200000</td>
            </tr>
            <tr>
                                <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row1_col0" class="data row1 col0" >4.900000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row1_col1" class="data row1 col1" >3.000000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row1_col2" class="data row1 col2" >1.400000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row1_col3" class="data row1 col3" >0.200000</td>
            </tr>
            <tr>
                                <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row2_col0" class="data row2 col0" >4.700000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row2_col1" class="data row2 col1" >3.200000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row2_col2" class="data row2 col2" >1.300000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row2_col3" class="data row2 col3" >0.200000</td>
            </tr>
            <tr>
                                <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row3_col0" class="data row3 col0" >4.600000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row3_col1" class="data row3 col1" >3.100000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row3_col2" class="data row3 col2" >1.500000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row3_col3" class="data row3 col3" >0.200000</td>
            </tr>
            <tr>
                                <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row4_col0" class="data row4 col0" >5.000000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row4_col1" class="data row4 col1" >3.600000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row4_col2" class="data row4 col2" >1.400000</td>
                        <td id="T_da4a1131_90ff_11ec_9603_dcfb48c86a17row4_col3" class="data row4 col3" >0.200000</td>
            </tr>
    </tbody></table>

which gets displayed as (on Chromium 85.0):

Note that the syntax for passing style properties in later versions for Pandas has slightly changed.

Option B

In case you want something quicker without tinkering too much with CSS, you can use:

.to_html(border=0) from the DataFrame object, which sets <table border="0" >.

Using the code above:

html_pure = dh.to_html(border=0, index=False)

which renders as:

<table border="2" class="dataframe">\n  <thead>\n    <tr style="text-align: right;">\n      <th>sepal length (cm)</th>\n      <th>sepal width (cm)</th>\n      <th>petal length (cm)</th>\n      <th>petal width (cm)</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td>5.1</td>\n      <td>3.5</td>\n      <td>1.4</td>\n      <td>0.2</td>\n    </tr>\n    <tr>\n      <td>4.9</td>\n      <td>3.0</td>\n      <td>1.4</td>\n      <td>0.2</td>\n    </tr>\n    <tr>\n      <td>4.7</td>\n      <td>3.2</td>\n      <td>1.3</td>\n      <td>0.2</td>\n    </tr>\n    <tr>\n      <td>4.6</td>\n      <td>3.1</td>\n      <td>1.5</td>\n      <td>0.2</td>\n    </tr>\n    <tr>\n      <td>5.0</td>\n      <td>3.6</td>\n      <td>1.4</td>\n      <td>0.2</td>\n    </tr>\n  </tbody>\n</table>

and is useful if you want to style your tables externally and without having too much generated clutter in your table html code.

html_pure displays like:

LBNL, tables and style properties have always been tricky.

You may want to spend some time with the html inspector inside your browser to see what's really happening.

The code above works generally fine on a pretty good array of (modern) browsers/applications.

Answer 2

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.