（１３）Tableタグテクニック

 最初に

Tableタグは大変応用範囲の広いタグだと思います。
本来は、表を作成するためのタグなのですが、複雑な配置のページを作成するには、Table タグを使用するのが確実でしょう。
一方では、Table タグはなるべく使わない方が良いと言う解説も多くあります。
そのためか、初心者はテーブルタグを多用するのは良くない事なのだと思っているようです

私は、最近はTableタグに限らず、〜しない方が良いと言うような解説は気にしなくなってきました。
使用しない方が良いのですか。ハイ判りましたそうします。と言うような素直な人間ではなくなってしまったのです。（笑)
ふぐには毒があるから食べない方が良い。と言われれば、それを食べなければ絶対にふぐ中毒にはならないでしょう。
しかし、毒の部分があらかじめ判っておれば、毒のないおいしいフグ料理を食べる事ができます。（私は貧乏人なので食べる機会はありませんが）
言われた通りに生きるのも１つの生き方でしょうし、それに逆らって生きるのも１つの生き方だと思います。
人生に限らず、ホームページ作成でも、こうしなければならない等と言う事はないと私は考えております。
例えTableタグを何重にも重ねた影響で、表示が極端に遅くなったために、誰も見てくれる人が居なくなったとしてもです。

 セル全体が立体的に見える表組み

最初に本来の表を作る例を挙げたいと思います｡
どこかのサイトに掲載されていたのですが、配色も適切で大変恰好が良いと思いました。
リンクを張れば済む事なのですが、インターネットの世界は、サイトの閉鎖は日常茶飯事なので基本部分だけ記載します。

<table cellspacing="0" class="sample">
<thead>
<tr><th>ブラウザ</th><th>最新版</th><th>公開年</th><th>開発元</th></tr>
</thead>
<tbody>
   <tr><th>Internet Explorer</th><td>8.0</td><td>2001</td><td>Microsoft</td></tr>
   <tr><th>Firefox</th><td>3.6.0</td><td>2005</td><td>Mozilla Foundation</td></tr>
   <tr><th>Safari</th><td>5.0</td><td>2005</td><td>Apple</td></tr>
   <tr><th>Google Chrome</th><td> </td><td>2008</td><td>Google</td></tr>
   <tr><th>Opera</th><td>10.63</td><td>2005</td><td>Opera</td></tr>
</tbody>
</table>

/* 表全体のデザイン */
table.sample {
   border-spacing: 0px;   /* セルの間隔をなくす */
   font-family: Verdana,sans-serif;   /* フォントの指定 */
   font-size: smaller;   /* 文字サイズを小さめに */
}
/* セルのデザインのうちヘッダと中身の共通部分 */
table.sample th, table.sample td {
   border-width: 1px;   /* セルの枠線は太さ1ピクセル */
   border-style: solid;   /* セルの枠線は実線 */
   padding: 2px;   /* セル内側の余白は2ピクセル */
}
/* ヘッダセルのデザイン */
table.sample thead th {
   border-color: #ccffcc #7ca866 #7ca866 #ccffcc;
   background-color: #bceaa8;
}
table.sample tbody th {
   border-color: #ffffcc #aca866 #aca866 #ffffcc;
   background-color: #eceaa8;
}
/* セルのデザイン */
table.sample td {
   border-color: #ffffff #aca899 #aca899 #ffffff;
   background-color: #ecead8;
}

作成したテーブルは、以下のようになります。

ブラウザ	最新版	公開年	開発元
Internet Explorer	8.0	2001	Microsoft
Firefox	3.6.0	2005	Mozilla Foundation
Safari	5.0	2005	Apple
Google Chrome		2008	Google
Opera	10.63	2005	Opera