Open In App

Convert CSV to HTML Table using Python Pandas and Flask Framework

Last Updated : 26 May, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we are going to convert a CSV file into an HTML table using Python Pandas and Flask Framework.

Sample CSV file :

USERNAME,IDENTIFIER,FIRST_NAME,LAST_NAME
booker12,9012,Rachel,Booker
grey07,2070,Laura,Grey
johnson81,4081,Craig,Johnson
jenkins46,9346,Mary,Jenkins
smith79,5079,Jamie,Smith

Stepwise Implementation

Creating Environment

Step 1: Create an environment. Create a project folder and a venv folder within.

py -3 -m venv venv

Step 2: Activate the environment.

venv\Scripts\activate

Step 3: Install Flask and Pandas.

pip install Flask

pip install pandas

Creating Project

Step 1: Create ‘app.py’ folder and write the code given below.

Python3 
# importing flask
from flask import Flask, render_template

# importing pandas module
import pandas as pd


app = Flask(__name__)


# reading the data in the csv file
df = pd.read_csv('sample_data.csv')
df.to_csv('sample_data.csv', index=None)


# route to html page - "table"
@app.route('/')
@app.route('/table')
def table():
  
    # converting csv to html
    data = pd.read_csv('sample_data.csv')
    return render_template('table.html', tables=[data.to_html()], titles=[''])


if __name__ == "__main__":
    app.run(host="localhost", port=int("5000"))

Step 2: Create the folder ‘templates’. create the file ‘table.html’ inside the ‘templates’ folder.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> Table </title>              
    </head>
    <body>
        <div align="center">
            <table>
                <h1>
                <!--Displaying the converted table-->
                     {% for table in tables %}
                    <h2>{{titles[loop.index]}}</h2>                            
                    {{ table|safe }}
                    {% endfor %}     
                </h1> 
            </table>
        </div>
    </body>
</html>

Step 3: Add the 'sample_data.csv' file.

Step 4: The project structure will look like this.

Structure of  the project

Run the Project

Step 1: Run the server.

Step 2: Browse the URL ‘localhost:5000’.

Step 3: The output web page will be displayed.

Output:

Output : CSV to HTML Table

Next Article
Convert CSV to HTML Table using Python Pandas and Flask Framework
author
venniladeenan
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox