0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Python】Jinja2で表を作る

Posted at

はじめに

画像などいくつデータがあるかわからないものを表にしたい場合,
一行にいくつデータを表示したいかを決め,
あとはよろしく表を作ってほしい

例えば下のような表
image.png
ご参考までに,チャートの描き方はこちら

Jinja2 を使うと楽だったので備忘録として残しておく

python

本サンプルでは,画像ではなく0~25までの数字を表示しています
数字の画像が26枚あるとでも思ってください

26個の数字を5列の表にして,タイトルがtestのtest.htmlを作成します

import os
import jinja2 as jj

# html ファイルへの出力
def to_file(dataDic, filename):
    # テンプレートファイル読み込み
    je = jj.Environment(loader = jj.FileSystemLoader('.', encoding = 'utf8'))
    tpl = je.get_template('jinjatest.tpl')
    # 出力
    with open(filename, 'w', encoding = 'utf-8') as fp:
        st = tpl.render(dataDic)
        fp.write(st)

if __name__ == '__main__':
    # 0-25の数字
    contentList = [{'no': v} for v in range(26)]
    # タイトルは"title",列数は5
    dataDic = {'contentList': contentList, 'title': 'test', 'num_of_columns': 5}
    # html 出力 ファイル名は test.html
    to_file(dataDic, 'test.html')

Jinja2 テンプレート

jinjatest.tpl
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{ title }}</title>
</head>
<body>
<center>
<h1>{{ title }}</h1>
<table border=1>
{% for content in contentList -%}
{% if loop.index0 % num_of_columns == 0 -%}
<tr>
{% endif -%}
<td><center>{{ content.no }}</center></td>
{% if loop.index0 % num_of_columns == num_of_columns-1 -%}
</tr>
{% elif loop.last -%}
{% for i in range(num_of_columns-loop.index % num_of_columns) -%}
<td>&nbsp;</td>
{% endfor -%}
</tr>
{% endif -%}
{% endfor -%}
</table>
</center>
</body>
</html>

データの数(本サンプルでは26回)まわるループです
-%} のように - をつけることで出力される html に余計な空行が入りません

{% for content in contentList -%}
・・・
{% endfor -%}

行の先頭では <tr> を書きます
loop.index00 から始まるループのインデックスです
ちなみに loop.index1 から始まるループのインデックスです

{% if loop.index0 % num_of_columns == 0 -%}
<tr>
{% endif -%}

行の終わりでは </tr> を書きます

{% if loop.index0 % num_of_columns == num_of_columns-1 -%}
</tr>

行の終わりではないところで,データの終わりになったら,
行末まで空白スペース &nbsp; を書きます

{% elif loop.last -%}
{% for i in range(num_of_columns-loop.index % num_of_columns) -%}
<td>&nbsp;</td>
{% endfor -%}
</tr>
{% endif -%}

出力された html

image.png

おわりに

最初は python の中で html を一生懸命書いていたが,
Jinja2 を使うと楽だった

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?