ホームページ作成時に、テーブルを作る場合も多くあると思いますが、htmlに実装するよりもスタイルシートで簡単にテーブル(表)をデザインすることができます。cssでデザインするので、htmlもスッキリします。
cssでデザインする基本的なテーブルです。
例えば、下記のようなテーブルをスタイルシートでデザインする場合、
表1
項目1 | 項目2 | 項目3 | 項目4 |
---|---|---|---|
テーブル | テーブル | テーブル | テーブル |
超シンプル | シンプル | 派手 | 地味 |
点線 | 破線 | 実線 | 二重線 |
スタイルシート・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>
????????
全てのテーブルがこのデザインになる
ここで、注意してほしい事が2点あります。
もし、サイト内に50個のテーブルがあった場合、50個全てのテーブルがこのデザインになります。
個々のテーブルのデザインを違ったものにするには、class属性で、要素に対してクラス名を付けます。クラス毎にデザイン変えることができます。
表2
項目1 | 項目2 | 項目3 | 項目4 |
---|---|---|---|
テーブル | テーブル | テーブル | テーブル |
超シンプル | シンプル | 派手 | 地味 |
点線 | 破線 | 実線 | 二重線 |
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で作るシンプルなテーブルをご覧ください。
????????