Flask 입문 2: 데이터 프레임을 스타일시트로 멋지게 표시
환경
Mac, 로컬
세련된 스타일 시트를 집어 들고 그대로 적용 할 수 없다고 생각했지만 안돼.
h tp // w w. htm dc s sboo k. 이 m / e xt et al.
왜? 이 스타일 시트가 상정하는 구조 (예 : 아래 그림)
pd.DataFrame.to_html()에서 내뿜는 구조와 다르기 때문
to_html()로 토출되는 구조와 Jupyter처럼 표시할 수 있는 곳까지
매우 알기 쉬운 것이 있었다. 진짜로 여기에 모두 써 있기 때문에 코드 게재 등은 할애
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 50807744 / 아 ply-c s sc
덧붙여서 스타일 시트를 변경했는데 반영되지 않지? 라고 생각하면
127.0.0.1:5000/static/style.css
변경 사항을 확인할 수 있을 때까지 여러 번 로드한 다음 액세스하면 반영될 수 있음
위의 참고로 CSS를 다시 쓰고 조금 세련되게 만듭니다.
열심히 이런 느낌
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;}
※style sheet는 별로 이해하고 있지 않다. 낭비가 많다고 생각
Reference
이 문제에 관하여(Flask 입문 2: 데이터 프레임을 스타일시트로 멋지게 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yoinhu/items/e7ea7afb7a47f1de2c2e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
h tp // w w. htm dc s sboo k. 이 m / e xt et al.
왜? 이 스타일 시트가 상정하는 구조 (예 : 아래 그림)
pd.DataFrame.to_html()에서 내뿜는 구조와 다르기 때문
to_html()로 토출되는 구조와 Jupyter처럼 표시할 수 있는 곳까지
매우 알기 쉬운 것이 있었다. 진짜로 여기에 모두 써 있기 때문에 코드 게재 등은 할애
h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 50807744 / 아 ply-c s sc
덧붙여서 스타일 시트를 변경했는데 반영되지 않지? 라고 생각하면
127.0.0.1:5000/static/style.css
변경 사항을 확인할 수 있을 때까지 여러 번 로드한 다음 액세스하면 반영될 수 있음
위의 참고로 CSS를 다시 쓰고 조금 세련되게 만듭니다.
열심히 이런 느낌
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;}
※style sheet는 별로 이해하고 있지 않다. 낭비가 많다고 생각
Reference
이 문제에 관하여(Flask 입문 2: 데이터 프레임을 스타일시트로 멋지게 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yoinhu/items/e7ea7afb7a47f1de2c2e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
열심히 이런 느낌
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;}
※style sheet는 별로 이해하고 있지 않다. 낭비가 많다고 생각
Reference
이 문제에 관하여(Flask 입문 2: 데이터 프레임을 스타일시트로 멋지게 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yoinhu/items/e7ea7afb7a47f1de2c2e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
