b-essence

気になること★いろいろなジャンルで更新していきます。

css・html

表(テーブル)をcssで作る

2015-01-04

ホームページ作成時に、テーブルを作る場合も多くあると思いますが、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; を指定しなかった場合、下のように罫線が離れてしまう表になります。あえて、このようなデザインにしたいという場合にはいいかもしれません。

28

 
もっと詳しくはCSSで作るシンプルなテーブルをご覧ください。
 

????????


 

-css・html

関連記事

cellpadding と cellspacing

cellpadding と cellspacingtmlの違い 「cellspacing」「cellpadding」は、テーブル内のスペースを設定するタグです。 紛らわしいですが、簡単ですからしっかり …

画像を横に並べる方法

画像を横に並べて表示する方法 画像を横に並べる方法は何種類かあります。 一番簡単な方法ですが、改行を入れずにタグを下記のように記述します。 この場合、画像と画像の間に半角スペースができます。 < …

htmlで特定ページへ自動ジャンプさせる

html 特定ページへ自動ジャンプさせる <meta>タグを使って現在のhtmlページを特定のページへ自動ジャンプさせることができます。 サイト移転の時などに使いますね。××秒後にページを …

スタイルシートを使って画像(img)の位置を設定する方法

cssで画像の位置を設定するには、ブロック要素で下記のようにクラス(クラス名は任意です)を設定し、html の imgタグに埋め込みます。 displayは、ブロックレベル・インライン等の要素の表示形 …

htmlで文字を太字にする

<strong> <b> タグの違いについて 文字を太字にするタグには <strong>タグ と <b>タグ があります。 このふたつのタグ <s …

スポンサーリンク

スポンサーリンク