Meghan Meghan - 4 months ago 119
CSS Question

Change the color of text within a pandas dataframe html table python using styles and css

I have a pandas dataframe:

arrays = [['Midland','Midland','Hereford','Hereford','Hobbs','Hobbs','Childress','Childress','Reese','Reese',
'San Angelo','San Angelo'],['WRF','MOS','WRF','MOS','WRF','MOS','WRF','MOS','WRF','MOS','WRF','MOS']]
tuples = list(zip(*arrays))
index = pd.MultiIndex.from_tuples(tuples)
df = pd.DataFrame(np.random.randn(12,4),index=arrays,columns=['00 UTC','06 UTC','12 UTC','18 UTC'])
df


The table that prints from this looks like this:enter image description here

I would like to be able to format this table better. Specifically, I would like to color all of the values in the 'MOS' rows a certain color and color the left two index/header columns as well as the top header row a different background color than the rest of the cells with values in them. Any ideas how I can do this?

Answer

This takes a few steps:

First import HTML and re

from IPython.display import HTML
import re

You can get at the html pandas puts out via the to_html method.

df_html = df.to_html()

Next we are going to generate a random identifier for the html table and style we are going to create.

random_id = 'id%d' % np.random.choice(np.arange(1000000))

Because we are going to insert some style, we need to be careful to specify that this style will only be for our table. Now let's insert this into the df_html

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

And create a style tag. This is really up to you. I just added some hover effect.

style = """
<style>
    table#{random_id} tr:hover {{background-color: #f5f5f5}}
</style>
""".format(random_id=random_id)

Finally, display it

HTML(style + df_html)

Function all in one.

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:
        style = re.sub(r'table(#\S+)?', 'table#%s' % random_id, style)

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

    return HTML(style + df_html)

Use it like this:

HTML_with_style(df.head())

enter image description here

HTML_with_style(df.head(), '<style>table {color: red}</style>')

enter image description here

style = """
<style>
    tr:nth-child(even) {color: green;}
    tr:nth-child(odd)  {color: aqua;}
</style>
"""
HTML_with_style(df.head(), style)

enter image description here

Learn CSS to go nuts!

Comments