TOPページ > Excel・IT開発 > Excel実務のノウハウ > 数式を使ってExcelの表をHTMLのテーブルにする

数式を使ってExcelの表をHTMLのテーブルにする|Excel実務のノウハウのお勉強

このエントリーをはてなブックマークに追加

Excelの表をテーブルHTML化するには

Excelの表をHTMLのテーブルに変換するには、数式とコピーの繰り返しで作成可能です。ここではプログラム(VBA、マクロ)を一切使わずに、数式だけで作成する方法について説明したいと思います。
なお、ここでW3Cの詳細に則って作りたい方は、ここでの説明の一部を作りかえれば比較的簡単にできると思います。


HTMLのテーブルの基本事項について

まずはテーブルのHTMLの説明です。

■Excelの表をHTMLのテーブルにしたところ
Excelの表をHTML化したところ
決してきれいな表とは言えませんが(笑)、とりあえずExcelのシートのA1:C4(4行3列)の表を使って矢印先のようなテーブルのHTMLを作ります。

■Excelの表とその表のHTMLタグ
Excelの表のHTMLタグ
タグについての細かい説明は割愛しますが、上記画像の右側はWebページとして見たときに表示される表をHTMLタグで表したものです。(数式を使ってこれを後で作成します)
既にお気づきの方もいるかもしれませんが、HTMLタグも規則性があります。そうです、この規則性を覚えれば数式を簡単に作ることができます。
見出しの部分に着目すると、「<tr>」と「<td>」というタグがあります。これらがExcelで言うところの「行と列」になります。 HTMLのTRとTD
「<tr>」は「行(区切り)」を指していて、今回はExcelの表は4行なので4つの「<tr>」があります。
「<td>」は「列(区切り)」を指していて、同様にExcelの表は3列なので3つの「<td>」があります。
(「<td>」に関して言えば、CSVファイルのカンマ区切りと同じ使い方とも言えます)
先頭の「<table>」と末尾の「</table>」は必ずセットで必要です。「テーブルのHTMLを作る時には必須」と、おまじない程度にして覚えておくと良いと思います。(「border=1」は罫線を意味していて、無くても大丈夫ですが、今回は分かりやすく説明するために入れています)


数式を使ってExcel表をHTMLタグ化する

それでは実際にExcelの表と数式を組み合わせてHTMLタグ化したいと思います。
なお、1個ずつタグを設定するのは面倒なので、Excelの機能を使って少しでも簡素化したいと思います。

■Excelの表の横にtr、td文字を置く
HTMLタグ用に数式準備
上記のようにExcel表の1行目を下にずらし、右側には先ほどのテーブル化するのに使ったHTMLタグを入れます。
なんとこれで作業の半分が終了しました!


数式を入れるときには「絶対参照」が楽

そして実際に数式を入れていきます。下記の図ではセルE2に「=$E$1&A2」と入れています。 HTMLタグ用の数式は絶対参照が便利

下記は↑の数式を拡大したものです。ここでのポイントは「絶対参照」です。想定としては、この数式の入ったセルをそのまま下にコピーすることを想定しています。
そのため、「$」を入れることでコピーしても参照元のセルを変えないようにしています。
数式の詳細図

本来は下のセルにコピーするだけでなく、このまま右側のセルにもコピーしたいのですが「tr」が不要のためできません。
そこで同じようにF列の2行目のセルに数式を入れいます。
右のセルにも同様に数式を入れる
上記のように「=$F$1&B2」と「$F」にするならば、セルG1の「td」は不要になりますが、ここでは3つのセルに数式を入れてそれをまとめてコピーしたいと思います。

■3つのセルに数式を入れたところ
3個のセルに数式を入れる
後はこの3つのセルを下にコピーします。
3個のセルをコピー
3個のセルにデータが表示

この作業でほぼ終了しました(「table」の文字はこのタイミングで入れても大丈夫ですが、今回は後で入れます)。


HTMLファイルに「数式結果」をコピーする

最後にHTMLファイルを開いてこの内容をコピーします。
今回はメモ帳に貼り付けます。
メモ帳にコピーする
メモ帳1行目にコピー

貼付後、おまじないの「<table>」、「</table>」を上下に入れてOKです。なお、貼り付け後、空改行や「<td>」の横の空白は「タブ」と言われるもので、画面にテーブルとして表示されるときには無視されます。
メモ帳に貼り付け後、tableで閉じる

どうしても気になる場合はExcelの数式で直す(数式を付け足す)こともできます。
Excelの数式を結合する
上記のように数式の入ったセルを「&」で追加するだけです。これでこのセルをコピー&ペーストすればOKです。
下記は実際にHTMLファイルとして保存してブラウザで開いたところです。「border=1(罫線、境界線)」有りと無しパターンです。
Excelの数式で作成したHTMLテーブル

簡単な表をHTMLで作成するならば、今回のような方法でもWebブラウザで閲覧でき、対応可能です。
もっと細かい表や、表の1行を1HTMLファイルとする場合、あるいはかなりカスタマイズしたい場合などは、プログラム開発した方がはるかに高速で便利です。


このエントリーをはてなブックマークに追加

Excel実務のノウハウ 関連ページ


グローウィン有限会社
東京都三鷹市下連雀3-27-1 三協ビル2階-B 地図を見る
トップページ
入力代行関連
Excel・IT開発
中国アテンド
会社概要
プレスリリース
お問い合わせ
お問い合わせ内容一覧

英文ページ(English)
中文ページ
プレスリリース お問い合わせフォーム