Based on https://stackoverflow.com/a/78906808/8508004 and https://stackoverflow.com/a/78990112/8508004 (meant for JupyterLab Dark Theme)
I happened to be using sessions launched fron this gist to run it. I didn't expect ipywidgets to work when I got to code involving that and was surpised it did.
Most of the code here assumes an active Python kernel. (Click here if you need one where you can upload this notebook.)
See under the first example in the section 'Back to widget examples', if you are instested in exploring options for static document viewing.
#necessary to prepare environment if launching session from https://gist.github.com/jtpio/35a72862c8be13dee31b61ebac2d9786 ; may not bee needed if you are running elsewhere
%pip install pandas -q
Note: you may need to restart the kernel to use updated packages.
import pandas as pd
df = pd.DataFrame({'planet': ['Earth', 'Moon', 'Mars'], 'mass_to_earth': [1, 0.606, 0.107]})
df_styled = df.style.set_table_styles(
[
{'selector': 'table', 'props': [('border-collapse', 'collapse')]},
{'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},
{'selector': 'td', 'props': [('border', '1px solid black')]},
{'selector': 'td, th', 'props': [('padding', '8px')]}
]
)
df_styled
| planet | mass_to_earth | |
|---|---|---|
| 0 | Earth | 1.000000 |
| 1 | Moon | 0.606000 |
| 2 | Mars | 0.107000 |
import pandas as pd
df = pd.DataFrame({'planet': ['Earth', 'Moon', 'Mars'], 'mass_to_earth': [1, 0.606, 0.107]})
df_styled = df.style.set_table_styles(
[
{'selector': 'table', 'props': [('border-collapse', 'collapse')]},
{'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},
{'selector': 'td', 'props': [('border', '1px solid black')]},
{'selector': 'td, th', 'props': [('padding', '8px')]}
]
)
#df_styled.to_html("styled_table.html")
html_file_name = "styled_table.html"
df_styled.to_html(html_file_name)
html_file_name = "styled_table.html"
with open(html_file_name, 'r') as thefile:
html_text=thefile.read()
from IPython.display import HTML
display(HTML(html_text))
| planet | mass_to_earth | |
|---|---|---|
| 0 | Earth | 1.000000 |
| 1 | Moon | 0.606000 |
| 2 | Mars | 0.107000 |
IPython.display.display(IPython.display.HTML(htmlString)) and IPython.display.display(ipywidgets.widgets.HTML(htmlString) being different¶from IPython.display import HTML
display(HTML(html_text))
| planet | mass_to_earth | |
|---|---|---|
| 0 | Earth | 1.000000 |
| 1 | Moon | 0.606000 |
| 2 | Mars | 0.107000 |
from IPython.display import HTML, display
from ipywidgets import widgets, Layout, HTML
tbl1 = html_text
tbl2 = html_text
box_layout = Layout(display='flex',
flex_flow='row',
justify_content='space-around',
width='450px'
)
display(HTML(tbl1))
#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)
#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)])
#display(hbox1)
HTML(value='<style type="text/css">\n#T_2fae1 table {\n border-collapse: collapse;\n}\n#T_2fae1 th {\n borde…
In that one HTML() comes from ipywidgets.
Taking that, let's put from IPython.display import HTML, display as the last code invoking HTML.
from IPython.display import HTML, display
from ipywidgets import widgets, Layout, HTML
from IPython.display import HTML, display
tbl1 = html_text
tbl2 = html_text
box_layout = Layout(display='flex',
flex_flow='row',
justify_content='space-around',
width='450px'
)
display(HTML(tbl1))
#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)
#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)])
#display(hbox1)
| planet | mass_to_earth | |
|---|---|---|
| 0 | Earth | 1.000000 |
| 1 | Moon | 0.606000 |
| 2 | Mars | 0.107000 |
It's shows that comment is true!
That last one has HTML() coming from from IPython.display import HTML, and then note that in that one, I get back the result I had when I ran from IPython.display import HTML; display(HTML(html_text)) above.
import pandas as pd
df = pd.DataFrame({'Trace #': [0,1,2,3,4], 1: [1,1,1,1,1], 2: [3,0,0,2,2], 3: [3,1,1,0,1], 4: [3,1,0,1,2], 5: [3,0,0,2,2]})
def color_based_on_values(items, dkrb='', gb=''):
bckgrnd_per_row_items = []
for item in items:
if item == 3:
bckgrnd_per_row_items.append(dkrb)
elif item in [0,1]:
bckgrnd_per_row_items.append(gb)
else:
bckgrnd_per_row_items.append('')
return bckgrnd_per_row_items
s2 = df.style.apply(color_based_on_values, dkrb='background-color:darkred;',gb='background-color:darkgreen;', axis = 1, subset=df.columns[1:]).hide(axis="index") # hiding index
# based on https://stackoverflow.com/a/77080840/8508004
s2.set_caption("Automaton 1 Evaluation<br/>State Seen At Step") # based on https://stackoverflow.com/a/57958638/8508004
'''
s2 = s2.set_table_styles(
[
{'selector': 'table', 'props': [('border-collapse', 'collapse')]},
{'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},
{'selector': 'td', 'props': [('border', '1px solid black')]},
{'selector': 'td, th', 'props': [('padding', '8px')]}
]
)
'''
#df_styled.to_html("styled_table.html")
html_file_name = "styled_table.html"
s2.to_html(html_file_name)
with open(html_file_name, 'r') as thefile:
html_text=thefile.read()
s2
| Trace # | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
| 0 | 1 | 3 | 3 | 3 | 3 |
| 1 | 1 | 0 | 1 | 1 | 0 |
| 2 | 1 | 0 | 1 | 0 | 0 |
| 3 | 1 | 2 | 0 | 1 | 2 |
| 4 | 1 | 2 | 1 | 2 | 2 |
Note that output above will render stylized in the static version of this notebook nbviewer. (See for yourself here on bviewer.) (It will look plain currently in GitHub's rendering as it supports much less functionality than nbviewer.)
Most of the code here though is assuming an active Python kernel. If you see something like Box(children=(HTML(value='<sty, it is becaue you don't have that. (But I am adding some notes here on abilities in the static output rendering.)
You can also place any HTML string below %%HTML in a cell here and run it and that will render in nbviewer later, albeit may look bad depeending on CSS in it, whereas it won't be stylized in any way (no color in current example) on GitHub's rendering of the static document.
from IPython.display import HTML, display
from ipywidgets import widgets, Layout, HTML
tbl1 = html_text
tbl2 = html_text
box_layout = Layout(display='flex',
flex_flow='row',
justify_content='space-around',
width='450px'
)
#display(HTML(tbl1))
hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)
display(hbox1)
Box(children=(HTML(value='<style type="text/css">\n#T_56643_row0_col1, #T_56643_row1_col1, #T_56643_row1_col2,…
import pandas as pd
df = pd.DataFrame({'Trace #': [0,1,2,3,4], 1: [1,1,1,1,1], 2: [3,0,0,2,2], 3: [3,1,1,0,1], 4: [3,1,0,1,2], 5: [3,0,0,2,2]})
def color_based_on_values(items, dkrb='', gb=''):
bckgrnd_per_row_items = []
for item in items:
if item == 3:
bckgrnd_per_row_items.append(dkrb)
elif item in [0,1]:
bckgrnd_per_row_items.append(gb)
else:
bckgrnd_per_row_items.append('')
return bckgrnd_per_row_items
s2 = df.style.apply(color_based_on_values, dkrb='background-color:darkred;',gb='background-color:darkgreen;', axis = 1, subset=df.columns[1:]).hide(axis="index") # hiding index
# based on https://stackoverflow.com/a/77080840/8508004
s2.set_caption("Automaton 1 Evaluation<br/>State Seen At Step") # based on https://stackoverflow.com/a/57958638/8508004
s2 = s2.set_table_styles(
[
{'selector': 'table', 'props': [('border-collapse', 'collapse')]},
{'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},
{'selector': 'td', 'props': [('border', '1px solid black')]},
{'selector': 'td, th', 'props': [('padding', '8px')]}
]
)
#df_styled.to_html("styled_table.html")
html_file_name = "styled_table.html"
s2.to_html(html_file_name)
with open(html_file_name, 'r') as thefile:
html_text=thefile.read()
s2
| Trace # | 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|---|
| 0 | 1 | 3 | 3 | 3 | 3 |
| 1 | 1 | 0 | 1 | 1 | 0 |
| 2 | 1 | 0 | 1 | 0 | 0 |
| 3 | 1 | 2 | 0 | 1 | 2 |
| 4 | 1 | 2 | 1 | 2 | 2 |
from IPython.display import HTML, display
from ipywidgets import widgets, Layout, HTML
tbl1 = html_text
tbl2 = html_text
box_layout = Layout(display='flex',
flex_flow='row',
justify_content='space-around',
width='450px'
)
#display(HTML(tbl1))
hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)
display(hbox1)
Box(children=(HTML(value='<style type="text/css">\n#T_4e366 table {\n border-collapse: collapse;\n}\n#T_4e366…
...I still need to flesh out a little more how to progammatically go from that to code like below, but that's the gist of piecing it all together from data and code in Python /Pandas to HTML table with complex formatting...
(meant for JupyterLab Dark Theme)
Remember that running this code will mess with the settings above because uses CSS elements they have SO ONLY RUN THIS WHEN YOU DON'T CARE ABOUT HOW OUTPUT ABOVE LOOKS ANY LONGER.
s='''<html><style>
table {
border: 4px solid DodgerBlue;
border-collapse: collapse;
width: 100%;
}
td, th {
border: none;
padding: 5px;
}
caption {
color: white;
padding: 5px;
}
.primary-caption {
background-color: black;
}
.secondary-caption {
background-color: DodgerBlue;
border-bottom: 1px solid black;
}
thead {
background-color: DodgerBlue;
color: white;
}
.table-header {
border-top: 1px solid black;
}
.cp {background-color:DarkGreen; color: white; text-align:center;}
.cf {background-color:DarkRed; color: white; text-align:center;}
</style>
<table>
<caption class="primary-caption">Automaton 1 Evaluation</caption>
<caption class="secondary-caption">State Seen At Step</caption>
<thead class="table-header">
<tr><th>Trace #</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>
</thead>
<tbody>
<tr><td style="text-align:center;">0</td><td class="cp">1</td><td class="cf">3</td><td class="cf">3</td><td class="cf">3</td><td class="cf">3</td></tr>
<tr><td style="text-align:center;">1</td><td class="cp">1</td><td class="cp">0</td><td class="cp">1</td><td class="cp">1</td><td class="cp">0</td></tr>
<tr><td style="text-align:center;">2</td><td class="cp">1</td><td class="cp">0</td><td class="cp">1</td><td class="cp">0</td><td class="cp">0</td></tr>
<tr><td style="text-align:center;">3</td><td class="cp">1</td><td>2</td><td class="cp">0</td><td class="cp">1</td><td>2</td></tr>
<tr><td style="text-align:center;">4</td><td class="cp">1</td><td>2</td><td class="cp">1</td><td>2</td><td>2</td></tr>
</tbody>
</table></html>'''
from IPython.display import HTML, display
from ipywidgets import widgets, Layout, HTML
tbl1 = s
tbl2 = s
box_layout = Layout(display='flex',
flex_flow='row',
justify_content='space-around',
width='450px'
)
hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)
display(hbox1)
Box(children=(HTML(value='<html><style>\n table {\n border: 4px solid DodgerBlue;\n border-co…
If you change the CSS tags settings in above code, each time you need to restart kernel and refersh the browser page (COMMAND+SHFIT+R in Google Chrome on a Mac) to see the full effect.
It will mess up the look of earlier examples in this notebook.
Enjoy!