ブログにCSVデータをシンプルなテーブルとして載せる方法

大した話ではありませんが、たまにCSVデータをブログに表として載せたい時があります。表計算ソフトから貼り付けて終わり、だと簡単なのですが、まず間違いなく余計なタグだらけで使えません。表が寸詰まりや固定幅になったり、ブログ全体のフォントが変更されたり...。

CSVをHTMLのテーブルに変換するJavascriptもあるようですが、余計なスクリプトは嫌だし、たまにしか使わないからなあという感じ。変換サイトもありますが、こんな時は思い切って手作業でやってみましょう。必要なのは高機能エディタだけで大して難しくありません。ただし、正規表現で置換する機能、または複数行同時編集できる機能があることが条件となります。

1. CSVデータを高機能エディタで開く。

AAA,BBB,CCC
EEE,FFF,GGG
III,JJJ,KKK

2. カンマ(,)を</td><td>で置き換える。

AAA</td><td>BBB</td><td>CCC
EEE</td><td>FFF</td><td>GGG
III</td><td>JJJ</td><td>KKK

3. 行頭(正規表現で^)を<tr><td>で置き換える。または複数行同時編集で<tr><td>を先頭に追加。

<tr><td>AAA</td><td>BBB</td><td>CCC
<tr><td>EEE</td><td>FFF</td><td>GGG
<tr><td>III</td><td>JJJ</td><td>KKK

4. 行末(正規表現で$)を</td></tr>で置き換える。または複数行同時編集で</td></tr>を行末に追加

<tr><td>AAA</td><td>BBB</td><td>CCC</td></tr>
<tr><td>EEE</td><td>FFF</td><td>GGG</td></tr>
<tr><td>III</td><td>JJJ</td><td>KKK</td></tr>

5. 上下をtable関連のタグで囲む。

<table>
<tbody>
<tr><td>AAA</td><td>BBB</td><td>CCC</td></tr>
<tr><td>EEE</td><td>FFF</td><td>GGG</td></tr>
<tr><td>III</td><td>JJJ</td><td>KKK</td></tr>
</tbody>
</table>

よし、できた！.htmlの拡張子で保存して、さっそくブラウザで表示してみましょう。

AAA	BBB	CCC
EEE	FFF	GGG
III	JJJ	KKK

あれ? 表の線が出ない。それに全然カッコ悪い...。なにこれ？表？

6. 見栄えを整えるためCSSを追加する。

先頭の<style type="text/css">〜</style>を追加します。<table>にもそれに合わせてクラス名を追加。元の表よりもCSSの方がだいぶ大きいですが仕方ありません。貼り付けるだけだし我慢しましょう。値を色々いじると文字の大きさや見栄えが変わって面白いですよ。

<style type="text/css">
<!-- 
.my_simple_table{
width: 100%;
border-collapse: collapse;
}
.my_simple_table th{
padding: 0px;
text-align: center;
vertical-align: top;
color: #333;
background-color: #eee;
border: 1px solid #b9b9b9;
font-size: small;
}
.my_simple_table td{
padding: 0px;
text-align: center;
background-color: #fff;
border: 1px solid #b9b9b9;
font-size: x-small;
}
-->
</style>

<table class="my_simple_table">
<tbody>
<tr><th>AAA</th><th>BBB</th><th>CCC</th></tr>
<tr><td>EEE</td><td>FFF</td><td>GGG</td></tr>
<tr><td>III</td><td>JJJ</td><td>KKK</td></tr>
</tbody>
</table>

今度こそ、できた！幅の指定がないので、デスクトップだろうがモバイルだろうが自動的に横幅が調整され、表がきちんと画面に収まります。何よりHTMLが無茶苦茶なタグだらけにならないのが気持ちいいです。

AAA	BBB	CCC
EEE	FFF	GGG
III	JJJ	KKK

ちなみに、左端の列も項目名を表すようにしたければ、EEEとIIIを囲むタグを<td></td>ではなく<th></th>に変えればいいだけです。

AAA	BBB	CCC
EEE	FFF	GGG
III	JJJ	KKK

項目部分の配色を変えるにはCSSの中のcolorやbackground-colorを変えるだけ。HTMLの色コードは検索すればいくらでも見つかるし、いろいろ試行錯誤してもいいでしょう。

AAA	BBB	CCC
EEE	FFF	GGG
III	JJJ	KKK

慣れると簡単だし面白いですよ。

※コードのカラー表示にはhighlight.jsを使っています。