How to change the DataFrame print style in IPython notebook

Question

I'm looking to add some style to my notebook. I already understood that the way to go is by adding custom.css file under the desired profile dir (as explained here). I have a css file and an example of HTML code which uses it (credit for the designer). You can see the tables below:

I would like to set those tables styles as the default styles especially when I use pandas dataframes. Question is - What should by written in the css file to make those designs the default design IPython is using to plot tables?

This could be helpful for you: github.com/pydata/pandas/issues/3190 — TomAugspurger
– TomAugspurger, Commented Feb 13, 2014 at 17:48
I was wondering whether it was in pandas devs hands. I though pandas just returning an appropriate HTML code, and IPython is responsible for rendering according to its defualt CSS file. I thought of replacing the appropriate CSS entry with the code I have. Can you elaborate on who is responsible for the styling and what is the flow when I do df.head() for example? — idoda
– idoda, Commented Feb 13, 2014 at 19:41
IPython displays what's defined in an object's __rerp_html__. Here's the DataFrames: github.com/pydata/pandas/blob/master/pandas/core/frame.py#L464 github.com/pydata/pandas/blob/master/pandas/core/format.py#L504 May also be helpful, but I don't know how flexible it is. I haven't played with it at all. — TomAugspurger
– TomAugspurger, Commented Feb 13, 2014 at 20:10
Going to give it a go and try it out soon. I'll appreciate it if you could keep track of the comments here in case I have more questions.. Here is the first one: in the _repr_html_ code you linked, the return is return ('<div style="max-height:1000px;' 'max-width:1500px;overflow:auto;">\n' + self.to_html(max_rows=max_rows, max_cols=max_cols, show_dimensions=show_dimensions) + '\n</div>') What Im wondering is whether the "style" attribute controls the table style.. — idoda
– idoda, Commented Feb 14, 2014 at 8:15

patricktokeeffe · Accepted Answer · 2014-05-01 02:03:37Z

1

If I understand correctly, any valid CSS can be placed into the custom.css file. Take a look at the source provided with the "Top designs" article, specifically the style.css file.

That article used ids to achieve different formatting for each table but you could just apply the desired CSS styles directly to the appropriate HTML tags. For instance, your image is from their "Box 3" example, which used the ids box-table-a and box-table-b and the corresponding formatting is

#box-table-a
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}
#box-table-a th
{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;
}
#box-table-a td
{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid transparent;
}
#box-table-a tr:hover td
{
    background: #d0dafd;
    color: #339;
}

#box-table-b
{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: center;
    border-collapse: collapse;
    border-top: 7px solid #9baff1;
    border-bottom: 7px solid #9baff1;
}
#box-table-b th
{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #e8edff;
    border-right: 1px solid #9baff1;
    border-left: 1px solid #9baff1;
    color: #039;
}
#box-table-b td
{
    padding: 8px;
    background: #e8edff; 
    border-right: 1px solid #aabcfe;
    border-left: 1px solid #aabcfe;
    color: #669;
}

My CSS is a little rusty but I believe all you need to do is:

Choose either style a or b
Remove the entries not related to the chosen style
Replace the standalone #box-table-X with table
Remove the #box-table-X prefixes from other styles
Place resulting CSS code inbetween <style>..</style> tags in your custom.css file

P.S. this is basic CSS behavior -- applying styles directly to HTML tags. You could also specify formatting on a per-table basis by skipping steps 3 and 4 and placing an ID in the opening table tag (in the markdown cell):

<table id="box-table-a">
    ...

Edit: smashingmagazine.com doesn't like having its resources linked offsite; visit their article to get the source.zip file.

edited May 1, 2014 at 2:03

answered May 1, 2014 at 0:56

patricktokeeffe

1,1272 gold badges12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

patricktokeeffe Over a year ago

Indeed... guess they don't like having their resources linked off-site. Understandable. You'll have to visit the article.

idoda Over a year ago

Correct me if I'm wrong, but you are suggesting to use html code in the notebook. That is fine but the tables I'm working with are coming from pandas dataframe methods. What I want is a default table rendering, without using html code.

patricktokeeffe Over a year ago

@idoda, steps 1-5 result in CSS formatting applied to all HTML tables, pandas derived or not. Aside from 'max-height' and 'min-width' styles, there doesn't appear to be any formatting in the results of DataFrame.__repr_html__. If pandas tables contained a class tag you could target just them with CSS styles but applying formatting directly to the table tags is probably your only option.

Collectives™ on Stack Overflow

How to change the DataFrame print style in IPython notebook

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related