Hedaro Blog

Styling Pandas Dataframe Tables

Styling Pandas dataframe tables just got a bit simpler. Keep reading to learn the hidden gem found within the Jupyter Notebook that makes this all possible.

Now if you have played with the Jupyter Notebook and with Pandas you might have noticed that the default HTML tables are pretty basic. Most of us don't mind that since we are interested in the data and probaly not as much as how the data looks. But eventually you will be showing your notebook to someone and it is at this point where you start to look for ways to make your tables and charts look better.

This tutorial will show you how you can get your Pandas tables to look a bit better and it just takes a few lines of code to achieve.

Let's begin by importing pandas.

In [1]:
import pandas as pd
import sys

Here is what I'm currently set up with.

In [2]:
print('Python: ' + sys.version.split('|')[0])
print('Pandas: ' + pd.__version__)
Python: 3.5.1 
Pandas: 0.23.4

This tutorial is also available in video form. I try to go in more detail in the notebook but the video is worth watching.

In [3]:
from IPython.display import YouTubeVideo
YouTubeVideo("Eiz4bwggQDY")
Out[3]:

Here is a super basic dataframe we can use to show our example basic HTML table. It only has one column named hello and contains a few numbers.

Again, I really don't have an issue with how the table looks. But if this was the table used in a presentation, I would say it could use a little help.

In [4]:
df = pd.DataFrame({'hello':[345,657,9,5]})
df
Out[4]:
hello
0 345
1 657
2 9
3 5

Convert DataFrame to HTML

There are a couple of things we have to do to get our table ready for a presentation. We are going to need to import the Jupyter HTML function. This is going to help us translate the HTML code we will generate and render it on the web page.

This is very similar to the YouTube import we did earlier.

In [5]:
from IPython.display import HTML

Now that we have that complete, Pandas actually has the ability to convert a dataframe to an HTML table. By doing this we have the option to apply some CSS to our dataframe. If you are not familiar with CSS (Cascading Style Sheets) do not worry. In the web programming world, CSS helps us style the fonts, tables, and text we place in a web page. We are going to leverage this technology and apply some CSS to our dataframe.

The .to_html simply gets our dataframe and converts it to a very basic HTML table as shown below.

In [6]:
df.to_html()
Out[6]:
'\n  \n    \n      \n      \n    \n  \n  \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n    \n      \n      \n    \n  \n
hello
0345
1657
29
35
'

If we wanted to actually render the HTML code in the notebook, we need make use of the HTML function we imported a few code cells ago.

Notice we get the exact same looking dataframe as before.

In [7]:
HTML(df.to_html())
Out[7]:
hello
0 345
1 657
2 9
3 5

So how are we going to modify the HTML code or add some CSS to our dataframe?

Well, before we continue you have to know the secret gem that comes with the Jupyter notebook...

The Jupyter Notebook uses a special front-end framework called Boostrap. This means the entire Bootrap library is available to you and me. This means we can take advantage of any STYLING that comes with the Bootstrap framework. This means we can apply styles to HTML tables that come with Bootstrap. This means we can EASILY style our dataframes. Are you getting what I am saying?

Apply CSS to DataFrame

If you go to the tables section you will notice that the Bootstap framework allows you to style tables. Hint. Hint.

To apply the styles you need to simply make use of the class parameter. That's it!


  ...

So does the pandas .to_html function allow us to pass in classes? YES YES YES!

Let's give it a try.

In [8]:
HTML(df.to_html(classes='table table-striped'))
Out[8]:
hello
0 345
1 657
2 9
3 5
In [9]:
HTML(df.to_html(classes='table table-bordered'))
Out[9]:
hello
0 345
1 657
2 9
3 5
In [10]:
HTML(df.to_html(classes='table table-hover'))
Out[10]:
hello
0 345
1 657
2 9
3 5
In [11]:
HTML(df.to_html(classes='table table-condensed'))
Out[11]:
hello
0 345
1 657
2 9
3 5

We can also combine classes like shown below.

In [12]:
HTML(df.to_html(classes='table table-striped table-bordered table-hover table-condensed'))
Out[12]:
hello
0 345
1 657
2 9
3 5

Ans that's a wrap. As you can see, we can easily get our dataframe tables to look a bit cleaner and nicer. So if you are ever in a situation where you are presenting some data, here is an option to get your dataframes looking pretty. On top of all that, the extra code you had to write may may you look smarter.

This tutorial was created by HEDARO

pandas

Comments