ツール備忘録：ExcelをHTMLに変換する方法

2018年8月30日 最終更新日時 : 2018年9月16日 akinori

Excelの表をHTMLに変換したい

このブログをはじめて最も苦戦したのが表の作成でした。

PHPやPythonに触れ、プログラムを覚えてからは表の作成はループ処理で行うことがほとんど。
tdタグの数を数える作業がこれほど進まず苦痛だったとは...。

この苦行から逃れるため「絶対に何か方法はあるはず！」と考え調査してみる事にしました。
変換に使うサンプルはWowma!のCSVファイルで照会したitem.csv を切詰めたテスト版のこいつ。

Excel To Table

Excelの【名前を付けてHTML保存】で実験

天下のマイクロソフトさんが作った機能なのだから一発OKさ！
そんな思いもむなしく、散々な結果に...。

<table border=0 cellpadding=0 cellspacing=0 width=862 style='border-collapse:
 collapse;table-layout:fixed;width:647pt'>
 <col width=72 span=7 style='width:54pt'>
 <col width=358 style='mso-width-source:userset;mso-width-alt:11456;width:269pt'>
 <tr height=25 style='height:18.75pt'>
  <td height=25 class=xl65 width=72 style='height:18.75pt;width:54pt'>No</td>
  <td class=xl65 width=72 style='border-left:none;width:54pt'>フィール<span
  style='display:none'>ド<ruby>名<font class="font5"><rt>メイ</rt></font></ruby></span></td>
  <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>項目<span
  style='display:none'><rt>コウモク</rt></span></ruby><ruby>名<span
  style='display:none'><rt>メイ</rt></span></ruby></td>
  <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>入力<span
  style='display:none'><rt>ニュウリョク</rt></span></ruby></td>
  <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>型<span
  style='display:none'><rt>カタ</rt></span></ruby></td>
  <td class=xl65 width=72 style='border-left:none;width:54pt'>バイト<ruby>数<span
  style='display:none'><rt>スウ</rt></span></ruby></td>
  <td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>検索<span
  style='display:none'><rt>ケンサク</rt></span></ruby><ruby>対象<span
  style='display:none'><rt>タイショウ</rt></span></ruby></td>
  <td class=xl65 width=358 style='border-left:none;width:269pt'><ruby>入力値<span
  style='display:none'><rt>ニュウリョクチ</rt></span></ruby><ruby>説明<span
  style='display:none'><rt>セツメイ</rt></span></ruby></td>
 </tr>
 <tr height=175 style='height:131.25pt'>
  <td height=175 class=xl65 align=right style='height:131.25pt;border-top:none'>1</td>
  <td class=xl65 style='border-top:none;border-left:none'>ctrlCol</td>
  <td class=xl65 style='border-top:none;border-left:none'>コントロ<span
  style='display:none'>ールカラム</span></td>
  <td class=xl65 style='border-top:none;border-left:none'>必須</td>
  <td class=xl65 style='border-top:none;border-left:none'><ruby>文字列<span
  style='display:none'><rt>モジレツ</rt></span></ruby></td>
  <td class=xl65 align=right style='border-top:none;border-left:none'>1</td>
  <td class=xl65 style='border-top:none;border-left:none'>-</td>
  <td class=xl66 width=358 style='border-top:none;border-left:none;width:269pt'>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br>
    コントロールカラムのヘッダーがない場合エラーとなる。<br>
    ※stock.csvの場合、Dは設定できません。</td>
 </tr>
 <tr height=25 style='height:18.75pt'>
  <td height=25 class=xl65 align=right style='height:18.75pt;border-top:none'>2</td>
  <td class=xl65 style='border-top:none;border-left:none'>lotNumber</td>
  <td class=xl65 style='border-top:none;border-left:none'>ロットナ<span
  style='display:none'>ンバー</span></td>
  <td class=xl65 style='border-top:none;border-left:none'>-</td>
  <td class=xl65 style='border-top:none;border-left:none'><ruby>数値<span
  style='display:none'><rt>スウチ</rt></span></ruby></td>
  <td class=xl65 align=right style='border-top:none;border-left:none'>18</td>
  <td class=xl65 style='border-top:none;border-left:none'>-</td>
  <td class=xl65 style='border-top:none;border-left:none'>　</td>
 </tr>
 <tr height=25 style='height:18.75pt'>
  <td height=25 class=xl65 align=right style='height:18.75pt;border-top:none'>3</td>
  <td class=xl65 style='border-top:none;border-left:none'>itemCode</td>
  <td class=xl65 style='border-top:none;border-left:none'>商品コー<span
  style='display:none'>ド</span></td>
  <td class=xl65 style='border-top:none;border-left:none'>-</td>
  <td class=xl65 style='border-top:none;border-left:none'><ruby>文字列<span
  style='display:none'><rt>モジレツ</rt></span></ruby></td>
  <td class=xl65 align=right style='border-top:none;border-left:none'>256</td>
  <td class=xl65 style='border-top:none;border-left:none'>◎</td>
  <td class=xl65 style='border-top:none;border-left:none'>　</td>
 </tr>
 <![if supportMisalignedColumns]>
 <tr height=0 style='display:none'>
  <td width=72 style='width:54pt'></td>
  <td width=72 style='width:54pt'></td>
  <td width=72 style='width:54pt'></td>
  <td width=72 style='width:54pt'></td>
  <td width=72 style='width:54pt'></td>
  <td width=72 style='width:54pt'></td>
  <td width=72 style='width:54pt'></td>
  <td width=358 style='width:269pt'></td>
 </tr>
 <![endif]>
