CODEWITHSUNDEEP
pythonhtmlpandashtml-tabledisplay
cpeusteuche
cpeusteuche

Reputation: 349

Python dataframe HTML display outside jupyter

I would like to create a HTML file (say 'my_file.html') containing a dataframe and I would like to have a rending similar to Jupyter's dataFrame, ie

from IPython.display import display
from pandas import Timestamp
df = pd.DataFrame({'new': {Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): -0.0},
                   'old': {Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): -0.0},
                   'diff':{Timestamp('2008-09-01 00:00:00'): 0.0,
                           Timestamp('2008-09-02 00:00:00'): 0.0}})
display(df)

But when I do 

df.to_html('my_file.html')

The rending is a simple table without Jupyter formatting

<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead th {
        text-align: right;
    }
</style>
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: center;">
      <th></th>
      <th>new</th>
      <th>old</th>
      <th>diff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2008-09-01</th>
      <td>0.0000</td>
      <td>0.0000</td>
      <td>0.0000</td>
    </tr>
    <tr>
      <th>2008-09-02</th>
      <td>-0.0000</td>
      <td>-0.0000</td>
      <td>0.0000</td>
    </tr>
  </tbody>
</table>
</div>

Any idea how to amend the code to make the display similar to Jupyter?

Upvotes: 1

Views: 1676

Answers (1)

gdlmx
gdlmx

Reputation: 6789

The Jupyter CSS style sheet is the reason for the beautiful table. You can copy the relevant css rules from the index.css file of Jupyter. After crafting the style sheet, wrap the output of df.to_html() inside a <div>.

<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<!-- Output of df.to_html() -->
</div>

Here are the crafted style sheet with your example output:

/* jupyterlab/packages/theme-light-extension/style/variables.css */
:root {
  --jp-ui-font-color0: rgba(0, 0, 0, 1);
  --jp-ui-font-color1: rgba(0, 0, 0, 0.87);
  --jp-layout-color0: white;
  --jp-rendermime-error-background: #fdd;
  --jp-rendermime-table-row-background: #ddd;
  --jp-rendermime-table-row-hover-background: #aaa;
}

/* Tables */
.jp-RenderedHTMLCommon table {
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  color: var(--jp-ui-font-color1);
  font-size: 12px;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}

.jp-RenderedHTMLCommon thead {
  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
  vertical-align: bottom;
}

.jp-RenderedHTMLCommon td,
.jp-RenderedHTMLCommon th,
.jp-RenderedHTMLCommon tr {
  vertical-align: middle;
  padding: 0.5em 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}

.jp-RenderedMarkdown.jp-RenderedHTMLCommon td,
.jp-RenderedMarkdown.jp-RenderedHTMLCommon th {
  max-width: none;
}

:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon td,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon th,
:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon tr {
  text-align: right;
}

.jp-RenderedHTMLCommon th {
  font-weight: bold;
}

.jp-RenderedHTMLCommon tbody tr:nth-child(odd) {
  background: var(--jp-layout-color0);
}

.jp-RenderedHTMLCommon tbody tr:nth-child(even) {
  background: var(--jp-rendermime-table-row-background);
}

.jp-RenderedHTMLCommon tbody tr:hover {
  background: var(--jp-rendermime-table-row-hover-background);
}

.jp-RenderedHTMLCommon table {
  margin-bottom: 1em;
}

.jp-RenderedHTMLCommon p {
  text-align: left;
  margin: 0px;
}

.jp-RenderedHTMLCommon p {
  margin-bottom: 1em;
}
<div class="p-Widget jp-RenderedHTMLCommon jp-RenderedHTML jp-mod-trusted jp-OutputArea-output" data-mime-type="text/html">
<style scoped="">
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }

    .dataframe tbody tr th {
        vertical-align: top;
    }

    .dataframe thead th {
        text-align: right;
    }
</style>
<table class="dataframe" border="1">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>new</th>
      <th>old</th>
      <th>diff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2008-09-01</th>
      <td>0.0</td>
      <td>0.0</td>
      <td>0.0</td>
    </tr>
    <tr>
      <th>2008-09-02</th>
      <td>-0.0</td>
      <td>-0.0</td>
      <td>0.0</td>
    </tr>
  </tbody>
</table>
</div>

Upvotes: 3

Related Questions