Excel の表を HTML の要素に変換
作成：2025/06/18
Excel など表計算ソフトの表データをＷｅｂページで利用したいことがある。そんな時、私は、
- 表データを新しいシートの左上にコピー＆ペーストする
- 必要に応じて列の並び順を変更したり、行を追加・削除する
- そのシートを並び順で１番左にして保存する
- エクセルのファイルを『桐 for Windows』で読み込む（桐 Excel ブリッジ）
- 新しい項目を計算式用として、他の項目の値や固定文字列を連結して HTML のソースにする
- HTML のソースが組み込まれた項目をテキスト書き出しする
- 書き出されたテキストを HTML エディタで読み込み、Ｗｅｂページの該当部分にペーストする
という手順を取る。
人によっては、
- Excel など表計算ソフトの機能で項目値や固定文字列を連結する計算式を作成する。
- ネット上の Excel データ ➡ HTML ソースのサービスを利用する。
という方法を採るであろう。
しかし、項目値をそのまま table のデータとするような場合は、少し大袈裟である。そこで、昨年秋にＷｅｂページのリダイレクト絡みでエディタの「正規表現」を囓るようになったので、ここでも正規表現を利用できないかと考えた......今さらながらとも言えるが（爆）
従来から知っていたことは、
Excel の複数のセルを選択し、データをクリップボードにコピーして、エディタ側でペーストすると、タブ区切りデータとなる
である。
また、⬇のようなことも推測した。
- ３０年くらい前のパソコン通信の時代に NIFP/NIFP for Windows などのログ閲覧ソフトでよく解らないながら設定した「改行文字」としての「¥n」は、正規表現だったのではないだろうか？
- タブ文字は、もしかして「¥」とタブの「t」を繋げた「¥t」ではないだろうか？
- 行頭の正規表現は、リダイレクトでも使った「^」であろう。
ネット検索してみたら推測通りであった💪
表計算ソフトで作成済の一覧表を HTML の table に変換する手順は次の通り。
- HTML エディタ（私の場合は Visual Studio Code）で table 要素を入力。
- 見出し行の項目を作成。
- 表計算ソフトでデータ行を範囲指定し、クリップボードにコピー。
- クリップボードのデータを市販、或いはオンライン・ソフトのエディタ（説明図では「秀丸エディタ」）の編集画面にペースト。
- 正規表現を有効にして行末の改行文字「¥n」を HTML での table の行終了部分「</td></tr>」＋「¥n」に置換。
- うまく行末が置換された。
- 同様にタブ文字「¥t」を HTML の「</td><td>」に置換。
- 最後は行頭「^」から HTML の「<tr><td>」への置換。リダイレクトの時の知識が役に立った！ ペースト先の状況によっては「<tr><td>」の前に「¥t」をいくつか加えても良い。
- 出来た HTML 断片をコピーし、HTML エディタ VS Code 側にペースト。
- ブラウザで閲覧すると、⬇のようになる。
⬆のままでは table としてあまりに素朴なので、⬇のように CSS で装飾する。
- ● CSS
-
- table.prefectures {
margin: 20px auto; width: 600px; border-collapse: collapse; border: gray solid 2px;
& th,td {padding: 3px 5px;}
& th {border: gray solid 2px; background-color: lavender;}
& td {border: gray solid 1px; border: gray solid 2px; background-color: lavender;}
& tr > td:first-of-type {background-color: lavender; border-right: gray solid 2px;}
& tr > td:nth-of-type(3) {text-align: right;} - }
- table.prefectures {
| 都県名 | 都県庁所在地 | 人口（万人） | 都県の木 | 都県の花 | 都県の鳥 |
|---|---|---|---|---|---|
| 東京都 | 東京２３区 | 14254 | イチョウ | ソメイヨシノ | ユリカモメ |
| 神奈川県 | 横浜市 | 923 | イチョウ | ヤマユリ | カモメ |
| 埼玉県 | さいたま市 | 733 | ケヤキ | サクラソウ | シラコバト |
| 千葉県 | 千葉市 | 628 | マキ | 菜の花 | ホオジロ |
| 茨城県 | 水戸市 | 280 | ウメ | バラ | ヒバリ |
| 栃木県 | 宇都宮市 | 187 | トチノキ | ヤシオツツジ | オオルリ |
| 群馬県 | 前橋市 | 188 | クロマツ | レンゲツツジ | ヤマドリ |
- この表は横スクロール可能。
なお、私がこの変換に「秀丸エディタ」を使ったのは、私が使っている Visual Studio Code、TeraPad、秀丸エディタ の中で最も正規表現での置換を行いやすいからである。置換文字入力欄の右にある「▶」をクリックすると、アンチョコが表示される（下図の赤楕円でマーク）。また、「⌵」（下図の青楕円）をクリックすると履歴を使うことも出来る。
アンチョコ機能はこのページを作成していて初めて気がついた。私の秀丸歴２８年は何だったのであろう（爆）
Visual Studio Code では、置換はずっとシンプルである。「. *」（赤楕円マーク）のアイコンをクリックすると、正規表現が有効になる。なお、フォントの都合で改行の「¥n」とタブの「¥t」は、それぞれ「∖n」「∖t」になる。
TeraPad での置換ダイアログは、秀丸 と VS Code の中間。ただし、「¥n」と「¥t」はオプションで正規表現での置換対象となるが、「^」は対象にならないのが残念である。TeraPad は、ウィンドウのサイズを記憶してくれるし、オプションで「常に全面」にいてくれるので、普段他のソフトと同時起動していても邪魔にならず、重宝しているのに......。
蛇足だが、正規表現を利用しての置換は、メール・アドレスを含む名簿の Excel ファイルから同報送信用のリストを作成する時も役に立つ。縦に並んだメール・アドレスのリストを対象に、行末の改行文字（¥n）➡ カンマ「,」、或いはセミコロン「;」の置換を行えば良いのである。
以上、プログラミングをしないからと昨年（2024年）秋まで「正規表現」を敬遠していた私だが、こんな役に立つ機能があったのである。一般の会社員でもこんな使い方を憶えておくと便利であろう。