残プロ　第-24回　~Bootstrap4で表を作成~

5838 ワード
bootstrap4 bootstrap4 テキストリンク

<table class='table'>

bootstrapならtableクラスを指定するだけで簡単に表が作成できます．pyplotとは大違い!

.csv

文字列，整数，文字列(日本語)でテストを行いましょう．

.py

pandasでcsvの読み込みを行うと，配列に変換する手間がかかります．なので今回は標準ライブラリcsvを使用しています．

from flask import Flask, render_template, url_for
import csv

app = Flask(__name__)

@app.route('/')
def csv_show():
    csv_file = []
    with open('test.csv') as f:
        reader = csv.reader(f)
        for row in reader:
            csv_file.append(row)
    return render_template("csv.html", csv_file=csv_file)


if __name__ == '__main__':
    app.run(debug=True)

.html

行ごとに上から定義するだけで綺麗な表が作成できます．

csv.html
{% extends 'layout.html' %}

{% block content %}
    <table class='table'>
        <thead>
            <tr>
                <th scope='col'>{{ csv_file[0][0] }}</th>
                <th scope='col'>{{ csv_file[0][1] }}</th>
                <th scope='col'>{{ csv_file[0][2] }}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope='row'>{{ csv_file[1][0] }}</th>
                <td>{{ csv_file[1][1] }}</td>
                <td>{{ csv_file[1][2] }}</td>
            </tr>
            <tr>
                <th scope='row'>{{ csv_file[2][0] }}</th>
                <td>{{ csv_file[2][1] }}</td>
                <td>{{ csv_file[2][2] }}</td>
            </tr>
            <tr>
                <th scope='row'>{{ csv_file[3][0] }}</th>
                <td>{{ csv_file[3][1] }}</td>
                <td>{{ csv_file[3][2] }}</td>
            </tr>
        </tbody>
    </table>
{% endblock %}

実行結果