<span class="mt-enclosure mt-enclosure-image" /><img alt="エクセルの表をHTML Tableタグに変換するツール" src="http://web-marketing.zako.org/images/HTML-Tables-From-excel.png" width="514" height="204" style="" /></span>

<p>エクセルにまとめておいた資料をHTMLのTableにしたいということ、たまにありますよね。 その際、いちいち CONCATENATE とか使ってHTMLタグを生成するのも面倒、、、そんな時に使えそうなのがこのツールです。</p>

<!--more-->
<h3 class="header-label">エクセルの表をHTMLの表に変換してくれる「Tableizer」</h3>
<p>「<a class="web-site-link" href="http://tableizer.journalistopia.com/" onclick="window.open('http://tableizer.journalistopia.com/'); return false;">TABLEIZER!</a>」は、<strong>エクセルの表を貼り付けるとHTMLのTableタグで表を生成してくれる</strong>便利ツール。</p>
<p>そのままでは日本語が通らないので ちょい技が必要ですが、かなり便利です。</p>
<h4 class="header-label">Tableizerで日本語を通す方法</h4>
<p>サービスサイト側で文字エンコードが指定されていないので、ブラウザの設定で文字エンコードを「西欧(ISO-8859-1)」に変更してください。<br /><img src="http://lh4.ggpht.com/_fRSz8mJZTZY/SUPB5LeM0kI/AAAAAAAAOck/_vQ_RC4BPRQ/s400/HTML-Tables-From-excel-2.jpg" /></p>

