Contents
- 図(画像)と同じように、表も
HTML 外部のオブジェクトにしたい - ファイル一式と説明
- 使い道、課題
関連記事 » 2016 年 8 月 20 日(Web 上で動く簡単なサンプルとデモ)
図(画像)と同じように、表も HTML 外部のオブジェクトにしたい
「図表」と括って表現されるように、図・表とも文章を補強する一まとまりのオブジェクトなのに、HTMLWeb Components
データソースの形式はとりあえずタブ区切りテキスト(TSV)のみ。行・列区切り以外に改行・タブがある形式は今回想定してません。CSV
ゆくゆくは
ファイル一式と説明
tsv2table.zipにまとめました(2.2KB)。下の↓
<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="table_type1.css"> <link rel="stylesheet" href="table_type2.css"> <script src="tsv2table.js"></script> </head> <body> <table class="type1" data="example.tsv"></table> <table class="type2" data="example.tsv"></table> </body> </html>
↓ 根幹となる
window.addEventListener('load', function() { var tbls = document.getElementsByTagName('table'), len = tbls.length, obj = document.createElement('object'); for (var i = 0; i < len; i++) { var t = tbls[i], o = obj.cloneNode(); o.setAttribute('tid', i); o.onload = function(e) { loadTsv(e) }; o.data = t.getAttribute('data'); document.body.appendChild(o); } }); function loadTsv(e) { var o = e.target, tsv = o.contentDocument.body.textContent, rows = tsv.split(/[\n\r]+/), nrow = rows.length, tid = o.getAttribute('tid'), tbl = document.getElementsByTagName('table')[tid], ary = [], s = document.createElement('script'); ary.push('<tr><th>'); ary.push(rows[0].split(/\t/).join('<th>')); for (var i = 1; i < nrow; i++) { if (rows[i].length === 0) break; ary.push('<tr><td>'); ary.push(rows[i].split(/\t/).join('<td>')); } tbl.innerHTML = ary.join(''); // remove OBJECT element o.parentNode.removeChild(o); // add dummy script tag for Firefox Auto Reload s.src = o.data; document.body.appendChild(s); }
サンプル
table.type1 { border-collapse: collapse; border-bottom: 2px solid black; border-top: 2px solid black; font-size: 12px; margin:2em 1em; } table.type1 tr { border-width: 0; border-style: solid; } table.type1 tr:nth-child(2) td { padding-top: 0.5em; } table.type1 tr:last-child td { padding-bottom: 0.4em; } table.type1 tr:first-child { border-bottom: 4px double black; } table.type1 th { padding: 0.5em; } table.type1 td { padding: 0.2em 0.5em 0.1em 0.5em; white-space: nowrap; } table.type1 td:nth-child(6n+2) { padding-right: 1em; text-align: right; } table.type1 td:nth-child(6n) { padding-right: 1em; text-align: right; }
table.type2 { border-collapse: collapse; font-size: 12px; margin:2em 1em; } table.type2 th { background: gray; color: white; padding: 0.3em 0.5em; } table.type2 th:first-child { border-left: 1px solid gray; } table.type2 th:last-child { border-right: 1px solid gray; } table.type2 td { border: 1px solid gray; height: 4em; padding: 0.2em 0.5em 0.1em; } table.type2 tr:nth-child(2n) { background: whitesmoke; } table.type2 td:nth-child(6n+2) { text-align: center; } table.type2 td:nth-child(7n-2) { max-width: 12em; } table.type2 td:nth-child(6n) { text-align: center; }
↓ 結果。一つ目が
使い道、課題
PostgreSQL一つ問題は、長い表を複数ページに出力・印刷する場合、Excel