HTMLの表組みはとても面倒です。もっと簡単に表を現すタグを作れないかいろいろ工夫してみましたが、結局同じように複雑になります。仕方ないので少し楽にtableタグを作る方法を工夫してみました。
簡単な表組みを表現する方法としてタブ区切りのデータがあります。これならエクセルなどから簡単に作れますし、手で書いても大した手間ではありません。複雑なことはできませんが、すべての表の基本部分はこれで表現できます。どんなに複雑な表でもいったんこの形でHTML化し、次に細部を修正していくようにすれば作業が簡単になりますし、分業も可能になります。
たとえば図1のような表はtableタグでは図2のように書きます。
ABC | DEF | GHI |
abd | def | ghi |
<table border="1"> <tr> <td>ABC</td> <td>DEF</td> <td>GHI</td> </tr> <tr> <td>abd</td> <td>def</td> <td>ghi</td> </tr> </table>
最初からこんなタグを書くのは大変です。用意するのは下のようなタブ区切りのデータです。([TAB]の部分はタブ文字が入ります)
ABC[TAB]DEF[TAB]GHI
abc[TAB]def[TAB]ghi
元データが揃ったら次に行の先頭と最後にマークを入れます。ここでは「≪」と「≫」という文字を使いました。(ここで使う文字はデータ中に使われていない文字です。文字コード表などから適当なものを選んでください)
マークを入れるのは手で入力しても良いですし、置換を利用しても可です。BOX選択からペーストを利用することもできますね。もちろんキーボードマクロも結構です。(この文字の挿入についてのテーマは来月取り上げましょう。)
さてこんな感じのデータに加工して準備が整いました。
≪ABC[TAB]DEF[TAB]GHI≫
≪abc[TAB]def[TAB]ghi≫
いよいよ加工に入りましょう、まず下のような正規表現による置換を行います。
検索文字列 \t 置換文字列 </td>\n\t\t<td>
「\t」はタブ文字、「\n」は改行文字を表します。置換文字をよく見てください。HTMLのtableタグの各セル間の文字列と同じになっていることが分かります。
<td>def</td>
<td>ghi</td>
この置換でデータは以下の形に変形されます。
≪ABC</td> <td>DEF</td> <td>GHI≫ ≪abc</td> <td>def</td> <td>ghi≫
この状態で各行の先頭と最後を除き、うまくタグが作れています。次に各行の先頭と最後を処理します。ここで行頭と行末に入れた「≪」と「≫」が役に立ってきます。このふたつのマークを正規表現で置換します。
検索文字列 ≪ 置換文字列 \t<tr>\n\t\t<td>
検索文字列 ≫ 置換文字列 </td>\n\t</tr>
今回の置換で処理した部分は下の赤マーカーと青マーカーです。
これで各行の整形は完了です。後は<table>タグで前後を挟むだけですね。
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
複雑なテーブルタグもこんな手順を使って作ると簡単に作れます。次回はこれと同じ作業をマクロを使って行う方法を紹介します。
【ポイント】
タブ区切りデータは各行のフィールドの数、つまりタブ文字の数を同じにしておくことがポイントです。もしセルを結合する部分があったら、最初のセルにデータを入れ、結合されるセルは何もない状態、タブ文字が連続する状態にしておくと良いでしょう。