<h4 class="header-label">サンプルテーブル</h4>
<p>↓こんな感じのテーブルが生成されます。 調査データをサイトへ掲載するときにすごく役立ちそうですよね。</p>
<style type="text/css">
table.tableizer-table {border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} .tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;}
.tableizer-firstrow td {background-color: #FDA500; color: #FFF; font-weight: bold;}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><td>Demographics</td><td>U.S. Bloggers</td><td>European Bloggers</td><td>Asian Bloggers
</td></tr> <tr><td>Male</td><td>57%</td><td>73%</td><td>73%
</td></tr> <tr><td>Age</td><td></td><td></td><td>
</td></tr> <tr><td>18-34 years old</td><td>42%</td><td>48%</td><td>73%
</td></tr> <tr><td>35+</td><td>58%</td><td>52%</td><td>27%
</td></tr> <tr><td>Single</td><td>26%</td><td>31%</td><td>57%
</td></tr> <tr><td>Employed full-time</td><td>56%</td><td>53%</td><td>45%
</td></tr> <tr><td>Household income >$75,000</td><td>51%</td><td>34%</td><td>9%
</td></tr> <tr><td>College graduate</td><td>74%</td><td>67%</td><td>69%
</td></tr> <tr><td>Average blogging tenure (months)</td><td>35</td><td>33</td><td>30
</td></tr> <tr><td>Median Annual Investment</td><td>$80</td><td>$15</td><td>$30
</td></tr> <tr><td>Median Annual Revenue</td><td>$200</td><td>$200</td><td>$120
</td></tr> <tr><td>% Blogs with advertising</td><td>52%</td><td>50%</td><td>60%
</td></tr> <tr><td>Average Monthly Unique Visitors</td><td>18000</td><td>24000</td><td>26000
</td></tr> <tr><td>平均ブログ収入</td><td>$104</td><td>$100</td><td>$72
</td></tr> <tr><td>訪問者1万人あたり収入</td><td>6,124</td><td>4,417</td><td>2,935
</td></tr></table><br />
<p>↓画像のようにエクセルデータをコピペするだけでOKです。 バイナリデータのタブ区切りで認識しているみたいです。<br /><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SUPEJhEUuOI/AAAAAAAAOdE/jxSj7n-ZHS4/s400/HTML-Tables-From-excel-3.jpg" /></p>

<h4 class="header-label">生成されたタグ</h4>
<p>厳密に言うと、HTMLタグとCSSが生成されます。 CSSは &lt;head&gt; &lt;/head&gt; 間か、外部ファイルに移しても良いかもしれませんね。</p>
<code>&lt;style type=&quot;text/css&quot;&gt;
table.tableizer-table {border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; font-size: 12px;} .tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;}
.tableizer-firstrow td {background-color: #FDA500; color: #FFF; font-weight: bold;}
&lt;/style&gt;
&lt;table class=&quot;tableizer-table&quot;&gt;
&lt;tr class=&quot;tableizer-firstrow&quot;&gt;&lt;td&gt;Demographics&lt;/td&gt;&lt;td&gt;U.S. Bloggers&lt;/td&gt;&lt;td&gt;European Bloggers&lt;/td&gt;&lt;td&gt;Asian Bloggers
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Male&lt;/td&gt;&lt;td&gt;57%&lt;/td&gt;&lt;td&gt;73%&lt;/td&gt;&lt;td&gt;73%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Age&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;18-34 years old&lt;/td&gt;&lt;td&gt;42%&lt;/td&gt;&lt;td&gt;48%&lt;/td&gt;&lt;td&gt;73%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;35+&lt;/td&gt;&lt;td&gt;58%&lt;/td&gt;&lt;td&gt;52%&lt;/td&gt;&lt;td&gt;27%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Single&lt;/td&gt;&lt;td&gt;26%&lt;/td&gt;&lt;td&gt;31%&lt;/td&gt;&lt;td&gt;57%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Employed full-time&lt;/td&gt;&lt;td&gt;56%&lt;/td&gt;&lt;td&gt;53%&lt;/td&gt;&lt;td&gt;45%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Household income &gt;$75,000&lt;/td&gt;&lt;td&gt;51%&lt;/td&gt;&lt;td&gt;34%&lt;/td&gt;&lt;td&gt;9%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;College graduate&lt;/td&gt;&lt;td&gt;74%&lt;/td&gt;&lt;td&gt;67%&lt;/td&gt;&lt;td&gt;69%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Average blogging tenure (months)&lt;/td&gt;&lt;td&gt;35&lt;/td&gt;&lt;td&gt;33&lt;/td&gt;&lt;td&gt;30
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Median Annual Investment&lt;/td&gt;&lt;td&gt;$80&lt;/td&gt;&lt;td&gt;$15&lt;/td&gt;&lt;td&gt;$30
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Median Annual Revenue&lt;/td&gt;&lt;td&gt;$200&lt;/td&gt;&lt;td&gt;$200&lt;/td&gt;&lt;td&gt;$120
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;% Blogs with advertising&lt;/td&gt;&lt;td&gt;52%&lt;/td&gt;&lt;td&gt;50%&lt;/td&gt;&lt;td&gt;60%
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Average Monthly Unique Visitors&lt;/td&gt;&lt;td&gt;18000&lt;/td&gt;&lt;td&gt;24000&lt;/td&gt;&lt;td&gt;26000
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;平均ブログ収入&lt;/td&gt;&lt;td&gt;$104&lt;/td&gt;&lt;td&gt;$100&lt;/td&gt;&lt;td&gt;$72
&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;訪問者1万人あたり収入&lt;/td&gt;&lt;td&gt;6,124&lt;/td&gt;&lt;td&gt;4,417&lt;/td&gt;&lt;td&gt;2,935
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;</code>

<h4 class="header-label">カスタマイズできる項目</h4>
<ul>
<li>テーブルヘッダーの背景色</li>
<li>フォントサイズ</li>
<li>フォントの字体（英語用のみ）</li>
</ul>
<p>興味のある方は<a class="web-site-link" href="http://tableizer.journalistopia.com/" onclick="window.open('http://tableizer.journalistopia.com/'); return false;">TABLEIZER!</a>へどうぞ。</p>

<p>いままでシェアウェアしか見たことなかったけど、こういうのが出てくれると時短できて良いですよね。 下手にエクセルマクロとか使って変なゴミデータが入り込むよりずっと実用的です。</p>
<p>Via:<a class="web-site-link" href="http://delicious.com/url/eb933a3831bd206d13dcf9da88ccd651" onclick="window.open('http://delicious.com/url/eb933a3831bd206d13dcf9da88ccd651'); return false;">Delicious</a></p>