みどりとくらす

バラとランと多肉と観葉植物と・・・

【CSS3】ちょっとかっこよく表(table)にシャドーやグラデーション設定

今後、本ブログでは「表」を多用することが予想されます。これまでのブログでもそうだったので。理系男子の性でしょうか!?よって、標準で設定されている表ではちょっとかっこ悪い!(あくまでも、個人的な感想ですが・・・)

そこで「子テーマ」の style.css を変更して、表(table)を少しだけ、かっこよく(というよりも自分の好みに)してみたいと思います。

先ずは、表(table)全体のスタイル変更です。基本は背景色を設定することとシャドーを追加すること。下記がそのコードになります。注記ですが、「Microsoft Edge」では、シャドーの見え方が弱いような気がしますが、そこはご愛嬌ということで。私個人、ウェブ開発のプロではないので・・・すいません・・・

最初の 3 行は、本ブログのベーステーマ「Frontier」の標準スタイルです。それに「background-color」を利用して背景色を設定して、「box-shadow」で影を作ります。結構、Try & Error で調整しているので、何度も修正はしているのですが、実際の方法や見え方に関しては、ネット上にあふれていますから検索してみることをお勧めします。

次に表題部分、ヘッダーセル、通常セル等々に関する設定を変更します。表題は「caption」で、ヘッダーセルは「th」で、通常セルは「td」で設定しますが、本ブログでは更に「td.data」を利用してデータセルを設定します。以下がサンプルコードです。

特徴!?は、ヘッダー部分に軽くグラデーションを入れているところかな。グラデーションに関しては、ネット上に素晴らしいウェブページがありますから、そちらを参考にして下さい。

以下が修正した結果の表(table)になります。

変更後の表(table)のスタイル結果
ヘッダー 1 ヘッダー 2 ヘッダー 3
セル 11 セル 12 セル 13
データセル 21 データセル 22 データセル 23

上記は、あくまでも投稿記事を公開した時のスタイルですが、将来的には色々と更なる変更を加えるかもしれませんので、ご理解のほどを。

気楽にコメントして頂けますように!コメントは承認後の公開です。

(必須) スパム対策にご協力下さい。下記、数式を完成してコメント送信して下さい。

Copyright © 2016-2017 by Zero Cool. All rights researved. Frontier Theme