HTML table with three columns with different alignments

Dash Python
1

I’m trying to generate an HTML table and have the first two columns with text-alignment right and the third column text-alignment center.

I generate my table as follows:

Generate a dataframe from a SQL query:

def Generate_DF(filepath):
sql_file = open(filepath)
sql_as_string = sql_file.read()
DF = pd.read_sql(sql_as_string, mydb)
sql_file.close()
return DF

Then generate html.Table from the dataframe:

def generate_table(dataframe, max_rows=26):
return html.Table(
# Header
[html.Tr([html.Th(col,style = {“font-size”:“12px”}) for col in dataframe.columns]) ] +
# Body
[html.Tr([ html.Td(dataframe.iloc[i][col], style = {“font-size”:“11px”}
) for col in dataframe.columns ] ) for i in range(min(len(dataframe), max_rows))])

It seems like the table I generate has a uniform style for each column.

Is it possible to assign different styles to different columns in the same html.table ?

2

Hi,

Welcome to the community!

In your approach, you would need to style each cell separately with respect to horizontal alignment. So you should pass "text-alignment": "right" or “center” to the style dict in each html.Th and html.Td component. A better approach would be to add a CSS stylesheet to the app and use classes in each element to change the style.

1 Like