要約：<table data="データソース.tsv"></table> と一行で書けたら楽だな～と思い、テンプレートを作ってみました。Chromium43、Firefox38で動作確認。OSはWindow7 32bit。
図（画像）と同じように、表もHTML外部のオブジェクトにしたい
「図表」と括って表現されるように、図・表とも文章を補強する一まとまりのオブジェクトなのに、HTMLでは画像（図）とテーブル（表）の扱いが全然違って違和感があります。表の生データを、文字と同じレベルでHTML内に直接書くって変。図と同様にデータソースだけ指定し、表の体裁はCSSで調整、データ並びとか可変的なビューはJavaScriptで操作する。という方がHTML内の文書構造が分かりやすく、構造と外見が分離され、表データの一体性が保たれて良いのでは。
Web Componentsとか他のマークアップ言語とかでは出来るかもしれませんが（適当）、ブラウザだけで出来たら便利なのでJavaScriptとCSSで作ってみました。CSSの疑似クラスはいろいろな表組パターンができ、同じ体裁でデータソースだけ差し替えるのも楽です。
データソースの形式はとりあえずタブ区切りテキスト（TSV）のみ。行・列区切り以外に改行・タブがある形式は今回想定してません。CSVは、区切り文字以外のカンマや引用符の処理が大変なので後回し。便利なライブラリが見つかったら考えます。
ゆくゆくはHTML内の文章も項目別の外部テキストにして、HTMLはそれら素材をまとめる「タグのみ」で文書を作れたらいいなぁ。昨日の「画像＋テキスト」テンプレートはその準備の一環。Web Componentsがまさにこういう方向かもしれませんが、今のHTML＋JavaScriptでも可能な所までやりたい。
ファイル一式と説明
tsv2table.zipにまとめました（2.2KB）。下の5ファイルあり、とりあえず全部同じフォルダに置いてHTMLをブラウザで開く。Chromiumでは、ローカルファイル読み込みを許可する起動オプション--allow-file-access-from-filesが必要。CSSとTSVは単なるサンプルで、後者のデータは、先月PostgreSQL 9.5の新しいGROUP BYを紹介した時のから抜粋。先頭行が列名のヘッダ。
↓ HTMLはこんな感じで、外部CSSとJavaScriptを読み込み、tableタグでクラス（CSS用）とデータソースのTSVを指定するだけ。
↓ 根幹となるJavaScript。ページ読み込み後にtableタグを走査し、data属性でTSVが指定されてる前提で一つずつ処理。一時的にobjectタグを生成して読み込み、最低限必要なtr、th、tdタグのみ付けてHTMLテーブルを作ります。最後にあるのは、FirefoxアドオンAuto Reload用のおまけ（TSVが更新されたらHTMLを自動リロード。7月1日に書いた裏技?と同じ）
サンプルCSSの二つは疑似クラスの:nth-childを活用（参考：Mozilla Developer Network）。あちこち体裁を整えたので長くなりましたが、単に罫線を引くだけならもっと簡単。詳細は明日書きます。
↓ 結果。一つ目がFirefox38（冒頭の再掲）、二つ目がChromium43。デフォルトフォントが違う点を除き、同じ体裁になりました。CSSだけで、異なるスタイルの表が簡単にできます。
使い道、課題
PostgreSQLやRはデータを作るのは自在ですが、それを「人に見せる表」にするのが結構面倒でした。以前はコピペしてExcelやInDesignに持っていったり、Rで罫線入りの表を作ってPDF出力したり…。もうそれはやめて、データからの作表は基本この「TSV→HTML」に一本化したい。どんなプログラムやアプリケーションでもTSV出力さえすれば同じスタイルの表になり、フォント指定とか整えて作れば全てのTSVに使えます。PDFが必要ならブラウザからPDF出力すればいいし。
一つ問題は、長い表を複数ページに出力・印刷する場合、ExcelやInDesignのように「各ページに列名ヘッダを入れる」のが出来ない。もともとページ概念のないHTMLでそこまで求めるかという話ですが、ページ当たりの行数を指定してJavaScriptで表分割するとか、暇ができたら考えます。