Skip to content

Instantly share code, notes, and snippets.

@fomightez

fomightez/Tables_and_Styling_and_HTML_and_Pandas.ipynb

Last active August 20, 2025 17:30
Show Gist options
  • Save fomightez/82ed79a04e9de1281b151118c0e128ca to your computer and use it in GitHub Desktop.
Save fomightez/82ed79a04e9de1281b151118c0e128ca to your computer and use it in GitHub Desktop.
Download ZIP
Tables and Styling and HTML & Pandas
Display the source blob
Display the rendered blob
Raw
Tables_and_Styling_and_HTML_and_Pandas.ipynb
{
"cells": [
{
"cell_type": "markdown",
"id": "97300164-1c20-4b44-b9ee-1c097b8e441d",
"metadata": {},
"source": [
"### Tables and Styling and HTML & Pandas\n",
"\n",
"(also see [Pandas dataframe to Pandas Styler Object to Microsoft WORD via HTML](https://nbviewer.org/gist/fomightez/e926c030c6571d07e7630f6526e0b776) ) \n",
"Based on https://stackoverflow.com/a/78906808/8508004 and https://stackoverflow.com/a/78990112/8508004 (meant for JupyterLab Dark Theme)\n",
"\n",
"I happened to be using sessions [launched fron this gist](https://gist.github.com/jtpio/35a72862c8be13dee31b61ebac2d9786) to run it. I didn't expect ipywidgets to work when I got to code involving that and was surpised it did.\n",
"\n",
"Most of the code here assumes an active Python kernel. (Click [here](https://gist.github.com/jtpio/35a72862c8be13dee31b61ebac2d9786) if you need one where you can upload this notebook.) \n",
"See under the first example in [the section 'Back to widget examples'](https://nbviewer.org/gist/fomightez/82ed79a04e9de1281b151118c0e128ca#Back-to-widget-examples), if you are instested in exploring options for static document viewing."
]
},
{
"cell_type": "markdown",
"id": "8df4e80e-f51b-43ff-9a7f-dd074336007a",
"metadata": {},
"source": [
"------------"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "63a5a12b-cba8-4c6c-94e0-ba9fdf684995",
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Note: you may need to restart the kernel to use updated packages.\n"
]
}
],
"source": [
"#necessary to prepare environment if launching session from https://gist.github.com/jtpio/35a72862c8be13dee31b61ebac2d9786 ; may not bee needed if you are running elsewhere\n",
"%pip install pandas -q "
]
},
{
"cell_type": "markdown",
"id": "a7c501c9-e603-48e3-be63-670de5433983",
"metadata": {},
"source": [
"--------"
]
},
{
"cell_type": "code",
"execution_count": 1,
"id": "a0662b0d-6673-4834-9458-7afe637f3b56",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style type=\"text/css\">\n",
"#T_4e5c0 table {\n",
" border-collapse: collapse;\n",
"}\n",
"#T_4e5c0 th {\n",
" border: 3px solid black;\n",
" font-weight: bold;\n",
"}\n",
"#T_4e5c0 td {\n",
" border: 1px solid black;\n",
"}\n",
"#T_4e5c0 td {\n",
" padding: 8px;\n",
"}\n",
"#T_4e5c0 th {\n",
" padding: 8px;\n",
"}\n",
"</style>\n",
"<table id=\"T_4e5c0\">\n",
" <thead>\n",
" <tr>\n",
" <th class=\"blank level0\" >&nbsp;</th>\n",
" <th id=\"T_4e5c0_level0_col0\" class=\"col_heading level0 col0\" >planet</th>\n",
" <th id=\"T_4e5c0_level0_col1\" class=\"col_heading level0 col1\" >mass_to_earth</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th id=\"T_4e5c0_level0_row0\" class=\"row_heading level0 row0\" >0</th>\n",
" <td id=\"T_4e5c0_row0_col0\" class=\"data row0 col0\" >Earth</td>\n",
" <td id=\"T_4e5c0_row0_col1\" class=\"data row0 col1\" >1.000000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_4e5c0_level0_row1\" class=\"row_heading level0 row1\" >1</th>\n",
" <td id=\"T_4e5c0_row1_col0\" class=\"data row1 col0\" >Moon</td>\n",
" <td id=\"T_4e5c0_row1_col1\" class=\"data row1 col1\" >0.606000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_4e5c0_level0_row2\" class=\"row_heading level0 row2\" >2</th>\n",
" <td id=\"T_4e5c0_row2_col0\" class=\"data row2 col0\" >Mars</td>\n",
" <td id=\"T_4e5c0_row2_col1\" class=\"data row2 col1\" >0.107000</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n"
],
"text/plain": [
"<pandas.io.formats.style.Styler at 0x7f7bcc4b3df0>"
]
},
"execution_count": 1,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"import pandas as pd\n",
"df = pd.DataFrame({'planet': ['Earth', 'Moon', 'Mars'], 'mass_to_earth': [1, 0.606, 0.107]})\n",
"df_styled = df.style.set_table_styles(\n",
" [\n",
"\n",
" {'selector': 'table', 'props': [('border-collapse', 'collapse')]},\n",
" {'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},\n",
" {'selector': 'td', 'props': [('border', '1px solid black')]},\n",
" {'selector': 'td, th', 'props': [('padding', '8px')]}\n",
" ]\n",
")\n",
"\n",
"df_styled"
]
},
{
"cell_type": "code",
"execution_count": 6,
"id": "a1d465fd-fb26-4ac3-bfe1-6cfb39fe4068",
"metadata": {},
"outputs": [],
"source": [
"import pandas as pd\n",
"df = pd.DataFrame({'planet': ['Earth', 'Moon', 'Mars'], 'mass_to_earth': [1, 0.606, 0.107]})\n",
"df_styled = df.style.set_table_styles(\n",
" [\n",
"\n",
" {'selector': 'table', 'props': [('border-collapse', 'collapse')]},\n",
" {'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},\n",
" {'selector': 'td', 'props': [('border', '1px solid black')]},\n",
" {'selector': 'td, th', 'props': [('padding', '8px')]}\n",
" ]\n",
")\n",
"\n",
"#df_styled.to_html(\"styled_table.html\")\n",
"html_file_name = \"styled_table.html\"\n",
"df_styled.to_html(html_file_name)"
]
},
{
"cell_type": "code",
"execution_count": 7,
"id": "a3606974-6b25-4284-879c-55530230ba37",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style type=\"text/css\">\n",
"#T_2fae1 table {\n",
" border-collapse: collapse;\n",
"}\n",
"#T_2fae1 th {\n",
" border: 3px solid black;\n",
" font-weight: bold;\n",
"}\n",
"#T_2fae1 td {\n",
" border: 1px solid black;\n",
"}\n",
"#T_2fae1 td {\n",
" padding: 8px;\n",
"}\n",
"#T_2fae1 th {\n",
" padding: 8px;\n",
"}\n",
"</style>\n",
"<table id=\"T_2fae1\">\n",
" <thead>\n",
" <tr>\n",
" <th class=\"blank level0\" >&nbsp;</th>\n",
" <th id=\"T_2fae1_level0_col0\" class=\"col_heading level0 col0\" >planet</th>\n",
" <th id=\"T_2fae1_level0_col1\" class=\"col_heading level0 col1\" >mass_to_earth</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th id=\"T_2fae1_level0_row0\" class=\"row_heading level0 row0\" >0</th>\n",
" <td id=\"T_2fae1_row0_col0\" class=\"data row0 col0\" >Earth</td>\n",
" <td id=\"T_2fae1_row0_col1\" class=\"data row0 col1\" >1.000000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_2fae1_level0_row1\" class=\"row_heading level0 row1\" >1</th>\n",
" <td id=\"T_2fae1_row1_col0\" class=\"data row1 col0\" >Moon</td>\n",
" <td id=\"T_2fae1_row1_col1\" class=\"data row1 col1\" >0.606000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_2fae1_level0_row2\" class=\"row_heading level0 row2\" >2</th>\n",
" <td id=\"T_2fae1_row2_col0\" class=\"data row2 col0\" >Mars</td>\n",
" <td id=\"T_2fae1_row2_col1\" class=\"data row2 col1\" >0.107000</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"html_file_name = \"styled_table.html\"\n",
"with open(html_file_name, 'r') as thefile:\n",
" html_text=thefile.read()\n",
"from IPython.display import HTML\n",
"display(HTML(html_text))"
]
},
{
"cell_type": "markdown",
"id": "7677ce69-ff7b-487c-aec2-90b00a752149",
"metadata": {},
"source": [
"##### Aside: investigating [this comment](https://stackoverflow.com/questions/78906586/formatting-html-tables-in-jupyter-notebook/78906808#comment139127462_78906808) about result for `IPython.display.display(IPython.display.HTML(htmlString))` and `IPython.display.display(ipywidgets.widgets.HTML(htmlString)` being different"
]
},
{
"cell_type": "code",
"execution_count": 8,
"id": "fd0b9697-59d8-4dab-b3f6-ba7be18056bd",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style type=\"text/css\">\n",
"#T_2fae1 table {\n",
" border-collapse: collapse;\n",
"}\n",
"#T_2fae1 th {\n",
" border: 3px solid black;\n",
" font-weight: bold;\n",
"}\n",
"#T_2fae1 td {\n",
" border: 1px solid black;\n",
"}\n",
"#T_2fae1 td {\n",
" padding: 8px;\n",
"}\n",
"#T_2fae1 th {\n",
" padding: 8px;\n",
"}\n",
"</style>\n",
"<table id=\"T_2fae1\">\n",
" <thead>\n",
" <tr>\n",
" <th class=\"blank level0\" >&nbsp;</th>\n",
" <th id=\"T_2fae1_level0_col0\" class=\"col_heading level0 col0\" >planet</th>\n",
" <th id=\"T_2fae1_level0_col1\" class=\"col_heading level0 col1\" >mass_to_earth</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th id=\"T_2fae1_level0_row0\" class=\"row_heading level0 row0\" >0</th>\n",
" <td id=\"T_2fae1_row0_col0\" class=\"data row0 col0\" >Earth</td>\n",
" <td id=\"T_2fae1_row0_col1\" class=\"data row0 col1\" >1.000000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_2fae1_level0_row1\" class=\"row_heading level0 row1\" >1</th>\n",
" <td id=\"T_2fae1_row1_col0\" class=\"data row1 col0\" >Moon</td>\n",
" <td id=\"T_2fae1_row1_col1\" class=\"data row1 col1\" >0.606000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_2fae1_level0_row2\" class=\"row_heading level0 row2\" >2</th>\n",
" <td id=\"T_2fae1_row2_col0\" class=\"data row2 col0\" >Mars</td>\n",
" <td id=\"T_2fae1_row2_col1\" class=\"data row2 col1\" >0.107000</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.display import HTML\n",
"display(HTML(html_text))"
]
},
{
"cell_type": "code",
"execution_count": 9,
"id": "7b18ecb9-a6d5-4d03-b5ef-e77d57d2b371",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "aec936f82ba246109b86ff7ccec45914",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"HTML(value='<style type=\"text/css\">\\n#T_2fae1 table {\\n border-collapse: collapse;\\n}\\n#T_2fae1 th {\\n borde…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.display import HTML, display\n",
"from ipywidgets import widgets, Layout, HTML\n",
"tbl1 = html_text\n",
"tbl2 = html_text\n",
"\n",
"box_layout = Layout(display='flex',\n",
" flex_flow='row',\n",
" justify_content='space-around',\n",
" width='450px'\n",
" )\n",
"\n",
"display(HTML(tbl1))\n",
"#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)\n",
"#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)])\n",
"#display(hbox1)"
]
},
{
"cell_type": "markdown",
"id": "9df53026-75f4-45b4-b97a-cc4b2b2a5dd6",
"metadata": {},
"source": [
"In that one `HTML()` comes from ipywidgets.\n",
"\n",
"Taking that, let's put `from IPython.display import HTML, display` as the last code invoking `HTML`."
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "a05e7919-e16d-40f4-b87a-13f68689da2d",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style type=\"text/css\">\n",
"#T_ab59e table {\n",
" border-collapse: collapse;\n",
"}\n",
"#T_ab59e th {\n",
" border: 3px solid black;\n",
" font-weight: bold;\n",
"}\n",
"#T_ab59e td {\n",
" border: 1px solid black;\n",
"}\n",
"#T_ab59e td {\n",
" padding: 8px;\n",
"}\n",
"#T_ab59e th {\n",
" padding: 8px;\n",
"}\n",
"</style>\n",
"<table id=\"T_ab59e\">\n",
" <thead>\n",
" <tr>\n",
" <th class=\"blank level0\" >&nbsp;</th>\n",
" <th id=\"T_ab59e_level0_col0\" class=\"col_heading level0 col0\" >planet</th>\n",
" <th id=\"T_ab59e_level0_col1\" class=\"col_heading level0 col1\" >mass_to_earth</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <th id=\"T_ab59e_level0_row0\" class=\"row_heading level0 row0\" >0</th>\n",
" <td id=\"T_ab59e_row0_col0\" class=\"data row0 col0\" >Earth</td>\n",
" <td id=\"T_ab59e_row0_col1\" class=\"data row0 col1\" >1.000000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_ab59e_level0_row1\" class=\"row_heading level0 row1\" >1</th>\n",
" <td id=\"T_ab59e_row1_col0\" class=\"data row1 col0\" >Moon</td>\n",
" <td id=\"T_ab59e_row1_col1\" class=\"data row1 col1\" >0.606000</td>\n",
" </tr>\n",
" <tr>\n",
" <th id=\"T_ab59e_level0_row2\" class=\"row_heading level0 row2\" >2</th>\n",
" <td id=\"T_ab59e_row2_col0\" class=\"data row2 col0\" >Mars</td>\n",
" <td id=\"T_ab59e_row2_col1\" class=\"data row2 col1\" >0.107000</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.display import HTML, display\n",
"from ipywidgets import widgets, Layout, HTML\n",
"from IPython.display import HTML, display\n",
"tbl1 = html_text\n",
"tbl2 = html_text\n",
"\n",
"box_layout = Layout(display='flex',\n",
" flex_flow='row',\n",
" justify_content='space-around',\n",
" width='450px'\n",
" )\n",
"\n",
"display(HTML(tbl1))\n",
"#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)\n",
"#hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)])\n",
"#display(hbox1)"
]
},
{
"cell_type": "markdown",
"id": "4a327587-e1c0-470b-b681-90cb73e28bea",
"metadata": {},
"source": [
"It's shows [that comment](https://stackoverflow.com/questions/78906586/formatting-html-tables-in-jupyter-notebook/78906808#comment139127462_78906808) is true!\n",
"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."
]
},
{
"cell_type": "markdown",
"id": "8c695279-761d-4098-b848-0ac207591a4b",
"metadata": {},
"source": [
"--------------------------------"
]
},
{
"cell_type": "markdown",
"id": "ad776802-8e4c-4566-a0aa-288446e2ff7c",
"metadata": {},
"source": [
"### Back to widget examples\n",
"##### Starting with styling background only (plus caption added)"
]
},
{
"cell_type": "code",
"execution_count": 3,
"id": "8ed10795-5e85-459d-a1be-bb901e82f359",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style type=\"text/css\">\n",
"#T_4491d_row0_col1, #T_4491d_row1_col1, #T_4491d_row1_col2, #T_4491d_row1_col3, #T_4491d_row1_col4, #T_4491d_row1_col5, #T_4491d_row2_col1, #T_4491d_row2_col2, #T_4491d_row2_col3, #T_4491d_row2_col4, #T_4491d_row2_col5, #T_4491d_row3_col1, #T_4491d_row3_col3, #T_4491d_row3_col4, #T_4491d_row4_col1, #T_4491d_row4_col3 {\n",
" background-color: darkgreen;\n",
"}\n",
"#T_4491d_row0_col2, #T_4491d_row0_col3, #T_4491d_row0_col4, #T_4491d_row0_col5 {\n",
" background-color: darkred;\n",
"}\n",
"</style>\n",
"<table id=\"T_4491d\">\n",
" <caption>Automaton 1 Evaluation<br/>State Seen At Step</caption>\n",
" <thead>\n",
" <tr>\n",
" <th id=\"T_4491d_level0_col0\" class=\"col_heading level0 col0\" >Trace #</th>\n",
" <th id=\"T_4491d_level0_col1\" class=\"col_heading level0 col1\" >1</th>\n",
" <th id=\"T_4491d_level0_col2\" class=\"col_heading level0 col2\" >2</th>\n",
" <th id=\"T_4491d_level0_col3\" class=\"col_heading level0 col3\" >3</th>\n",
" <th id=\"T_4491d_level0_col4\" class=\"col_heading level0 col4\" >4</th>\n",
" <th id=\"T_4491d_level0_col5\" class=\"col_heading level0 col5\" >5</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <td id=\"T_4491d_row0_col0\" class=\"data row0 col0\" >0</td>\n",
" <td id=\"T_4491d_row0_col1\" class=\"data row0 col1\" >1</td>\n",
" <td id=\"T_4491d_row0_col2\" class=\"data row0 col2\" >3</td>\n",
" <td id=\"T_4491d_row0_col3\" class=\"data row0 col3\" >3</td>\n",
" <td id=\"T_4491d_row0_col4\" class=\"data row0 col4\" >3</td>\n",
" <td id=\"T_4491d_row0_col5\" class=\"data row0 col5\" >3</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4491d_row1_col0\" class=\"data row1 col0\" >1</td>\n",
" <td id=\"T_4491d_row1_col1\" class=\"data row1 col1\" >1</td>\n",
" <td id=\"T_4491d_row1_col2\" class=\"data row1 col2\" >0</td>\n",
" <td id=\"T_4491d_row1_col3\" class=\"data row1 col3\" >1</td>\n",
" <td id=\"T_4491d_row1_col4\" class=\"data row1 col4\" >1</td>\n",
" <td id=\"T_4491d_row1_col5\" class=\"data row1 col5\" >0</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4491d_row2_col0\" class=\"data row2 col0\" >2</td>\n",
" <td id=\"T_4491d_row2_col1\" class=\"data row2 col1\" >1</td>\n",
" <td id=\"T_4491d_row2_col2\" class=\"data row2 col2\" >0</td>\n",
" <td id=\"T_4491d_row2_col3\" class=\"data row2 col3\" >1</td>\n",
" <td id=\"T_4491d_row2_col4\" class=\"data row2 col4\" >0</td>\n",
" <td id=\"T_4491d_row2_col5\" class=\"data row2 col5\" >0</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4491d_row3_col0\" class=\"data row3 col0\" >3</td>\n",
" <td id=\"T_4491d_row3_col1\" class=\"data row3 col1\" >1</td>\n",
" <td id=\"T_4491d_row3_col2\" class=\"data row3 col2\" >2</td>\n",
" <td id=\"T_4491d_row3_col3\" class=\"data row3 col3\" >0</td>\n",
" <td id=\"T_4491d_row3_col4\" class=\"data row3 col4\" >1</td>\n",
" <td id=\"T_4491d_row3_col5\" class=\"data row3 col5\" >2</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4491d_row4_col0\" class=\"data row4 col0\" >4</td>\n",
" <td id=\"T_4491d_row4_col1\" class=\"data row4 col1\" >1</td>\n",
" <td id=\"T_4491d_row4_col2\" class=\"data row4 col2\" >2</td>\n",
" <td id=\"T_4491d_row4_col3\" class=\"data row4 col3\" >1</td>\n",
" <td id=\"T_4491d_row4_col4\" class=\"data row4 col4\" >2</td>\n",
" <td id=\"T_4491d_row4_col5\" class=\"data row4 col5\" >2</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n"
],
"text/plain": [
"<pandas.io.formats.style.Styler at 0x7fdedafad9c0>"
]
},
"execution_count": 3,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"import pandas as pd\n",
"\n",
"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]})\n",
"def color_based_on_values(items, dkrb='', gb=''):\n",
" bckgrnd_per_row_items = []\n",
" for item in items:\n",
" if item == 3:\n",
" bckgrnd_per_row_items.append(dkrb)\n",
" elif item in [0,1]:\n",
" bckgrnd_per_row_items.append(gb)\n",
" else:\n",
" bckgrnd_per_row_items.append('') \n",
" return bckgrnd_per_row_items\n",
"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\n",
"# based on https://stackoverflow.com/a/77080840/8508004\n",
"s2.set_caption(\"Automaton 1 Evaluation<br/>State Seen At Step\") # based on https://stackoverflow.com/a/57958638/8508004\n",
"'''\n",
"s2 = s2.set_table_styles(\n",
" [\n",
"\n",
" {'selector': 'table', 'props': [('border-collapse', 'collapse')]},\n",
" {'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},\n",
" {'selector': 'td', 'props': [('border', '1px solid black')]},\n",
" {'selector': 'td, th', 'props': [('padding', '8px')]}\n",
" ]\n",
")\n",
"'''\n",
"#df_styled.to_html(\"styled_table.html\")\n",
"html_file_name = \"styled_table.html\"\n",
"s2.to_html(html_file_name)\n",
"with open(html_file_name, 'r') as thefile:\n",
" html_text=thefile.read()\n",
"s2"
]
},
{
"cell_type": "markdown",
"id": "bffc267e-0b54-499e-a1b9-f672b3a9b9bd",
"metadata": {},
"source": [
"Note that output above will render **stylized** in the static version of this notebook nbviewer. (See for yourself [here on bviewer](https://nbviewer.org/gist/fomightez/82ed79a04e9de1281b151118c0e128ca).) (It will look plain currently in GitHub's rendering as it supports much less functionality than nbviewer.) \n",
"**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.) \n",
"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."
]
},
{
"cell_type": "code",
"execution_count": 11,
"id": "ac4e1c17-fff7-4b2e-b30a-c9972a33e843",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "e6eab6c506224a97b0d6e66b32d5a9da",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"Box(children=(HTML(value='<style type=\"text/css\">\\n#T_56643_row0_col1, #T_56643_row1_col1, #T_56643_row1_col2,…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.display import HTML, display\n",
"from ipywidgets import widgets, Layout, HTML\n",
"tbl1 = html_text\n",
"tbl2 = html_text\n",
"\n",
"box_layout = Layout(display='flex',\n",
" flex_flow='row',\n",
" justify_content='space-around',\n",
" width='450px'\n",
" )\n",
"\n",
"#display(HTML(tbl1))\n",
"hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)\n",
"display(hbox1)"
]
},
{
"cell_type": "markdown",
"id": "37c818d0-af8e-4b6f-a077-e402a8291b11",
"metadata": {},
"source": [
"------\n",
"\n",
"##### Styling background and table properties"
]
},
{
"cell_type": "code",
"execution_count": 12,
"id": "ef2f750d-d16b-4765-846c-9124ffd5039f",
"metadata": {},
"outputs": [
{
"data": {
"text/html": [
"<style type=\"text/css\">\n",
"#T_4e366 table {\n",
" border-collapse: collapse;\n",
"}\n",
"#T_4e366 th {\n",
" border: 3px solid black;\n",
" font-weight: bold;\n",
"}\n",
"#T_4e366 td {\n",
" border: 1px solid black;\n",
"}\n",
"#T_4e366 td {\n",
" padding: 8px;\n",
"}\n",
"#T_4e366 th {\n",
" padding: 8px;\n",
"}\n",
"#T_4e366_row0_col1, #T_4e366_row1_col1, #T_4e366_row1_col2, #T_4e366_row1_col3, #T_4e366_row1_col4, #T_4e366_row1_col5, #T_4e366_row2_col1, #T_4e366_row2_col2, #T_4e366_row2_col3, #T_4e366_row2_col4, #T_4e366_row2_col5, #T_4e366_row3_col1, #T_4e366_row3_col3, #T_4e366_row3_col4, #T_4e366_row4_col1, #T_4e366_row4_col3 {\n",
" background-color: darkgreen;\n",
"}\n",
"#T_4e366_row0_col2, #T_4e366_row0_col3, #T_4e366_row0_col4, #T_4e366_row0_col5 {\n",
" background-color: darkred;\n",
"}\n",
"</style>\n",
"<table id=\"T_4e366\">\n",
" <caption>Automaton 1 Evaluation<br/>State Seen At Step</caption>\n",
" <thead>\n",
" <tr>\n",
" <th id=\"T_4e366_level0_col0\" class=\"col_heading level0 col0\" >Trace #</th>\n",
" <th id=\"T_4e366_level0_col1\" class=\"col_heading level0 col1\" >1</th>\n",
" <th id=\"T_4e366_level0_col2\" class=\"col_heading level0 col2\" >2</th>\n",
" <th id=\"T_4e366_level0_col3\" class=\"col_heading level0 col3\" >3</th>\n",
" <th id=\"T_4e366_level0_col4\" class=\"col_heading level0 col4\" >4</th>\n",
" <th id=\"T_4e366_level0_col5\" class=\"col_heading level0 col5\" >5</th>\n",
" </tr>\n",
" </thead>\n",
" <tbody>\n",
" <tr>\n",
" <td id=\"T_4e366_row0_col0\" class=\"data row0 col0\" >0</td>\n",
" <td id=\"T_4e366_row0_col1\" class=\"data row0 col1\" >1</td>\n",
" <td id=\"T_4e366_row0_col2\" class=\"data row0 col2\" >3</td>\n",
" <td id=\"T_4e366_row0_col3\" class=\"data row0 col3\" >3</td>\n",
" <td id=\"T_4e366_row0_col4\" class=\"data row0 col4\" >3</td>\n",
" <td id=\"T_4e366_row0_col5\" class=\"data row0 col5\" >3</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4e366_row1_col0\" class=\"data row1 col0\" >1</td>\n",
" <td id=\"T_4e366_row1_col1\" class=\"data row1 col1\" >1</td>\n",
" <td id=\"T_4e366_row1_col2\" class=\"data row1 col2\" >0</td>\n",
" <td id=\"T_4e366_row1_col3\" class=\"data row1 col3\" >1</td>\n",
" <td id=\"T_4e366_row1_col4\" class=\"data row1 col4\" >1</td>\n",
" <td id=\"T_4e366_row1_col5\" class=\"data row1 col5\" >0</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4e366_row2_col0\" class=\"data row2 col0\" >2</td>\n",
" <td id=\"T_4e366_row2_col1\" class=\"data row2 col1\" >1</td>\n",
" <td id=\"T_4e366_row2_col2\" class=\"data row2 col2\" >0</td>\n",
" <td id=\"T_4e366_row2_col3\" class=\"data row2 col3\" >1</td>\n",
" <td id=\"T_4e366_row2_col4\" class=\"data row2 col4\" >0</td>\n",
" <td id=\"T_4e366_row2_col5\" class=\"data row2 col5\" >0</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4e366_row3_col0\" class=\"data row3 col0\" >3</td>\n",
" <td id=\"T_4e366_row3_col1\" class=\"data row3 col1\" >1</td>\n",
" <td id=\"T_4e366_row3_col2\" class=\"data row3 col2\" >2</td>\n",
" <td id=\"T_4e366_row3_col3\" class=\"data row3 col3\" >0</td>\n",
" <td id=\"T_4e366_row3_col4\" class=\"data row3 col4\" >1</td>\n",
" <td id=\"T_4e366_row3_col5\" class=\"data row3 col5\" >2</td>\n",
" </tr>\n",
" <tr>\n",
" <td id=\"T_4e366_row4_col0\" class=\"data row4 col0\" >4</td>\n",
" <td id=\"T_4e366_row4_col1\" class=\"data row4 col1\" >1</td>\n",
" <td id=\"T_4e366_row4_col2\" class=\"data row4 col2\" >2</td>\n",
" <td id=\"T_4e366_row4_col3\" class=\"data row4 col3\" >1</td>\n",
" <td id=\"T_4e366_row4_col4\" class=\"data row4 col4\" >2</td>\n",
" <td id=\"T_4e366_row4_col5\" class=\"data row4 col5\" >2</td>\n",
" </tr>\n",
" </tbody>\n",
"</table>\n"
],
"text/plain": [
"<pandas.io.formats.style.Styler at 0x7fd191e15300>"
]
},
"execution_count": 12,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"import pandas as pd\n",
"\n",
"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]})\n",
"def color_based_on_values(items, dkrb='', gb=''):\n",
" bckgrnd_per_row_items = []\n",
" for item in items:\n",
" if item == 3:\n",
" bckgrnd_per_row_items.append(dkrb)\n",
" elif item in [0,1]:\n",
" bckgrnd_per_row_items.append(gb)\n",
" else:\n",
" bckgrnd_per_row_items.append('') \n",
" return bckgrnd_per_row_items\n",
"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\n",
"# based on https://stackoverflow.com/a/77080840/8508004\n",
"s2.set_caption(\"Automaton 1 Evaluation<br/>State Seen At Step\") # based on https://stackoverflow.com/a/57958638/8508004\n",
"s2 = s2.set_table_styles(\n",
" [\n",
"\n",
" {'selector': 'table', 'props': [('border-collapse', 'collapse')]},\n",
" {'selector': 'th', 'props': [('border', '3px solid black'), ('font-weight', 'bold')]},\n",
" {'selector': 'td', 'props': [('border', '1px solid black')]},\n",
" {'selector': 'td, th', 'props': [('padding', '8px')]}\n",
" ]\n",
")\n",
"#df_styled.to_html(\"styled_table.html\")\n",
"html_file_name = \"styled_table.html\"\n",
"s2.to_html(html_file_name)\n",
"with open(html_file_name, 'r') as thefile:\n",
" html_text=thefile.read()\n",
"s2"
]
},
{
"cell_type": "code",
"execution_count": 13,
"id": "ef3acbcd-c9d1-417c-86bd-17e6f9439b3f",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "87ba8015df3d4034b3d179e2c110363f",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"Box(children=(HTML(value='<style type=\"text/css\">\\n#T_4e366 table {\\n border-collapse: collapse;\\n}\\n#T_4e366…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"from IPython.display import HTML, display\n",
"from ipywidgets import widgets, Layout, HTML\n",
"tbl1 = html_text\n",
"tbl2 = html_text\n",
"\n",
"box_layout = Layout(display='flex',\n",
" flex_flow='row',\n",
" justify_content='space-around',\n",
" width='450px'\n",
" )\n",
"\n",
"#display(HTML(tbl1))\n",
"hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)\n",
"display(hbox1)"
]
},
{
"cell_type": "markdown",
"id": "e854ac0a-244c-4eca-b001-c0398c8e523a",
"metadata": {},
"source": [
"-------\n",
"\n",
"...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..."
]
},
{
"cell_type": "markdown",
"id": "c252aa1d-470e-4480-b50c-58507793a780",
"metadata": {},
"source": [
"-------\n",
"\n",
"### The 'complete' look\n",
"\n",
"(meant for JupyterLab Dark Theme)\n",
"\n",
"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.**"
]
},
{
"cell_type": "code",
"execution_count": 14,
"id": "06e0c588-95ec-41c5-b0ea-9c33b15496d3",
"metadata": {},
"outputs": [
{
"data": {
"application/vnd.jupyter.widget-view+json": {
"model_id": "00a33c98165e4d2a8ebef172ae774b73",
"version_major": 2,
"version_minor": 0
},
"text/plain": [
"Box(children=(HTML(value='<html><style>\\n table {\\n border: 4px solid DodgerBlue;\\n border-co…"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"s='''<html><style>\n",
" table {\n",
" border: 4px solid DodgerBlue;\n",
" border-collapse: collapse;\n",
" width: 100%;\n",
" }\n",
" td, th {\n",
" border: none;\n",
" padding: 5px;\n",
" }\n",
" caption {\n",
" color: white;\n",
" padding: 5px;\n",
" }\n",
" .primary-caption {\n",
" background-color: black;\n",
" }\n",
" .secondary-caption {\n",
" background-color: DodgerBlue;\n",
" border-bottom: 1px solid black;\n",
" }\n",
" thead {\n",
" background-color: DodgerBlue;\n",
" color: white;\n",
" }\n",
" .table-header {\n",
" border-top: 1px solid black;\n",
" }\n",
" .cp {background-color:DarkGreen; color: white; text-align:center;}\n",
" .cf {background-color:DarkRed; color: white; text-align:center;}\n",
"</style>\n",
"<table>\n",
"<caption class=\"primary-caption\">Automaton 1 Evaluation</caption>\n",
"<caption class=\"secondary-caption\">State Seen At Step</caption>\n",
"<thead class=\"table-header\"> \n",
" <tr><th>Trace #</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>\n",
"</thead>\n",
"<tbody>\n",
" <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>\n",
" <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>\n",
" <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>\n",
" <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>\n",
" <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>\n",
"</tbody>\n",
"</table></html>'''\n",
"from IPython.display import HTML, display\n",
"from ipywidgets import widgets, Layout, HTML\n",
"\n",
"tbl1 = s\n",
"tbl2 = s\n",
"\n",
"box_layout = Layout(display='flex',\n",
" flex_flow='row',\n",
" justify_content='space-around',\n",
" width='450px'\n",
" )\n",
"\n",
"hbox1 = widgets.Box(children=[widgets.HTML(tbl1),widgets.HTML(tbl2)], layout=box_layout)\n",
"display(hbox1)"
]
},
{
"cell_type": "markdown",
"id": "41f7214c-6e0a-4d4f-a946-40ddce78cdc7",
"metadata": {},
"source": [
"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. \n",
"**It will mess up the look of earlier examples in this notebook.**"
]
},
{
"cell_type": "markdown",
"id": "679ae0c7-a564-4b55-b7da-1fb00cda92fa",
"metadata": {},
"source": [
"------\n",
"\n",
"Enjoy!"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.10.16"
}
},
"nbformat": 4,
"nbformat_minor": 5
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment