プラスα空間

ブログ in お市 のーと

Excelで簡単にHTMLのtableを作る

私は、WordPressを使ったブログの中で、表を多用しています。

WordPressで表を作るためのplug-inを探しましたが、あまり良さそうな物はありませんでした。

それで、困ったあげく、Microsoft Excelを使って、生のHTMLを吐き出し、それをWordPressに貼付ける事にしました。

この方法が、思いのほか快適で、表を作るのが非常に楽になりました。

次の表を作りたいとします。

品名個数
イチゴ10
にんじん1
サンダル2

この表は、次の手順で作れます。

  1. Excelで普通の表を作る
  2. tableの要素タグと対応させる
  3. 各要素タグを結合
  4. WordPressに貼付け

では、順を追って説明します。

用意するもの

私はExcelを使いましたが、同等の機能を持つ表計算ソフトなら、何でも良いと思います。

使う機能(関数)は、文字列の結合程度です。

1. Excelで普通の表を作る

まず、最終的に作りたい表をExcelで作ります。

オリジナル表

実は、このままではtableのタグを埋め込む時に不便なので、上下に2行ずつ隙間を空けておきます。

余裕を追加した表

ここまでが、生の表の準備です。

2. tableの要素タグと対応させる

次が、この方法の肝です。

次の様に、表の各要素を、HTMLのtableタグに対応させます。(クリックすると拡大します)

表の要素タグ

この時、<table>や<tr>タグ等、必要な物を表に追加します。

実際に、Excelに入力する式としては、次の様になります。

<table border="1">
<tbody>
<tr>="<th>"&A3&"</th>"="<th>"&B3&"</th>"</tr>
<tr>="<td style="&CHAR(34)&"text-align: center;"&CHAR(34)&">"&A4&"</td>"="<td style="&CHAR(34)&"text-align: center;"&CHAR(34)&">"&B4&"</td>"</tr>
<tr>="<td style="&CHAR(34)&"text-align: center;"&CHAR(34)&">"&A5&"</td>"="<td style="&CHAR(34)&"text-align: center;"&CHAR(34)&">"&B5&"</td>"</tr>
<tr>="<td style="&CHAR(34)&"text-align: center;"&CHAR(34)&">"&A6&"</td>"="<td style="&CHAR(34)&"text-align: center;"&CHAR(34)&">"&B6&"</td>"</tr>
</tbody>
</table>

3. 各要素タグを結合

こうして作った各要素タグを、Excelのconcatinate

各要素タグの結合

実際に、Excelに入力する式としては、次の様になります。

=CONCATENATE(E1,F1,G1,H1)
=CONCATENATE(E2,F2,G2,H2)
=CONCATENATE(E3,F3,G3,H3)
=CONCATENATE(E4,F4,G4,H4)
=CONCATENATE(E5,F5,G5,H5)
=CONCATENATE(E6,F6,G6,H6)
=CONCATENATE(E7,F7,G7,H7)
=CONCATENATE(E8,F8,G8,H8)

すると、次の結果が表示されると思います。

結合結果

4. WordPressに貼付け

この、J1〜J8をコピーして、WordPressに貼付けます。

この時、「テキスト」モードに切り替えておき、生のHTMLを書き込める様におきます。

テキストモード

これで、完成です。

品名個数
イチゴ10
にんじん1
サンダル2

この方法を使えば、色々応用が利くと思うので、試してみて下さい。

コメントを残す