</table>

え？ナニコレ？？
こんな簡単なテーブルを何故にここまで複雑に出来るのでしょう...。
よく見るとふり仮名が display:none で登録されてます。単語が分割されてるってことは形態素分析かけたのでしょう。

<td class=xl65 width=72 style='border-left:none;width:54pt'><ruby>項目<span
  style='display:none'><rt>コウモク</rt></span></ruby><ruby>名<span
  style='display:none'><rt>メイ</rt></span></ruby></td>

ごめんなさい、困難ごちゃごちゃしたのは不要です。

Googleさんに聞いてみました

まずは検索ワード【excel html テーブル 変換】で実行。
おっ！結構ツール提供してくださる方がいるんですね。
どれもExcelの表をコピーしWEBの所定の位置にペーストするだけ。それぞれ動作が少しづつ違う所がまた面白いです。
と言うことで検索結果を4サイト備忘録として残します。

使い方がシンプルな Excel to HTML

TECH-UNLIMiTEDさん提供のExcel⇒HTMLテーブル変換ツール。thタグ考慮されていて、行、列、行+列の3タイプに対応してます。
タブでインデントを付けてくれるので見やすさも最高です。

<table>
	<tr>
		<th>No</th>
		<th>フィールド名</th>
		<th>項目名</th>
		<th>入力</th>
		<th>型</th>
		<th>バイト数</th>
		<th>検索対象</th>
		<th>入力値説明</th>
	</tr>
	<tr>
		<td>1</td>
		<td>ctrlCol</td>
		<td>コントロールカラム</td>
		<td>必須</td>
		<td>文字列</td>
		<td>1</td>
		<td>-</td>
		<td>&quot;選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。</td>
	</tr>
	<tr>
		<td>コントロールカラムのヘッダーがない場合エラーとなる。</td>
	</tr>
	<tr>
		<td>※stock.csvの場合、Dは設定できません。&quot;</td>
	</tr>
	<tr>
		<td>2</td>
		<td>lotNumber</td>
		<td>ロットナンバー</td>
		<td>-</td>
		<td>数値</td>
		<td>18</td>
		<td>-</td>
		<td></td>
	</tr>
	<tr>
		<td>3</td>
		<td>itemCode</td>
		<td>商品コード</td>
		<td>-</td>
		<td>文字列</td>
		<td>256</td>
		<td>◎</td>
		<td></td>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>

一部でおかしな挙動がありました。

		<td>&quot;選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。</td>
	</tr>
	<tr>
		<td>コントロールカラムのヘッダーがない場合エラーとなる。</td>
	</tr>
	<tr>
		<td>※stock.csvの場合、Dは設定できません。&quot;</td>
	</tr>

ここはセル内改行を行っていた箇所です。
どうやら別々に認識されて違う行に移されてしまったみたいです。

インデントが変えられるExcelからHTMLテーブル変換

エーオーシステムさんが提供して下さっているツールです。

インデントって確かに個人個人で癖あるんですよね。Python使いは「インデントは半角スペース2つ！」とか言いそうです。ちなみに私は基本タブ。慣れたインデント以外はチョット気持ち悪かったりします。「そこに目を付けるか！」そんな面白いツールです。では、タブ区切りで実行してみます。

<table>
	<tr>
		<td>No</td>
		<td>フィールド名</td>
		<td>項目名</td>
		<td>入力</td>
		<td>型</td>
		<td>バイト数</td>
		<td>検索対象</td>
		<td>入力値説明</td>
	</tr>
	<tr>
		<td>1</td>
		<td>ctrlCol</td>
		<td>コントロールカラム</td>
		<td>必須</td>
		<td>文字列</td>
		<td>1</td>
		<td>-</td>
		<td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。 コントロールカラムのヘッダーがない場合エラーとなる。 ※stock.csvの場合、Dは設定できません。</td>
	</tr>
	<tr>
		<td>2</td>
		<td>lotNumber</td>
		<td>ロットナンバー</td>
		<td>-</td>
		<td>数値</td>
		<td>18</td>
		<td>-</td>
		<td></td>
	</tr>
	<tr>
		<td>3</td>
		<td>itemCode</td>
		<td>商品コード</td>
		<td>-</td>
		<td>文字列</td>
		<td>256</td>
		<td>◎</td>
		<td></td>
	</tr>
