Color rows of pandas dataframe and convert to HTML table

Question

I am trying to show a pandas dataframe using flask. I was successfully doing so, until I decided to colour some of the dataframe's rows. In particular I fail when I apply the to_html() method of pandas.

The following code gets a table with some rows colored in yellow:

import pandas as pd
import numpy as np

np.random.seed(24)
df = pd.DataFrame({'A': np.linspace(1, 10, 10)})

df = pd.concat([df, pd.DataFrame(np.random.randn(10, 4), columns=list('BCDE'))],
               axis=1)
df.iloc[0, 2] = np.nan

def highlight_greaterthan(s,threshold,column):
    is_max = pd.Series(data=False, index=s.index)
    is_max[column] = s.loc[column] >= threshold
    return ['background-color: yellow' if is_max.any() else '' for v in is_max]


df = df.style.apply(highlight_greaterthan,threshold=1.0,column=['C','B'], axis=1)
display(df)

Next, when I run to_html() it all crashes.

df_html = df.to_html

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
<ipython-input-28-4d0cc094240b> in <module>()
----> 1 df_html = df.to_html

AttributeError: 'Styler' object has no attribute 'to_html'

Any ideas on how I can preserve the color of the rows? thanks!

Answer 1

As the error message indicates, you are trying to use the DataFrame.to_html() method on a Styler object, since df.style.apply returns a Styler object and not a DataFrame.

The docs say you can use the render() method to render the HTML.

Something like this:

style1 = df.style.apply(highlight_greaterthan,threshold=1.0,column=['C','B'], axis=1)
df_html = style1.render()

The output of style1.render() would be:

<style  type="text/css" >
    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col4 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col0 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col1 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col2 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col3 {
            background-color:  yellow;
        }    #T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col4 {
            background-color:  yellow;
        }</style>  
<table id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3" > 
<thead>    <tr> 
        <th class="blank level0" ></th> 
        <th class="col_heading level0 col0" >A</th> 
        <th class="col_heading level0 col1" >B</th> 
        <th class="col_heading level0 col2" >C</th> 
        <th class="col_heading level0 col3" >D</th> 
        <th class="col_heading level0 col4" >E</th> 
    </tr></thead> 
<tbody>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row0" class="row_heading level0 row0" >0</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col0" class="data row0 col0" >1</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col1" class="data row0 col1" >1.32921</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col2" class="data row0 col2" >nan</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col3" class="data row0 col3" >-0.31628</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row0_col4" class="data row0 col4" >-0.99081</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row1" class="row_heading level0 row1" >1</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col0" class="data row1 col0" >2</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col1" class="data row1 col1" >-1.07082</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col2" class="data row1 col2" >-1.43871</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col3" class="data row1 col3" >0.564417</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row1_col4" class="data row1 col4" >0.295722</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row2" class="row_heading level0 row2" >2</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col0" class="data row2 col0" >3</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col1" class="data row2 col1" >-1.6264</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col2" class="data row2 col2" >0.219565</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col3" class="data row2 col3" >0.678805</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row2_col4" class="data row2 col4" >1.88927</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row3" class="row_heading level0 row3" >3</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col0" class="data row3 col0" >4</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col1" class="data row3 col1" >0.961538</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col2" class="data row3 col2" >0.104011</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col3" class="data row3 col3" >-0.481165</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row3_col4" class="data row3 col4" >0.850229</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row4" class="row_heading level0 row4" >4</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col0" class="data row4 col0" >5</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col1" class="data row4 col1" >1.45342</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col2" class="data row4 col2" >1.05774</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col3" class="data row4 col3" >0.165562</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row4_col4" class="data row4 col4" >0.515018</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row5" class="row_heading level0 row5" >5</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col0" class="data row5 col0" >6</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col1" class="data row5 col1" >-1.33694</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col2" class="data row5 col2" >0.562861</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col3" class="data row5 col3" >1.39285</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row5_col4" class="data row5 col4" >-0.063328</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row6" class="row_heading level0 row6" >6</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col0" class="data row6 col0" >7</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col1" class="data row6 col1" >0.121668</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col2" class="data row6 col2" >1.2076</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col3" class="data row6 col3" >-0.00204021</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row6_col4" class="data row6 col4" >1.6278</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row7" class="row_heading level0 row7" >7</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col0" class="data row7 col0" >8</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col1" class="data row7 col1" >0.354493</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col2" class="data row7 col2" >1.03753</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col3" class="data row7 col3" >-0.385684</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row7_col4" class="data row7 col4" >0.519818</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row8" class="row_heading level0 row8" >8</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col0" class="data row8 col0" >9</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col1" class="data row8 col1" >1.68658</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col2" class="data row8 col2" >-1.32596</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col3" class="data row8 col3" >1.42898</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row8_col4" class="data row8 col4" >-2.08935</td> 
    </tr>    <tr> 
        <th id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3level0_row9" class="row_heading level0 row9" >9</th> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col0" class="data row9 col0" >10</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col1" class="data row9 col1" >-0.12982</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col2" class="data row9 col2" >0.631523</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col3" class="data row9 col3" >-0.586538</td> 
        <td id="T_0189b640_cb1a_11e8_b68b_c8d3ffd26fc3row9_col4" class="data row9 col4" >0.29072</td> 
    </tr></tbody> 
</table>