Getting Started with Flask # 2: Displaying Data Frames in Style Sheets

environment

Mac, local

I picked up a fashionable style sheet and wondered if it could be applied as it is, but it didn't work.

http://www.htmlandcssbook.com/extras/table-styles/ image.png

why? With the structure assumed by this style sheet (for example, the figure below) image.png

This is because it is different from the structure spit out by pd.DataFrame.to_html ()

To the structure that is spit out by to_html () and the place that can be displayed like Jupyter

It was very easy to understand. Since all of them are written here, I will omit the code posting etc. https://stackoverflow.com/questions/50807744/apply-css-class-to-pandas-dataframe-using-to-html image.png

By the way, even though I changed the style sheet, it is not reflected? If you think 127.0.0.1:5000/static/style.css If you load it several times until you can see the change and then access it, it may be reflected.

Refer to the above, rewrite css and make it a little fashionable

I did my best to make it look like this image.png

app.py

from flask import Flask,render_template,url_for
import seaborn as sns
app = Flask(__name__)

@app.route('/')
def index():
    df = sns.load_dataset('iris')
    return render_template('index.html', 
                            table=(df
                                .head(15)
                                .to_html(classes="mystyle"))
                            )

if __name__ == "__main__":
    app.run()

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>mystyle</title>
    <link rel="stylesheet" 
        type="text/css"
        href="{{url_for('static', filename='style.css')}}">
    <style type="text/css">
        body {
                font-family: Arial, Verdana, sans-serif;
                font-size: 90%;
                color: #666;
                background-color: #f8f8f8;}
        </style>
</head>
<body>
        <h1>iris data table</h1>    
        {{table | safe}}
</body>
</html>

style.css

mystyle {
	border-spacing: 0px;
	border-top: 0px solid;
	border-left: 0px solid;
	border-right: 0px solid;
	border-bottom: 0px solid;
}

.mystyle th, td {
	border-spacing: 0px;
    padding: 5px;
	border-top: 1px solid #f1f8fe;
	border-bottom: 1px solid #cbd2d8;
	border-right: 1px solid #cbd2d8;
	margin: 0px;
}

.mystyle thead, th:first-child {
	background-color: #90b4d6;
	text-shadow: -1px -1px 1px #666666;
}

.mystyle thead th{
	color:white;
	text-align: center;
	border-bottom: 2px solid #547ca0;
	letter-spacing: 0.15em;
}
.mystyle th:first-child {
	color:white;
	text-align: right;
}

.mystyle td {
	text-align: right;
}

.mystyle tr:nth-child(even) {
    background: #E0E0E0;
}

.mystyle thead tr th:first-child {
	-webkit-border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;}

.mystyle thead tr th:last-child {
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;}    

Recommended Posts

Getting Started with Flask # 2: Displaying Data Frames in Style Sheets
Getting Started with Flask with Azure Web Apps
Getting Started with Heroku, Deploying Flask App
MongoDB Basics: Getting Started with CRUD in JAVA
Getting started with AWS IoT easily in Python
Settings for getting started with MongoDB in python
Getting started with Android!
1.1 Getting Started with Python
Getting Started with Golang 2
Getting started with apache2
Getting Started with Golang 1
Getting Started with Python
Getting Started with Django 1
Getting Started with Optimization
Getting Started with Golang 3
Getting Started with Numpy
Getting started with Spark
Getting Started with Python
Getting Started with Pydantic
Getting Started with Golang 4
Getting Started with Jython
Getting Started with Django 2
Translate Getting Started With TensorFlow
Getting Started with Python Functions
Getting Started with Go Assembly
Getting Started with PKI with Golang ―― 4
Getting Started with Python Django (1)
Getting Started with Python Django (4)
Getting Started with Python Django (3)
Getting Started with Python Django (6)
Getting Started with Django with PyCharm
Python3 | Getting Started with numpy
Getting Started with Python Django (5)
Data engineers learn DevOps with a view to MLOps. ① Getting started
Getting Started with Python responder v2
Getting Started with Git (1) History Storage
Getting started with Sphinx. Generate docstring with Sphinx
Getting Started with Python Web Applications
Getting Started with Python for PHPer-Classes
Getting Started with Sparse Matrix with scipy.sparse
Getting Started with Julia for Pythonista
Getting Started with Python Basics of Python
Getting Started with Cisco Spark REST-API
Getting started with USD on Windows
Getting Started with Python Genetic Algorithms
Getting started with Python 3.8 on Windows
Getting Started with Python for PHPer-Functions
Get started with Python in Blender
Getting Started with CPU Steal Time
samba settings
VIM settings
Settings for getting started with MongoDB in python
Get additional data in LDAP with python
Getting Started with python3 # 1 Learn Basic Knowledge
Try working with binary data in Python
Getting Started with Python Web Scraping Practice
Page cache in Python + Flask with Flask-Caching
Get data from Cloudant with Bluemix flask
Getting Started with Python for PHPer-Super Basics
Getting Started with Python Web Scraping Practice
Getting started with Dynamo from Python boto
Get Started with TopCoder in Python (2020 Edition)
Getting Started with Lisp for Pythonista: Supplement