Display CSV In HTML Table With Python Flask

Welcome to a tutorial on how to display a CSV file as an HTML table in Python Flask. So you have a CSV file somewhere on the server? Want to read it, and display it in an HTML table? Well, it really isn’t that difficult. Read on for the example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes CSV Table Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

  • Create your own project folder, e.g. D:\csvtable, unzip the code inside this folder.
  • Open the terminal (or command line), navigate to your project folder cd D:\csvtable.
  • As usual, create a virtual environment if you don’t want to mess up your other projects.
    • virtualenv venv
    • Windows – venv\scripts\activate
    • Mac/Linux – venv/bin/activate
  • Get all the required packages – pip install Flask
  • Launch python s2_server.py and access http://localhost.
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

CSV TO HTML TABLE

All right, let us now get into the example of reading a file in Python and displaying it in an HTML table with Flask.

 

PART 1) DUMMY CSV

s1_dummy.csv
Jo Doe,jo@doe.com,465785
Joa Doe,joa@doe.com,123456
Job Doe,job@doe.com,234567
Joe Doe,joe@doe.com,345678
Jog Doe,jog@doe.com,578456
Joh Doe,joh@doe.com,378945
Joi Doe,joi@doe.com,456789
Jon Doe,jon@doe.com,987654
Jor Doe,jor@doe.com,754642
Joy Doe,joy@doe.com,124578

For a start, here is a dummy CSV file that we will be working with. For those who are new:

  • CSV files are literally just plain text files.
  • But we use \r\n line breaks to indicate a new row.
  • And comma , to indicate columns.

 

PART 2) FLASK SERVER

s2_server.py
# (A) INIT
# (A1) LOAD MODULES
from flask import Flask, render_template, request, make_response
 
# (A2) FLASK SETTINGS + INIT
HOST_NAME = "localhost"
HOST_PORT = 80
app = Flask(__name__)
# app.debug = True
 
# (B) DEMO - READ CSV & GENERATE HTML TABLE
@app.route("/")
def index():
  with open("s1_dummy.csv") as file:
    return render_template("s3_csv_table.html", csv=file)
 
# (C) START
if __name__ == "__main__":
  app.run(HOST_NAME, HOST_PORT)

The Flask server script should be pretty straightforward once you trace through it.

  1. Load the required modules, and define the Flask settings.
  2. Serve the demo “CSV to HTML” page. Take note of how this is done – We open the s1_dummy.csv and pass it into the HTML template.
  3. Start the Flask server. Captain Obvious at your service.

 

 

PART 3) HTML TEMPLATE

templates/s3_csv_table.html
<table id="demo">
{% for row in csv %}
  <tr>
  {% for col in row.split(",") %}
  <td>{{ col }}</td>
  {% endfor %}
  </tr>
{% endfor %}
</table>

Yep, that is all we need in the HTML. Loop through the CSV file and generate the rows/columns. The end.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

For you guys who are thinking along the lines of “upload the CSV file to the server, then generate the table” – There’s no need to do so. Modern Javascript can actually read the CSV file directly, see “display CSV as a table in Javascript” below.

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.