Python 3 Flask & Pandas Script to Convert CSV to HTML Table in Browser Using HTML5

Welcome folks today in this blog post we will be using the pandas library in flask web framework to convert the csv file to html table and display it inside browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below libraries using the pip command as shown below

pip install flask

pip install pandas

After that you need to make an app.py file and copy paste the following code

app.py

# importing flask
from flask import Flask, render_template

# importing pandas module
import pandas as pd


app = Flask(__name__)


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


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

# importing flask

from flask import Flask, render_template

# importing pandas module

import pandas as pd

app = Flask(__name__)

# route to html page - "table"

@app.route('/')

@app.route('/table')

def table():

# converting csv to html

data = pd.read_csv('users.csv')

return render_template('table.html', tables=[data.to_html()], titles=[''])

if __name__ == "__main__":

app.run(host="localhost", port=int("5000"))

As you can see we are importing the flask library and then we are importing the pandas library at the top and then we are reading the users.csv file using the read_csv() method and then we are loading the html template to pass the data to it. And then we are starting the flask app at port 5000.

And now we need to make the table.html file inside the templates folder. As you can see we are loading the table.html file when users goes to the / route

Now we need to create the users.csv file and copy paste the following code

users.csv

name,age,country
Gautam,25,India
John,56,New Zealand
Phillips,45,USA
Cummins,35,England

name,age,country

Gautam,25,India

John,56,New Zealand

Phillips,45,USA

Cummins,35,England

And now we need to make the table.html file inside the templates folder as shown below

templates/table.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>

<!DOCTYPE html>

<head>

<title> Table </title>

</head>

<body>

<table>

<h1>

{% for table in tables %}

<h2>{{titles[loop.index]}}</h2>

{% endfor %}

</h1>

</table>

</div>

</body>

</html>

As you can see we are looping through all the data inside the tables array and we are displaying the rows inside the table we are using the for loop.

Now if you start the flask app at port 5o00 as shown below

python app.py