CSV ファイルを HTML の表に変換する 【Python】

Python

Python で csv ファイルを読み込んで、HTML ファイルの表形式で出力する方法についてまとめておきます。
以下の環境で動作確認をしています。
環境: Windows 10、Microsoft Edge、Python 3.x (+ Anaconda 3)

背景

Python での HTML ファイルの書き出しといえば、pandas がよく知られています。
スクリプト1行程度で HTML 形式で書き出すことができるので、とても重宝しています。
ところが、出力される表が見やすいかとなると??な状態です。また、データ数が増えてきて、表の文字サイズや列幅などをカスタマイズしたいとなったときも、??な状態になります。

そこで、高度なライブラリなどは使わずに、指定した csv ファイルを読み込んで html の表に変換する Python のスクリプトをまとめておきます。

とりあえず、表だけ作成したい(スクリプトの詳細は触れたくない)といった場合は、テキストエディタなどでサンプルと同様の csv ファイルさえ作っておけば、Python を実行するだけで HTML ファイルを作成できます。
また、フォントや文字サイズ、線幅、各背景色などを変えて、見栄え、表の見やすさを改善したい場合は、よく使われそうな設定についてスクリプト上で推測がつくようにしています。
したがって、実務で使える程度の洗練度のデザインさえ作っておけば、後はデータを差し替えるだけで表の作成を自動化できることになります。

なお、サンプルコードでは csv ファイルを読み込むようにしていますが、同様の2次元のリストをスクリプト内で定義すれば、HTML ファイルの出力が自由自在にできることになります。

設定方法

① PC でフォルダを作成してください。
例: c:\user
② ①のフォルダ内に table_generator1.py 等の名前でテキストファイルを作成し、下記のサンプルコードを貼りつけて保存してください。
③ さらに、①のフォルダ内に csv1.csv の名前でテキストファイルを作成し、下記のデータを貼りつけて保存してください。

使い方

④ コマンドプロンプトを起動し、②の Python スクリプトを実行してください。
例: python c:\user\table_generator1.py
→ ①のフォルダ内に table01.html という名前でファイルが生成されます。
⑤ 出力された HTML ファイル(table01.html)をダブルクリックして、ブラウザで表示させてみてください。

うまく動いたら

