ホームページ作成時に、テーブルを作る場合も多くあると思いますが、htmlに実装するよりもスタイルシートで簡単にテーブル（表）をデザインすることができます。cssでデザインするので、htmlもスッキリします。
cssでデザインする基本的なテーブルです。
例えば、下記のようなテーブルをスタイルシートでデザインする場合、
表１
| 項目１ | 項目２ | 項目３ | 項目４ |
|---|---|---|---|
| テーブル | テーブル | テーブル | テーブル |
| 超シンプル | シンプル | 派手 | 地味 |
| 点線 | 破線 | 実線 | 二重線 |
スタイルシート・htmlは下記のように記述します。
css ↓
table {
border-collapse: collapse;
border-top: 1px solid #555;
border-left: 1px solid #555;
}
table th, table td {
border-bottom: 1px solid #555;
border-right: 1px solid #555;
}
table th {
background: #ffcccc;
color: #333;
}
html ↓
<table> <tr><th>項目1</th><th>項目2</th></tr> <tr><td>データ1</td><td>データ2</td></tr> </table>
????????
全てのテーブルがこのデザインになる
ここで、注意してほしい事が２点あります。
もし、サイト内に50個のテーブルがあった場合、50個全てのテーブルがこのデザインになります。
個々のテーブルのデザインを違ったものにするには、class属性で、要素に対してクラス名を付けます。クラス毎にデザイン変えることができます。
表２
| 項目１ | 項目２ | 項目３ | 項目４ |
|---|---|---|---|
| テーブル | テーブル | テーブル | テーブル |
| 超シンプル | シンプル | 派手 | 地味 |
| 点線 | 破線 | 実線 | 二重線 |
css ↓
.t_01{
width: 100%;
font-size:13px;
border-collapse: collapse;
border: 1px solid #666;
}
.t_01 th{
width: 25%;
padding: 6px;
text-align: left;
border-left: 1px dotted #fff;
color: #fff;
background: #444;
}
.t_01 td{
padding: 6px;
border-left: 1px dotted #666ff;
background-color: #fff;
border-bottom: 1px dotted #6666ff;
}
html ↓
<table class="t_01"> <tr><th>項目1</th><th>項目2</th></tr> <tr><td>データ1</td><td>データ2</td></tr> </table>
二つ目の表では項目が左寄せになっています。
「th」は見出しを表すタグで自動的に太字になります。文字位置を設定しない時は、セルの中で中央寄せになります。
ポイントは「border-collapse」
「border-collapse」というのは、table内の各セルのボーダー（枠）の表示の仕方を指定するプロパティです。
「border-collapse」に、collapse（隣接するボーダーは重ねて表示する）を設定しないと、セル同士が離れた表になってしまいます。
border-collapse: collapse; を指定しなかった場合、下のように罫線が離れてしまう表になります。あえて、このようなデザインにしたいという場合にはいいかもしれません。
もっと詳しくはCSSで作るシンプルなテーブルをご覧ください。
????????
