【jQuery】CSVをHTMLに書き出してめんどくさいTableタグとおさらばした話。

サイト内で表を表示する目的でTableタグを使用する場面は多々ある。
料金表や時間表、会社概要や担当者一覧などなど、むしろTableタグを用いていないサイトの方が少ないのではなかろうか。

しかしこのTableタグ、非常にめんどくさい。
他のHTMLタグと比較すると記述が複雑であり、「colspan」「rowspan」など特殊な記述も多く、
「Tableタグだけ、他のHTMLとは違う人が考えたんちゃうか？」
と常々思っている。
また、同じような記述の繰り返しになるため、表が大きく長くなればなるほど煩雑になり、修正などの際にもどこをどう直して良いものやらわからなくなる。

修正や更新の頻度が低いものならば腹を据えてやるしかないが、担当者や料金、時間票など、一週間、一ヶ月などのスパンでしょっちゅう更新するとなると問題だ。
そこで極力めんどくさくない方法を探してみた。

Excelの表をそのままHTML化できないものか？

真っ先に思いついたのはExcelの表をHTML化する方法。
tableタグが並んでいるHTMLソースよりも、Excelの表の方が一目で見てわかり易い。

しかしながらExcelをHTMLに変換する方法はあるものの、結局そのHTMLを貼り付けるという作業が発生する。

広範囲にわたるコピーペーストは間違いやレイアウト崩れの原因になることが多いため、極力この方法は避けたい。
HTMLに手を加えることなく修正や更新を行うことはできないものだろうか。

CSVをjQueryで読み込む方法

そこでExcelの表をCSVに変換し、Jqueryを用いて読み込む手段を選んだ。
使用するのは「jquerycsvtotable」

プラグインページ
ダウンロードページ

まずHTMLのヘッダーでjQueryとJSとCSSを読み込む

jsならびcssのパスはそれぞれの格納場所へのパスを記述。
同梱のcsvtable.cssは使用してもしなくてもよい。

Tableを表示したい箇所に、任意のクラス名をつけたdivタグを記述

スクリプトを記述

上記で記述したクラス名を指定。
今回は「book01.csv」を読み込むのでそのパスを記述する。

要注意！！CSVの文字コードを確認。

HTML側の記述は以上。
あとは上記で記述した場所にCSVファイルを保存して終了。
のはずだがExcel表を作った際のCSVファイルの文字コードによっては正常に表示されない。

表示されない場合はCSVファイルをテキストエディタを開き、文字コードをUTF-8にて保存すると表示される。

これで今後は、表を更新する場合はHTMLを操作せずとも、CSVファイルを編集するだけで更新が可能となる！
tableタグが苦手な僕にとっては夢のような話だ。

今回の記事で役に立ったこと、よかったこと。

• なんといっても表作成の高速化、簡略化が熱い。
• Excelで表作成→CSV変換→文字コード変換→ファイルアップという手順が必要になるが、いちいちタグを打ち、中身を書き換えるよりも早いと思われる。
• HTMLの知識がない人でも結果としてHTML編集が可能になる。
• デザイナー・コーダーの仕事が減る（かもしれない）

 - jQuery野郎