※ うまく動いたら、csv ファイルの内容を差し替えて、表を書き換えてみてください。
先頭行は項目名を設定し、2行目以降にデータを記載します。
なお、csv ファイルの各行の要素の数は、すべて同一となるようそろえておく必要があります。
※ csv ファイルの読み込みは、素朴にテキストファイルをそのまま読み込んで、改行 “\n” とカンマ “,” で分割します。データ内(文字列中)にカンマや改行が入っている等の特殊な場合は、スクリプトを修正してください。
※ 配色を変えたい場合は、css を生成している関数 genrate_css0() 内で、#aaaaaa 等となっている部分を変更してみてください。#RRGGBB の形式で記載しています。例えば、RR の部分を 00 ~ ff の範囲で変更してみてください。赤色の階調値の調整ができます。
※ 線幅は、border-xxx となっている部分で設定しています。その他、フォントの種類、サイズ等も見たままとなっていますので、数値を変えるなど修正してみてください。
※ スクリプトでは csv ファイルを読み込む事例としていますが、スクリプト内でリスト(2次元配列)をべた書きで定義すれば、同様に HTML ファイルを出力できます。
※ 冒頭が “//” となっているところは、生成される HTML ファイル内でコメントアウトしている部分です。(Python スクリプトのコメントアウト “#” とは異なる。) ”//” を外してみて、表示を変えてみてください。偶数行、奇数行で色を変えるなど、デザインを変更できると思います。
※ 冒頭の列について、”.col0″ としているところで、列の幅(35%)を指定しています。必要により調整してください。不要であれば、コメントアウト(冒頭に “//” を入れる)してください。

まとめ

csv ファイルを読み込んで html の表を出力する Python のスクリプトについてまとめました。
他にも、グラフや図形についてもまとめています。興味のある方は、関連リンクも参照してみてください。

関連リンク
・ Python で HTML ファイルを出力する
・ HTML のグラフを出力する 【Python】
・ HTML で図形を出力する 【Python】
・ HTML のカレンダーを生成する 【Python】
・ Excel ファイルを読み込んで表示する
・ 配列(リスト)の読み書き・HTML 出力 サンプルコード

csv ファイル用のデータ( csv1.csv の名前で保存してください)

,製品A,製品B,製品C
機能1,◎,△,〇
機能2,〇,◎,×
機能3,〇,〇,×
機能4,〇,〇,△

サンプルコード

import os 

def read1( file1 ): 
    with open( file1, 'r', encoding='utf-8' ) as f1: 
        str1 = f1.read()
    return str1 

def write1( file1, str1 ): 
    with open( file1, 'w', encoding='utf-8' ) as f1: 
        f1.write( str1 ) 
    return 0 

def get_a1( file1 ):
    a1 = read1( file1 ).strip().split( "\n" ) 
    for i1 in range( len( a1 ) ): 
        a1[i1] = a1[i1].split( "," ) 
    return a1 

def generate_css0(): 
    str1 = ''' 

table {
  border-collapse: collapse;
  margin: 0 auto;
  width: 600px;
  table-layout: fixed;
  font-family: Meiryo; 
//font-family: Meiryo, sans-serif; 
  font-size: 14pt; 
}

table th {
  padding: 10px 0; 
  border-top:    1px solid #aaaaaa; 
  border-bottom: 1px solid #aaaaaa; 
  border-left:   1px solid #aaaaaa; 
  border-right:  1px solid #aaaaaa; 
  background-color: #ddddff; 
  text-align: center;
}

table td {
  padding: 8px 0; 
//border-top:    1px solid #777777; 
  border-bottom: 1px solid #777777; 
  border-left:   1px solid #aaaaaa; 
  border-right:  1px solid #aaaaaa; 
  text-align: center;
}

.col0 { 
  width: 35%; 
} 

table tr {
  background-color: #ffffff; 
}

table tr:hover{ 
  background-color: #ffeeee; 
} 

//table tr:nth-child(odd) { 
//  background-color: #eeffee; 
//} 

//table td:last-child{
//  border: none;
//}

'''
    return str1 

def generate_thead0( a1 ): 
    str1 = '<th class="col0">' + str( a1[0] ) + '</th>\n' 
    for i1 in range( len( a1 )-1 ): 
        str1 = str1 + '<th>' + str( a1[i1+1] ) + '</th>\n' 
    str1 = '<tr>\n' + str1 + '</tr>\n' 
    return str1 

def generate_tbody0( a1 ): 
    str1 = ''
    for i1 in range( len( a1 ) ): 
        str1 = str1 + '<td>' + str( a1[i1] ) + '</td>\n' 
    str1 = '<tr>\n' + str1 + '</tr>\n' 
    return str1 

def generate_tbody1( a1 ): 
    str1 = '' 
    for i1 in range( len( a1 ) ): 
        str1 = str1 + generate_tbody0( a1[ i1 ] ) 
    return str1 

def generate_table0( file1 ): 
    a1 = get_a1( file1 ) 
    a0 = a1[0]   # header 
    del a1[0]    # table data 
    str0 = generate_thead0( a0 ) 
    str1 = generate_tbody1( a1 )     
    str2 = '<table>\n' + str0 + str1 + '</table>\n' 
    str2 = '<br>\n' + str2 + '<br>\n' 
    return str2 

def generate_html0( css0, body0 ): 
    str1 = ''' 
<html lang="ja">
<head>
<style type="text/css">
{css1} 
</style>
</head>
<body>
{body1} 
</body> 
</html> 
'''.format( css1 = css0, body1 = body0 ) 
    return str1 

def generate_html1( file1 ): 
    str1 = generate_css0() 
    str2 = generate_table0( file1 ) 
    str3 = generate_html0( str1, str2 ) 
    return str3 

path1 = os.path.dirname(__file__) + "/"  
file1 = path1 + "csv1.csv" 

str1 = generate_html1( file1 ) 

print( str1 ) 

file1 = path1 + "table01.html" 
write1( file1, str1 ) 

 

タイトルとURLをコピーしました