CSSを使って綺麗でかっこいいテーブルを作る
2014.11.18
テーブルデザインって結構奥が深いと思うのは私だけ？HTMLを勉強し始めた頃、このテーブル（表）に線を付ける方法も分からず何かと悩みまくりました... (TヘT)
そのせいか未だにちょっと苦手意識があるので、今回は「<table>」タグを使った表をスタイルシート（CSS）で色々装飾する練習＆今後自分がテーブルを作る際にコピペ出来るようメモ代わりに記事にしました♪
ちなみにこの記事のトップ画像も、スタイルシートで装飾したテーブルをキャプチャーした物です♪（手元にあった電卓風にしてみたｗ）
【 色んなテーブルデザイン 】
1.電卓風に凹凸を表現したテーブル
| ON | OFF | 税込 | 税抜 |
|---|---|---|---|
| ７ | ８ | ９ | ÷ |
| ４ | ５ | ６ | × |
| １ | ２ | ３ | － |
| ０ | ． | ＝ | ＋ |
ぶっちゃけトップ画像にする為に作ったテーブルなので...
その他に使うとこは特に考えてません... （まぁ練習なんでっ!!ｗ）
でも、使うとすればブログのサイドメニュー等にあるカレンダーをこんな感じで表示するのも良いかも♪（このブログはカレンダーないけど...）
...って事は最初からカレンダーのテーブルにすれば良かったんじゃ？ｗｗ
▼ このテーブルのHTML＆CSS ▼
← クリックするとソースが表示されます。
<table class="sample1"> <caption>▼電卓風のテーブルデザイン</caption> <tr> <th>ON </th> <th>OFF</th> <th>税込</th> <th>税抜</th> </tr> <tr> <td>７</td> <td>８</td> <td>９</td> <td>÷</td> </tr> <tr> <td>４</td> <td>５</td> <td>６</td> <td>×</td> </tr> <tr> <td>１</td> <td>２</td> <td>３</td> <td>－</td> </tr> <tr> <td>０</td> <td>．</td> <td>＝</td> <td>＋</td> </tr> </table>
.sample1 {
border:1px #ccc solid;
border-collapse: separate;
border-spacing: 5px;
border-radius: 5px;
box-shadow:2px 2px 2px #000 inset;
}
.sample1 caption { text-align: left;}
.sample1 th:first-child { border-radius: 5px 0 0 0; }
.sample1 th:last-child { border-radius:0 5px 0 0; }
.sample1 tr:last-child td:first-child { border-radius: 0 0 0 5px; }
.sample1 tr:last-child td:last-child { border-radius:0 0 5px 0; }
.sample1 th,
.sample1 td {
padding: 2px 6px;
text-align: center;
border-top: 1px #ccc solid;
border-left: 1px #ccc solid;
border-bottom: 1px #000 solid;
border-right: 1px #000 solid;
}
.sample1 th {
color: #222;
font-weight:normal;
background: #ccc;
background-image: -webkit-linear-gradient(#ddd, #999);
background-image: linear-gradient(#ddd, #999);
text-shadow:0px 1px 2px #FFF;
}
2.少し浮き出た感じのテーブル
上記のテーブルデザインをちょこっとだけ変更して、今度は少し浮き出た感じにしたパターンです。
また、各セルにマウスを乗せると横一列の背景色が変わるようにしてます♪
【黒い背景での表示を確認する為のエリアです♪】
| No | 記事タイトル | 投稿日 | カテゴリ |
|---|---|---|---|
| 01 | 記事タイトルにも新着マーク「New」を表示 | 2014.11.16 | JavaScript |
| 02 | 最新記事に「New」等の新着マークを表示 | 2014.11.14 | JavaScript |
| 03 | トラックバックについて＆表示をカスタマイズ | 2014.11.11 | その他 |
| 04 | FC2ブログでトップページにだけ表示する方法 | 2014.10.31 | basic_white |
| 05 | ブログ内の人気記事ランキングを表示 | 2014.10.29 | その他 |
▼ このテーブルのCSS ▼
← クリックするとソースが表示されます。
HTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略します。
ただ適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample2">」としてます。
.sample2 { border-collapse: separate; border-spacing: 1px; }
.sample2 caption { text-align: left; }
.sample2 th:first-child { border-radius: 5px 0 0 0; }
.sample2 th:last-child { border-radius:0 5px 0 0; }
.sample2 tr:last-child td:first-child { border-radius: 0 0 0 5px; }
.sample2 tr:last-child td:last-child { border-radius:0 0 5px 0; }
.sample2 th,
.sample2 td {
padding: 2px 8px;
border-top: 1px #ccc solid;
border-left: 1px #ccc solid;
border-bottom: 1px #000 solid;
border-right: 1px #000 solid;
}
.sample2 th {
color: #222;
text-align: center;
font-weight:normal;
background: #ccc;
background-image: -webkit-linear-gradient(#ddd, #999);
background-image: linear-gradient(#ddd, #999);
text-shadow:0px 1px 2px #FFF;
}
.sample2 td { text-shadow:1px 1px 1px #000; }
.sample2 tr:hover { background: #222; }
3.角を丸くしたシンプルなテーブル
上の２つも角を丸くしてるんですけどね...ｗ 今度は白い背景で表示した角丸のシンプルなテーブル♪
また、このテーブルも各セルにマウスを乗せると横一列の背景色が変わるようにしてます。
【白い背景での表示を確認する為のエリアです♪】
| No | 記事タイトル | 投稿日 | カテゴリ |
|---|---|---|---|
| 01 | 記事タイトルにも新着マーク「New」を表示 | 2014.11.16 | JavaScript |
| 02 | 最新記事に「New」等の新着マークを表示 | 2014.11.14 | JavaScript |
| 03 | トラックバックについて＆表示をカスタマイズ | 2014.11.11 | その他 |
| 04 | FC2ブログでトップページにだけ表示する方法 | 2014.10.31 | basic_white |
| 05 | ブログ内の人気記事ランキングを表示 | 2014.10.29 | その他 |
▼ このテーブルのCSS ▼
← クリックするとソースが表示されます。
これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample3">」としてます。
.sample3 { border-spacing: 0px; }
.sample3 caption { text-align: left; }
.sample3 tr { background: #fff; }
.sample3 th:first-child{border-radius:5px 0 0 0;}
.sample3 th:last-child{border-radius:0 5px 0 0; border-right: 1px #777 solid;}
.sample3 tr:last-child td:first-child{border-radius:0 0 0 5px;}
.sample3 tr:last-child td:last-child{border-radius:0 0 5px 0;}
.sample3 th {
padding: 2px 8px;
text-align: center;
font-weight:normal;
border-top: 1px #777 solid;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
background: #9cf;
background-image: -webkit-linear-gradient(#dff, #9cf);
background-image: linear-gradient(#dff, #9cf);
}
.sample3 td {
padding: 2px 8px;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
}
.sample3 td:last-child{ border-right: 1px #777 solid; }
.sample3 tr:hover { background: #eef; }
4.奇数行にだけ色を付けたテーブル
上のテーブルに少しだけCSSの記述を追加して奇数行に色を付けて、さらに表全体に影を付けました。
また、このテーブルは各セルにマウスを乗せると横一列の背景色が変わり文字が微妙に浮き出ますｗ
【白い背景での表示を確認する為のエリアです♪】
| No | 記事タイトル | 投稿日 | カテゴリ |
|---|---|---|---|
| 01 | 記事タイトルにも新着マーク「New」を表示 | 2014.11.16 | JavaScript |
| 02 | 最新記事に「New」等の新着マークを表示 | 2014.11.14 | JavaScript |
| 03 | トラックバックについて＆表示をカスタマイズ | 2014.11.11 | その他 |
| 04 | FC2ブログでトップページにだけ表示する方法 | 2014.10.31 | basic_white |
| 05 | ブログ内の人気記事ランキングを表示 | 2014.10.29 | その他 |
▼ このテーブルのCSS ▼
← クリックするとソースが表示されます。
これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample4">」としてます。
.sample4 {
border-spacing: 0;
border-radius: 5px;
box-shadow:2px 2px 2px #777;
}
.sample4 caption { text-align: left; }
.sample4 tr { background: #fff; }
.sample4 tr:nth-child(2n+1) { background: #daffda; }
.sample4 th:first-child{border-radius: 5px 0 0 0;}
.sample4 th:last-child{border-radius:0 5px 0 0; border-right: 1px #777 solid;}
.sample4 tr:last-child td:first-child{border-radius: 0 0 0 5px;}
.sample4 tr:last-child td:last-child{border-radius:0 0 5px 0;}
.sample4 th {
padding: 2px 8px;
text-align: center;
font-weight:normal;
border-top: 1px #777 solid;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
background: #9fc;
background-image: -webkit-linear-gradient(#dff, #9fc);
background-image: linear-gradient(#dff, #9fc);
text-shadow:1px 1px 1px #999;
}
.sample4 td {
padding: 2px 8px;
border-left: 1px #777 solid;
border-bottom: 1px #777 solid;
}
.sample4 td:last-child{ border-right: 1px #777 solid; }
.sample4 tr:hover { background: #afa; text-shadow:1px 1px 1px #999; }
※偶数行に色を付ける場合は、8行目の「.sample4 tr:nth-child(2n+1) { background: #daffda; }」の部分を「.sample4 tr:nth-child(2n) { background: #daffda; }」にすればOK♪
5.とにかくシンプルなテーブル
角を丸くしたり影を付けたりしないでシンプルにするとこんな感じ♪（奇数行だけ薄く色を付けてます）
【白い背景での表示を確認する為のエリアです♪】
| No | 記事タイトル | 投稿日 | カテゴリ |
|---|---|---|---|
| 01 | 記事タイトルにも新着マーク「New」を表示 | 2014.11.16 | JavaScript |
| 02 | 最新記事に「New」等の新着マークを表示 | 2014.11.14 | JavaScript |
| 03 | トラックバックについて＆表示をカスタマイズ | 2014.11.11 | その他 |
| 04 | FC2ブログでトップページにだけ表示する方法 | 2014.10.31 | basic_white |
| 05 | ブログ内の人気記事ランキングを表示 | 2014.10.29 | その他 |
▼ このテーブルのCSS ▼
← クリックするとソースが表示されます。
これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample5">」としてます。
.sample5 { border: 1px #777 solid; border-collapse: collapse; }
.sample5 caption { text-align: left; }
.sample5 tr { background: #fff; }
.sample5 tr:nth-child(2n+1) { background: #E3FAFF; }
.sample5 th,.sample5 td { padding: 2px 8px; border: 1px #777 solid; }
.sample5 th {
text-align: center;
font-weight:normal;
background: #66B6FC;
background-image: -webkit-linear-gradient(#b2e1ff, #66B6FC);
background-image: linear-gradient(#b2e1ff, #66B6FC);
}
※偶数行に色を付ける場合は、4行目の「.sample5 tr:nth-child(2n+1) { background: #E3FAFF; }」の部分を「.sample5 tr:nth-child(2n) { background: #E3FAFF; }」にすればOK♪
6.さらに超シンプルなテーブル
ここまでシンプルな作りなら「テーブル作成ツール 」でサクっと作れちゃいますけどね...ｗ まぁ一応♪
【白い背景での表示を確認する為のエリアです♪】
| No | 記事タイトル | 投稿日 | カテゴリ |
|---|---|---|---|
| 01 | 記事タイトルにも新着マーク「New」を表示 | 2014.11.16 | JavaScript |
| 02 | 最新記事に「New」等の新着マークを表示 | 2014.11.14 | JavaScript |
| 03 | トラックバックについて＆表示をカスタマイズ | 2014.11.11 | その他 |
| 04 | FC2ブログでトップページにだけ表示する方法 | 2014.10.31 | basic_white |
| 05 | ブログ内の人気記事ランキングを表示 | 2014.10.29 | その他 |
▼ このテーブルのCSS ▼
← クリックするとソースが表示されます。
これもHTML部分に関しては、最初のテーブルのセルの内容を書き換えただけでなのでソース表示は省略。
適用させるCSSを変更する為に、1行目のクラス名を「<table class="sample6">」としてます。
.sample6 { border: 1px #999 solid; border-collapse: collapse; }
.sample6 caption { text-align: left; }
.sample6 th,.sample6 td { padding: 2px 8px; border: 1px #999 solid; }
.sample6 th { font-weight:normal; background: #ddd;}
って事で今回はCSSでのテーブルデザインでした♪(￣ε￣〃)ｂ
（キレイで見やすいテーブルを作るのって結構難しい...ｗ）
▼また、セル同士をくっ付けたり（結合）など複雑なテーブルを作る際は以下のサイトが便利です♪
「 Table Tag Generator（テーブルタグジェネレーター） 」 - HTMLの表を簡単に作成・結合ツール
-
- この記事にトラックバックする(FC2ブログユーザー)
- トラックバックって何！？って場合は こちら
- http://interest2014.blog.fc2.com/tb.php/54-e3807888
「CSSを使って綺麗でかっこいいテーブルを作る」へのトラックバック
- TrackBack -
「CSSを使って綺麗でかっこいいテーブルを作る」へのコメント
- Comment -
表
- 2014-11-18 14:03
- 編集
Re: 表
> girigiri26さん
ありがとうございます♪(≧∇≦)b
自分で好きなように表示出来ると面白いですよ^^
是非、挑戦してみて下さい♪
また何かあればいつでも気軽にご連絡下さいませ♪ｄ(≧∀≦)ｂ
ありがとうございます♪(≧∇≦)b
自分で好きなように表示出来ると面白いですよ^^
是非、挑戦してみて下さい♪
また何かあればいつでも気軽にご連絡下さいませ♪ｄ(≧∀≦)ｂ
- 2014-11-18 14:19
- 編集
No title
角を丸くしたシンプルなテーブルが一番好きだなあ(*´▽｀*)
背景をグラデーションにしてるのがまたいいですね(^^♪
グラデーションはどうやって表現してるんですか？？ＣＳＳですか？？
ちょっとしたひと手間で印象ってずいぶんかわりますよね(^^)
背景をグラデーションにしてるのがまたいいですね(^^♪
グラデーションはどうやって表現してるんですか？？ＣＳＳですか？？
ちょっとしたひと手間で印象ってずいぶんかわりますよね(^^)
- 2014-11-18 14:57
- 編集
Re: No title
> ひーさんさん
確かにちょっとした手間で印象って変わりますよね♪(≧∇≦)b
また、ヘッダーセル（表の項目名の部分）は最後のテーブル以外はCSSでグラデーションにしてます♪
「角を丸くしたシンプルなテーブル」の場合だとCSSのソースで16行目と17行目の部分です♪
background-image: -webkit-linear-gradient(#dff, #9cf);
background-image: linear-gradient(#dff, #9cf);
▲この部分の(#dff, #9cf)が色を指定している箇所で
明るい色の部分が「#dff」で、暗い色の部分が「#9cf」です♪(≧∇≦)ﾉ
確かにちょっとした手間で印象って変わりますよね♪(≧∇≦)b
また、ヘッダーセル（表の項目名の部分）は最後のテーブル以外はCSSでグラデーションにしてます♪
「角を丸くしたシンプルなテーブル」の場合だとCSSのソースで16行目と17行目の部分です♪
background-image: -webkit-linear-gradient(#dff, #9cf);
background-image: linear-gradient(#dff, #9cf);
▲この部分の(#dff, #9cf)が色を指定している箇所で
明るい色の部分が「#dff」で、暗い色の部分が「#9cf」です♪(≧∇≦)ﾉ
- 2014-11-18 15:18
- 編集
No title
あると♪さん 相変わらず頑張っているようで何よりです。
テンプレートなど私には難しくてチンプンカンプンなのですが、完全にあると♪さんの方が先輩です。
今後のご活躍にも期待して応援ポチ！して失礼いたします。
テンプレートなど私には難しくてチンプンカンプンなのですが、完全にあると♪さんの方が先輩です。
今後のご活躍にも期待して応援ポチ！して失礼いたします。
- 2014-11-18 22:51
- 編集
Re: No title
> T.Oさん
いつもありがとうございます♪ｄ(≧∀≦)ｂ
記事数ではT.Oさんの方が圧倒的で...ｗｗ
私も頑張りますっ!!(≧∇≦)ﾉ
いつもありがとうございます♪ｄ(≧∀≦)ｂ
記事数ではT.Oさんの方が圧倒的で...ｗｗ
私も頑張りますっ!!(≧∇≦)ﾉ
- 2014-11-19 00:25
- 編集
すみません
何度もすみません。
記事の下のトラックバックの所にこの記事のトラックバックを入れてみたのですが・・
何処が変わるのでしょうか？
本当に何度もすみません。
送信済みにはこの記事のトラックバックのアドレスが入ってます。
記事の下のトラックバックの所にこの記事のトラックバックを入れてみたのですが・・
何処が変わるのでしょうか？
本当に何度もすみません。
送信済みにはこの記事のトラックバックのアドレスが入ってます。
- 2014-11-28 23:15
- 編集
Re: すみません
> girigiri26さん
全然OKですよ～♪(≧∇≦)b
私の方でもテストしてみたのですが問題なくトラックバック出来ました♪
ただ、そのトラックバックを削除してから再度トラックバックを飛ばして見たら
今度は表示されませんでした...(￣▽￣;)
前に同一記事から2回トラックバックするテストもしてみた事があるので、
もしかしたら削除した事が関係してトラックバック出来なくなってるのかも？...
別記事からトラックバックするか、
もしくは別ページの記事へトラックバックすれば問題なく表示されると思います...
でも、それじゃあ解決になって無いですね...ｗ
全然OKですよ～♪(≧∇≦)b
私の方でもテストしてみたのですが問題なくトラックバック出来ました♪
ただ、そのトラックバックを削除してから再度トラックバックを飛ばして見たら
今度は表示されませんでした...(￣▽￣;)
前に同一記事から2回トラックバックするテストもしてみた事があるので、
もしかしたら削除した事が関係してトラックバック出来なくなってるのかも？...
別記事からトラックバックするか、
もしくは別ページの記事へトラックバックすれば問題なく表示されると思います...
でも、それじゃあ解決になって無いですね...ｗ
- 2014-11-29 16:03
- 編集
なるほど
あると♪さん
色々ありがとうございます。
トラックバック色々奥が深そうですね。
失敗しちゃダメなんですね。
今度、あると♪さんの記事に関連する記事にトラックバック付けてみますね。
って、すぐに書く予定です・・・
（コバンザメの様じゃ・・・）
すみません、何時もお騒がせで・・・
色々ありがとうございます。
トラックバック色々奥が深そうですね。
失敗しちゃダメなんですね。
今度、あると♪さんの記事に関連する記事にトラックバック付けてみますね。
って、すぐに書く予定です・・・
（コバンザメの様じゃ・・・）
すみません、何時もお騒がせで・・・
- 2014-11-30 17:25
- 編集
Re: なるほど
> girigiri26さん
また何か気付いた事があれば気軽にご相談下さいね♪
それと私のブログに対してのトラックバックなどは失敗しても全然OKなので
ドンドン気兼ねなく練習しちゃって下さい♪(￣ε￣〃)ｂ
また何か気付いた事があれば気軽にご相談下さいね♪
それと私のブログに対してのトラックバックなどは失敗しても全然OKなので
ドンドン気兼ねなく練習しちゃって下さい♪(￣ε￣〃)ｂ
- 2014-11-30 22:37
- 編集
コメントの投稿
- Post a Comment -
▼クリックすると配色が変更されます
このボタンの設置方法は こちら♪
White
Black
プロフィールClick
最新記事Click
-
-
- インフルエンザでダウン中...
-
2014.12.15
-
-
-
- 画像やテキストを要素単位でランダムに表示
-
2014.12.09
-
-
-
- 2014年11月 忍者アドマックスの収益
-
2014.12.05
-
-
-
- FC2ブログにグローバルメニューを付ける方法
-
2014.12.04
-
-
-
- FC2ブログにパンくずリストを付ける方法
-
2014.12.03
-
最新コメントClick
カテゴリClick
月別アーカイブClick
アクセスカウンターClick
設置日
2014.11.19
2014.11.19
スポンサーリンクClick
このページの目次Click
人気ランキングClick
ブログのカスタマイズ私も挑戦してみます。(きっと笑）
又、色々教えて下さいね。