こんばんは！CSSのテーブルタグのデザインテンプレートの備忘録です。CSS（Cascading Style Sheets）は、カスケーディング・スタイル・シートと呼ばれウェブページのスタイルを指定するための言語になります。
CSSについてのコード記述方法について詳細は過去記事のはじめてのCSS備忘録をご覧ください。
CSS を使用した時のテーブルタグ デザイン
前回記事のテーブルタグを使用してCSSを記述していきます。
前回、HTMLのページで紹介したテーブルのデザインは下記のようなデザインです。とてもシンプルなデザインで味気ない感じです。
これに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は一度作ったものは、パソコンなどに保存して使いまわすと便利です。そうすることで最初から長いコードを作成する手間が省ける時があります。それではー！
