【Python】CSVをHTMLに変換する方法

こんにちは。のっくんです。

csvファイルをHTMLに変換する方法について紹介します。

使用するcsvファイル

使用するcsvファイルは、前回の記事

https://ymgsapo.com/scraping_soccer_ranking

で取得したサッカーのランキング表にしましょう。

中身は以下の通り。

 ,順位,クラブ名,勝点,試合数,勝,分,負,得点,失点,得失点,直近5試合
,1,大分トリニータ,66,36,20,6,10,65,41,24,
,2,松本山雅FC,66,36,18,12,6,50,33,17,
,3,FC町田ゼルビア,62,34,17,11,6,52,36,16,
,4,アビスパ福岡,61,36,17,10,9,51,36,15,
,5,大宮アルディージャ,60,36,18,6,12,58,43,15,
,6,東京ヴェルディ,60,36,16,12,8,49,36,13,
    :

このデータをHTMLに出力して見やすくしたり、順位によって背景色が変わるようにしたいと思います。

その前に、、

よく見ると、1列目と最後の列のデータがありませんね。

ネットからスクレイピングしてくると、画像などが入っていた箇所が空欄になってしまいます。

HTMLに出力する前にこのような列は削除しましょう。

pandasを使う

pandasを使って空欄が入った列を削除してみます。

to_html_pandas.py

import pandas as pd

df = pd.read_csv('ranking.csv')

df = df.dropna(axis=1, how='any')

read_csvでランキング表を読み取っています。

データが読み取れなかった箇所は欠損値(NaN)として扱われます。

このNaNが1つでも入った列を削除するには、dropnaを使っています。

axis=1というのは、列を削除するという意味です。

how=”any”は、1つでもNaNがあったら削除するという意味です。

    順位         クラブ名  勝点  試合数   勝   分   負  得点  失点  得失点
0    1      大分トリニータ  66   36  20   6  10  65  41   24
1    2       松本山雅FC  66   36  18  12   6  50  33   17
2    3     FC町田ゼルビア  62   34  17  11   6  52  36   16
3    4       アビスパ福岡  61   36  17  10   9  51  36   15
4    5    大宮アルディージャ  60   36  18   6  12  58  43   15
5    6      東京ヴェルディ  60   36  16  12   8  49  36   13
          :

いい感じに整理されました。

HTMLに変換する

pandasの便利なところは、HTMLに変換する関数があることです。

先ほどのコードを拡張してみます。

to_html_pandas.py

import pandas as pd

df = pd.read_csv('ranking.csv')

df = df.dropna(axis=1, how='any')

# <th>内の文字列を真ん中に寄せる
pd.set_option('colheader_justify', 'center')

html_string = '''
<html>
  <head><meta charset="UTF-8">
  <title>J2 Ranking</title>
  </head>
  <link rel="stylesheet" type="text/css" href="mystyle.css"/>
  <body>
    {table}
  </body>
</html>.
'''

# OUTPUT AN HTML FILE
with open('ranking.html', 'w') as f:
    f.write(html_string.format(table=df.to_html(classes='mystyle', index=False)))

html_stringには、HTMLを表示するときに必要な基本的な<head>や<body>を入れています。

to_html関数の中では、スタイルシートのクラス名(mystyle)を指定したり、インデックスは読み込まないようにしています。

コードを実行するとHTMLファイルが出力されるので、ブラウザ開くと、、、

見やすくなりました。

使用したスタイルシートも載せておきます。

mystyle.css

.mystyle {
    font-size: 11pt;
    font-family: Arial;
    border-collapse: collapse;
    border: 1px solid silver;

}

.mystyle td, th {
    padding: 5px;
}

.mystyle tr:nth-child(1) {
    background: lightgreen;
}

.mystyle tr:nth-child(2) {
    background: lightgreen;
}

.mystyle tr:nth-child(3) {
    background: lightblue;
}

.mystyle tr:nth-child(4) {
    background: lightblue;
}

.mystyle tr:nth-child(5) {
    background: lightblue;
}

.mystyle tr:nth-child(6) {
    background: lightblue;
}

.mystyle tr:nth-child(21) {
    background: lightcoral;
}

.mystyle tr:nth-child(22) {
    background: lightcoral;
}

.mystyle tr:hover {
    background: silver;
    cursor: pointer;
}

nth-child(行番号)で行の背景色を変更しています。

上位2チームは緑、下位2チームは赤にしています。

(Jリーグではそれぞれ自動昇格圏、自動降格圏と呼ばれます。)

tr:hoverを指定し、表にマウスポインタを置くと背景がシルバーになるようにしています。

実際のページはこちら:

Soccer Talk

以上。

ABOUTこの記事をかいた人

個人アプリ開発者。Python、Swift、Unityのことを発信します。月間2.5万PVブログ運営。 Twitter:@yamagablog