テーブルデザインを手助けしてくれるジェネレーター「TABLEIZER!」の紹介です。
テキストボックスにエクセルのデータをペーストするだけで、そのエクセルデータの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に直す必要はありますが、簡単にテーブルを生成してくれるので、便利なジェネレーターです。
コメント