『CSS Table Generator』でクールなTableを作ろう！

『CSS Table Generator』は、Table用のCSSコードを自動生成するWebサービス。

アクセスして各設定項目を自分好みに調整していきましょう（面倒くさい方は「Table Design」タブでサンプルから選ぶことも可能です）。変更した設定はすぐに「Live Table Preview」に反映されるので、確認しながら調整できます。便利ですね。


Bloggerにてすべての記事のTableにCSSを当てたい場合は次のようにするとよいでしょう。

１．「CSS Code」に生成されたコードをBloggerテンプレートのHTML編集モードで</body>タグの直前にペーストします。このとき、<style>タグで囲むのを忘れないようにしましょう。

<style type='text/css'>
.CSSTableGenerator {
    （略）
}
</style>

２．Tableを挿入したい投稿のHTML編集画面で、CSSTableGeneratorクラスを指定してテーブルを記述します。なお、生成されたCSSでは<th>タグを使わなくても第一行目はテーブルヘッダになるように作られていますので、全部<td>タグでOKです。便利ですが慣れてない方は注意が必要です。

<div class="CSSTableGenerator" >
    <table >
        （略）
    </table>
</div>

↓こんな感じに表示されたら成功です（IEではうまく表示されないので他ので試してみましょう）。

Title 1	Title 2	Title 3
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3

生成されるコードは、Table内の要素が英語だけならバッチリ決まりますが、日本語なら今ひとつです。フォントを「Meiryo」に替えて、サイズも少し大きくしたほうが見栄えが良いでしょう。
ちなみに、私のCSSは次のようになってます。ヘッダに白い影を手動で追加してエンボスっぽくしたのがポイント！

<style type='text/css'>
.CSSTableGenerator {
 margin:0px;padding:0px;
 width:100%;
 border:1px solid #999999;
 -moz-border-radius-bottomleft:2px;
 -webkit-border-bottom-left-radius:2px;
 border-bottom-left-radius:2px;
 -moz-border-radius-bottomright:2px;
 -webkit-border-bottom-right-radius:2px;
 border-bottom-right-radius:2px;
 -moz-border-radius-topright:2px;
 -webkit-border-top-right-radius:2px;
 border-top-right-radius:2px;
 -moz-border-radius-topleft:2px;
 -webkit-border-top-left-radius:2px;
 border-top-left-radius:2px;
}.CSSTableGenerator table{
 border-collapse: collapse;
 border-spacing: 0;
 width:100%;
 height:100%;
 margin:0px;
 padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
 -moz-border-radius-bottomright:2px;
 -webkit-border-bottom-right-radius:2px;
 border-bottom-right-radius:2px;
}.CSSTableGenerator table tr:first-child td:first-child {
 -moz-border-radius-topleft:2px;
 -webkit-border-top-left-radius:2px;
 border-top-left-radius:2px;
}.CSSTableGenerator table tr:first-child td:last-child {
 -moz-border-radius-topright:2px;
 -webkit-border-top-right-radius:2px;
 border-top-right-radius:2px;
}.CSSTableGenerator tr:last-child td:first-child{
 -moz-border-radius-bottomleft:2px;
 -webkit-border-bottom-left-radius:2px;
 border-bottom-left-radius:2px;
}.CSSTableGenerator td{
 vertical-align:middle;
 background-color:#f4f4f4;
 border:1px solid #999999;
 border-width:0px 1px 1px 0px;
 text-align:left;
 padding:5px;
 font-size:10.5px;
 font-family:Meiryo;
 font-weight:normal;
 color:#2f2f2f;
}.CSSTableGenerator tr:last-child td{
 border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
 border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
 border-width:0px 0px 0px 0px;
}.CSSTableGenerator tr:first-child td{
 background:-o-linear-gradient(bottom, #999999 5%, #333333 100%);
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #999999), color-stop(1, #333333) );
 background:-moz-linear-gradient( center top, #999999 5%, #333333 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#999999", endColorstr="#333333");
 background: -o-linear-gradient(top,#999999,333333);
 background-color:#999999;
 border:0px solid #666666;
 text-align:center;
 border-width:0px 0px 1px 1px;
 font-size:14px;
 font-family:Meiryo;
 font-weight:bold;
 color:#222222;
 text-shadow:0 1px 1px #ffffff;
}.CSSTableGenerator tr:first-child td:first-child{
 border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:first-child td:last-child{
 border-width:0px 0px 1px 1px;
}
</style>

以上です。