I want to change a tabulated table html output in python

Question

I am using streamlit and loading data that I would like to put into a table with more customization than is currently offered by st.dataframe and st.table.

Below I use the tabulate package to change my data (after manipulating it with pandas) into an html table. My data is large so not something that I would like to type out. This is shown below with random data.

I then would like to add to the basic html template that is produced with my data things like a custom header and a larger font and a height for the table, however I can't seem to find a way to access the html stored in test2. I can wrap things around it (shown below) but can't get into the which is stored in test2.

Any thoughts on how to add to a tabulated tables output html would be helpful

import tabulate as tb
import streamlit as st
import pandas as pd
import numpy as np

np.random.seed(42)

data = {
    'A': np.random.rand(100),
    'B': np.random.randint(1, 100, size=100),
    'C': np.random.choice(['X', 'Y', 'Z'], size=100)
}

df = pd.DataFrame(data)

test2=tb.tabulate(data, tablefmt='html')

test3 = f'<div style="height: 150; overflow: auto">{test2}</div>'

st.markdown(test3, unsafe_allow_html=True)

Answer 1

tabulate has options headers and showindex

table = tb.tabulate(data, tablefmt='html', headers=df.columns, showindex=True)

st.markdown(table, unsafe_allow_html=True)

Source code: tabulate

---

You can also add CSS to change it

table = tb.tabulate(data, tablefmt='html', headers=df.columns, showindex=True)

st.write('<style>table th {font-size: 30px; color: red} table tr:nth-child(odd) td {background-color: #eee}</style>', unsafe_allow_html=True)

st.markdown(table, unsafe_allow_html=True)

---

But you may also use DataFrame to generate HTML without tabulate.
And it may use df.style with many functions to format every cell.

This example changes background for maximal and minimal value in columns A and B

df = pd.DataFrame(data)

def highlight_max(x, props):
    return np.where(x == np.nanmax(x.to_numpy()), props, None)
def highlight_min(x, props):
    return np.where(x == np.nanmin(x.to_numpy()), props, None)

df = df.style \
        .apply(highlight_max, props='background-color: #fed', subset=['A','B'], axis=0) \
        .apply(highlight_min, props='background-color: #afa', subset=['A','B'], axis=0)

html = df.to_html()

st.write(html, unsafe_allow_html=True)

---

Full code:

import tabulate as tb
import streamlit as st
import pandas as pd
import numpy as np

np.random.seed(42)

data = {
    'A': np.random.rand(5),
    'B': np.random.randint(1, 100, size=5),
    'C': np.random.choice(['X', 'Y', 'Z'], size=5)
}

df = pd.DataFrame(data)

def highlight_max(x, props):
    return np.where(x == np.nanmax(x.to_numpy()), props, None)
def highlight_min(x, props):
    return np.where(x == np.nanmin(x.to_numpy()), props, None)

df = df.style \
        .apply(highlight_max, props='background-color: #fed', subset=['A','B'], axis=0) \
        .apply(highlight_min, props='background-color: #afa', subset=['A','B'], axis=0)

html = df.to_html()

st.write(html, unsafe_allow_html=True)

table = tb.tabulate(data, tablefmt='html', headers=df.columns, showindex=True)
st.write('<style>table th {font-size: 30px; color: red} table tr:nth-child(odd) td {background-color: #eee}</style>', unsafe_allow_html=True)
st.markdown(table, unsafe_allow_html=True)