CSS テーブルデザイン お気に入りテンプレート備忘録

CSS

こんばんは!CSSのテーブルタグのデザインテンプレートの備忘録です。CSS(Cascading Style Sheets)は、カスケーディング・スタイル・シートと呼ばれウェブページのスタイルを指定するための言語になります。

CSSについてのコード記述方法について詳細は前回のはじめてのCSS備忘録をご覧ください。

CSS を使用した時のテーブルタグ デザイン

前回記事のテーブルタグを使用してCSSを記述していきます。

前回、HTMLのページで紹介したテーブルのデザインは下記のようなデザインです。とてもシンプルなデザインで味気ない感じです。

tableタグ使い方
HTMLだけのデザイン

これにCSSを記述してみると下記のようなデザインになります。全体的に丸みを帯びて柔らかい色合いになっています。

CSSを使ったデザイン

CSSでフォント指定や色のグラディエーション、角の丸みも変更出来るため視覚的に美しいデザインになります。

CSS テーブルタグ テンプレート

上記のテーブルタグが個人的なお気に入りのCSSテンプレートコードになります。このCSSは行ごとに白と淡い青を交互に表示します。またカーソルを合わせると色が変わり視覚的に動的に見えるコードです。

table {
width: auto;
border-spacing: 0;
font-size:14px;

}

 

table th {
color: #fff;
padding: 8px 15px;
background: #48c;
background:-moz-linear-gradient(rgba(34,85,136,0.7), rgba(34,85,136,0.9) 50%);
background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(34,85,136,0.7)), to(rgba(34,85,136,0.9)));
font-weight: bold;
border-left:1px solid #258;
border-top:1px solid #258;
border-bottom:1px solid #258;
line-height: 120%;
text-align: center;
text-shadow:0 -1px 0 rgba(34,85,136,0.9);
box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}

 

table th:first-child {
border-radius: 5px 0 0 0;
}

 

table th:last-child {
border-radius:0 5px 0 0;
border-right:1px solid #258;
box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}

 

table tr td {
padding: 8px 15px;
border-bottom: 1px solid #84b2e0;
border-left: 1px solid #84b2e0;
text-align: center;
}

 

table tr td:last-child {
border-right: 1px solid #84b2e0;
box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}


table tr {
background: #fff;
}


table tr:nth-child(2n+1) {
background: #f1f6fc;
}


table tr:last-child td {
box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}

 

table tr:last-child td:first-child {
border-radius: 0 0 0 5px;
}


table tr:last-child td:last-child {
border-radius: 0 0 5px 0;
}

 

table td:hover {
background: #bbd4ee;
cursor:pointer;
}

このテーブルデザインのCSSはコードが長いです。もし気に入ればテンプレートとして保存してみてください。

CSSは一度作ったものは、パソコンなどに保存して使いまわすと便利です。そうすることで最初から長いコードを作成する手間が省ける時があります。。

それではー!

コメント

タイトルとURLをコピーしました