How to display pandas dataframe as a table in html?

Question

I am using Flask to do this. I essentially want to display my pandas dataframe on my webpage but my webpage ends up displaying this on my html page:

website < phone t email a b l e b o r d e r = " 1 " c l a s s = " d a t a f r a m e " > < t h e a d > < t r s t y l e = " t e x t - a l i g n : r i g h t ; " > < t h > < / t h > < t h > c o m p a n y < / t h > < t h > w e b s i t e < / t h > < t h > p h o n e < / t h > < t h > e m a i l < / t h > < / t r > < / t h e a d > < t b o d y > < / t b o d y > < / t a b l e >

Here is what I tried with Flask:

from backend import final_dataframe

@app.route('/results', methods=["GET", "POST"])
def results():
   return render_template('results.html',  tables=final_dataframe.to_html(), titles=final_dataframe.columns.values)

And here's a snippet of my html file, for which I used Jinja to display the table:

 <div  style="width: 50%;margin-left: 25%;margin-top: 58px;">
    {% for table in tables %}
        {{titles[loop.index]}}
        {{ table|safe }}
     {% endfor %}
 </div>

UPDATE:

This is what happens when I do print(final_dataframe.to_html()) in flask:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>company</th>
      <th>website</th>
      <th>phone</th>
      <th>email</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

OK so its a problem with my backend.py file. It seems that the global variable does not update:

final_dataframe = pd.DataFrame(columns= ['company', 'website', 'phone', 'email'])

def someFunction(a,b):
  contact_info = pd.DataFrame(myData, columns= ['company', 'website', 'phone', 'email'])
  global final_dataframe
  final_dataframe = final_dataframe.append(contact_info, ignore_index = True)

So basically, when the program gets out of the function, the global variable (final_dataframe) is not updated. It's updated inside the function however.

jcaliz · Accepted Answer · 2020-06-29 15:36:28Z

2

Probably because you have a loop in your template, so the html being separated by each character returned by .to_html(), try without the for loop

<div style="width: 50%;margin-left: 25%;margin-top: 58px;">
    {{ tables|safe }}
 </div>

edited Jun 29, 2020 at 15:36

answered Jun 26, 2020 at 15:51

jcaliz

4,0732 gold badges11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display pandas dataframe as a table in html?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related