Add CSS to the Jupyter Notebook using Pandas

Enhancing Jupyter Notebook DataFrames with Custom CSS Styling

By default, Jupyter Notebooks present DataFrames in a basic tabular format. However, leveraging Pandas' styling capabilities allows you to apply custom CSS to these tables, enhancing their visual appeal and readability. This approach is particularly beneficial when preparing notebooks for presentations or sharing insights with others.:contentReference[oaicite:6]{index=6}

Applying Basic CSS Styles to DataFrames

Pandas provides the set_table_styles() method, enabling you to define CSS properties for various table elements. For instance, to change the font family of the table data cells, you can use the following code:​:contentReference[oaicite:11]{index=11}

df.style.set_table_styles(
    [{'selector': 'td', 'props': [('font-family', 'Sans-serif')]}]
)

This code snippet targets the <td> elements and applies the specified font family.:contentReference[oaicite:14]{index=14}

Customizing Table Headers and Data Cells

You can further customize the appearance by styling both headers and data cells. The following example sets a background color for headers and changes the text color of data cells:​:contentReference[oaicite:19]{index=19}

df.style.set_table_styles(
    [
        {'selector': 'th', 'props': [('background', '#606060'), ('color', 'white')]},
        {'selector': 'td', 'props': [('color', 'blue')]}
    ]
)

This customization enhances the table's readability and visual hierarchy.:contentReference[oaicite:22]{index=22}

Hiding the Index Column

To declutter the table, you can hide the index column using the hide_index() method:​:contentReference[oaicite:25]{index=25}

df.style.set_table_styles(
    [
        {'selector': 'th', 'props': [('background', '#606060'), ('color', 'yellow')]},
        {'selector': 'td', 'props': [('color', 'red')]}
    ]
).hide_index()

This approach is useful when the index does not add value to the presentation of the data.:contentReference[oaicite:28]{index=28}

Conclusion

Customizing the appearance of DataFrames in Jupyter Notebooks using CSS enhances the presentation and readability of your data. By applying styles such as font changes, color adjustments, and hiding unnecessary elements, you can create more engaging and professional-looking notebooks. These styling techniques are particularly useful when sharing notebooks with colleagues or presenting data analyses.

---