エクセルのデータをペーストするだけで、テーブルのCSSスタイルとHTMLを生成してくれるジェネレーター「TABLEIZER!」

テーブルデザインを手助けしてくれるジェネレーター「TABLEIZER!」の紹介です。

site0812161.jpg

テキストボックスにエクセルのデータをペーストするだけで、そのエクセルデータのCSSとHTMLを生成してくれます。

フォントサイズとテーブルのトップのtdのカラーとフォントファミリーが選択できます。

下記が入力し、生成してくれたエクセルデータのCSSとHTMLです。

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: #104E8B; color: #FFF; font-weight: bold;}

HTML


<table class="tableizer-table">
<tr class="tableizer-firstrow">
<td>赤りんご</td><td>5</td></tr> <tr><td>青りんご</td><td>2</td>
</tr>
<tr>
<td>バナナ</td><td>3</td>
</tr>
<tr>
<td>みかん</td><td>3</td>
</tr>
<tr>
<td>オレンジ</td><td>4</td>
</tr>
<tr>
<td>パイナップル</td><td>3</td>
</tr>
<tr><td>スイカ</td><td>2</td>
</tr>
<tr>
<td>ぶどう</td><td>1</td>
</tr>
<tr>
<td>いちご</td><td>6</td>
</tr>
</table>

もう見ると、トップのtdの背景色が青になっていますが、そこをthに直す必要はありますが、簡単にテーブルを生成してくれるので、便利なジェネレーターです。