Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Convert CSV to HTML Table using Python Pandas and Flask Framework

  • Last Updated : 28 Nov, 2021

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

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning - Basic Level Course


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!