"Zebra Tables" in IPython Notebook?

Question

I'm building some interactive workflows in IPython using the fantastic Notebook for interactive analysis and Pandas.

Some of the tables I'm displaying would be much easier to read with a little bit of formatting. I'd really like something like "zebra tables" where every other row is shaded. I read here about how this formatting can be implemented via css. Is there a really straight forward way to apply a css to an IPython Notebook and then have tables rendered using the style sheet?

score 13 · Accepted Answer · answered May 25 '12 at 21:01

You can run arbitrary javascript (with jQuery) either in markdown cells inside <script> tags, or via IPython's IPython.core.display.Javascript class. With these, you can manipulate (or ruin) the document to your heart's content, including adding stylesheets.

For instance, the following will stripe appropriately classed tables:

<script type="text/javascript">
    $('head').append(
        "<style type='text/css'>tr.odd{background-color: #def}</style>"
    );
</script>

If you just stick that in one of your markdown cells, then it will apply to everything on the page.

Or, you might run the same code (minus <script> tags) from Python in a code cell:

from IPython.core.display import Javascript, display
display(Javascript("""
    $('head').append(
        "<style type='text/css'>tr.odd{background-color: #def}</style>"
    );
"""))

But doing this will only affect your tables that are appropriately classed, which is up to the code that is writing the HTML (e.g. in Pandas).

It would be good to start doing some of this kind of stuff in pandas (assuming the API has somewhat stabilized) — Wes McKinney, May 28 '12 at 15:21
fyi: [this quesion](http://stackoverflow.com/questions/4977008/how-to-use-table-trodd-td-in-html) has some nifty css3 for 'zebra tables'. — drevicko, Feb 10 '13 at 04:37

score 7 · Answer 2 · answered Dec 27 '12 at 06:32

7

I just released a project called ipy_table to provide an easy mechanism for creating richly formatted data tables in IPython notebooks (colors, borders, alignment, float formatting, zebra shading, etc.). The project is at https://github.com/epmoyer/ipy_table, and you can get a good idea of it's capabilities from https://github.com/epmoyer/ipy_table/blob/master/ipy_table-Reference.pdf.

answered Dec 27 '12 at 06:32

Eric Moyer

591
3
3

your pdf link is broken – denfromufa Oct 20 '15 at 13:57

score 2 · Answer 3 · edited May 23 '17 at 11:46

if you are interested in building grids/tables using slickgrid, but in python, then you maybe be interested in qgrid. This works from ipython notebooks using pandas.

https://github.com/quantopian/qgrid

Another option is using handsontable like this:

http://nbviewer.ipython.org/gist/bollwyvl/6ad208084744c60dda65

Yet another, 3rd option using pandas only is here:

Pandas Dataframes to_html: Highlighting table rows

Fourth option is to use template engine such as jinja2 like this:

Pandas Dataframe display on a webpage

http://nbviewer.ipython.org/github/pydata/pandas/blob/8c4f9571c08d5122f1d9e40c43dadab8b6f10bf5/pandas_HTML_styling.ipynb

Finally there is an open issue in pandas to render based on templates:

https://github.com/pydata/pandas/issues/3190

P.S. Python guru from Google suggests this minimal solution (avoid any third-party dependency):

https://stackoverflow.com/a/1475453/2230844

or read his book:

Python in a Nutshell, 2nd Edition, Chapter 23 Structured Text: HTML

Thanks for the hint on the qgrid package. – rbrito Oct 20 '15 at 06:30 — rbrito, Oct 20 '15 at 06:30
qgrid has an open issue with coloring cells – denfromufa Oct 20 '15 at 13:48 — denfromufa, Oct 20 '15 at 13:48

"Zebra Tables" in IPython Notebook?

3 Answers3

Linked