</table>

先程のExcel To HTMLで発生したセル内改行の問題はクリアされてます。(改行はなくなり、スペース区切りで結合されてます)

<td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。 コントロールカラムのヘッダーがない場合エラーとなる。 ※stock.csvの場合、Dは設定できません。</td>

ExcelからHTMLテーブル変換もシンプルなテーブルを吐き出してくれて大満足です。

セル内改行のあるExcelを快適変換

タグインデックスさんが提供してくれているExcel⇒HTMLテーブル変換ツール。

使い方はいたってシンプル。上記2つのツールに無かった特徴的な点が【セル内改行の変換ルール】を設定できる事。作ってみたテーブルがこちら。

<table border="1">

<thead>

<tr>
<th>No</th>
<th>フィールド名</th>
<th>項目名</th>
<th>入力</th>
<th>型</th>
<th>バイト数</th>
<th>検索対象</th>
<th>入力値説明</th>
</tr>

</thead>

<tbody>

<tr>
<th>1</th>
<td>ctrlCol</td>
<td>コントロールカラム</td>
<td>必須</td>
<td>文字列</td>
<td>1</td>
<td>-</td>
<td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br>コントロールカラムのヘッダーがない場合エラーとなる。<br>※stock.csvの場合、Dは設定できません。</td>
</tr>

<tr>
<th>2</th>
<td>lotNumber</td>
<td>ロットナンバー</td>
<td>-</td>
<td>数値</td>
<td>18</td>
<td>-</td>
<td></td>
</tr>

<tr>
<th>3</th>
<td>itemCode</td>
<td>商品コード</td>
<td>-</td>
<td>文字列</td>
<td>256</td>
<td>◎</td>
<td></td>
</tr>

</tbody>

</table>

border="1" が勝手に入ってますが、まぁこれくらいなら修正簡単なので問題ないですね。

注目はここ。

<td>選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br>コントロールカラムのヘッダーがない場合エラーとなる。<br>※stock.csvの場合、Dは設定できません。</td>

見事です。

スタイルシートまで作るExcel⇒HTML変換ツール

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)ネーミングセンスはさておき、誰が提供してくださってるのでしょか。こんな便利なツール、沢山テーブル書く前に知りたかったです。最大の特徴はスタイルシートの作成！thタグのカラー指定までできてしまいます。

<style>
table {
	border-collapse: collapse;
}
th {
	border: solid 1px #666666;
	color: #000000;
	background-color: #ff9999;
}
td {
	border: solid 1px #666666;
	color: #000000;
	background-color: #ffffff;
}
</style>
<table>
	<thead>
		<tr>
			<th>
				No
			</th>
			<th>
				フィールド名
			</th>
			<th>
				項目名
			</th>
			<th>
				入力
			</th>
			<th>
				型
			</th>
			<th>
				バイト数
			</th>
			<th>
				検索対象
			</th>
			<th>
				入力値説明
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>
				1
			</th>
			<td>
				ctrlCol
			</td>
			<td>
				コントロールカラム
			</td>
			<td>
				必須
			</td>
			<td>
				文字列
			</td>
			<td>
				1
			</td>
			<td>
				-
			</td>
			<td>
				選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br />
				コントロールカラムのヘッダーがない場合エラーとなる。<br />
				※stock.csvの場合、Dは設定できません。
			</td>
		</tr>
		<tr>
			<th>
				2
			</th>
			<td>
				lotNumber
			</td>
			<td>
				ロットナンバー
			</td>
			<td>
				-
			</td>
			<td>
				数値
			</td>
			<td>
				18
			</td>
			<td colspan="2">
				-
			</td>
		</tr>
		<tr>
			<th>
				3
			</th>
			<td>
				itemCode
			</td>
			<td>
				商品コード
			</td>
			<td>
				-
			</td>
			<td>
				文字列
			</td>
			<td>
				256
			</td>
			<td colspan="2">
				◎
			</td>
		</tr>
	</tbody>
</table>

セル内改行はこんな感じで見やすいです。

<td>
	選択肢別在庫の軸を設定(今ある軸を削除して再作成)する場合はN、在庫数を更新する場合Uを設定する。設定がない場合(空の場合)、処理をスキップする。<br />
	コントロールカラムのヘッダーがない場合エラーとなる。<br />
	※stock.csvの場合、Dは設定できません。
</td>

まとめ

備忘録として記載した4つのツール共に特徴があり調べていて楽しかったです。
私の用途としては、タグインデックスさんのツールを最も利用するかなぁ。
これが判ると億劫になっていた各モールのAPI仕様もこのブログに記載できそうな気がしてきました。

＼ 最新情報をチェック ／

カテゴリー
html備忘録
タグ

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

前の記事
業務用備忘録：コピー機価格の価格比較
2018年8月29日
次の記事
楽天市場API：楽天プロダクト情報取得
2018年8月30日