CSS

table装飾時に持っておきたいベーステンプレートとなるCSS

みなさんtableって結構使いますか?zakkは結構使っちゃいます。古いIEでもまぁ崩れずに表示されますので万能=楽ですw
入れ子にしてはさすがに使いませんが、ちょっとした箇所に使ったりします。

今日はそんな時にすぐに取り出せるようベースとなるtableのCSSについて備忘録です。

tableベーステンプレートとなるCSS

HTML

HTMLは、下記の感じです。特出する点はございません。クラス名をtblなど指定しあとは普通に記述してください。
thにwidthを指定すると簡単に列の幅を固定指定し直せて便利です。ピクセル指定するとスマホで閲覧時にはみ出す可能性があるので、ここではパーセントで指定しておきます。

CSS

tableにcollapseを指定します。隣接する境界線を結合し表示させます。ブラウザによりseparateが初期値の場合もあるので、しっかり指定をします。trは、奇数行または偶数行の背景色を縞々にし見やすくします。th、tdは任意に装飾しましょう。

実際のベースとなるテーブル

A B C D
ストロベリー アップル オレンジ バナナ
ストロベリー アップル オレンジ バナナ
ストロベリー アップル オレンジ バナナ
ストロベリー アップル オレンジ バナナ

これだけでも、見栄えは良くなったと思います。後は適宜編集すればサクッと表ができますよね。
なお縞々部分はCSS3の擬似クラス:nth-child(n)となりIE8以下では未対応となります。

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  2. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  3. facebookのいいねボタンに5種類の感情ボタンが出現!
  4. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  5. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  6. マーケティングオートメーションの「Mautic」導入について
  7. LINEで郵便局の荷物追跡や再配達ができる!?
  8. Pythonで作成したボットの実行結果をLINEに通知させる備忘…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

濃い色系のセーターを難度が高い白色にレタッチ。青や赤などは色調補正とトーンカーブで簡単に色変更が出来るけど、ダーク系をキレイな白色にするのはひと手間かかるし調整がなかなか難しいねChange the dark sweater to a more difficult white.Also red and blue. – from Instagram

投稿コメント濃い色系のセーターを難度が高い白色にレタッチ。青や赤などは色調補正とトーンカーブで簡…

写真合成のレタッチ。 – from Instagram

投稿コメント写真合成のレタッチ。lifezakk Instagram…

光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種類を使ってます。調整には、トーンカーブの明暗を多用。 – from Instagram

投稿コメント光エフェクトのレタッチ。光エフェクトは、明るさの最大値とフィールドぼかしの効果の2種…

GoProMAX等で撮影した360度写真をPhotoshopで簡単に編集する方法。

先日発売されたGoProMAX。360度の写真や動画が撮影できるアクションカメラですね。今回は、…

GoProMaxからのキャプチャをPhotoshopでレタッチ。 – from Instagram

投稿コメントGoProMaxからのキャプチャをPhotoshopでレタッチ。lifeza…

人気記事

  1. 「アナザーエデン」は、シングルプレイ専用のアプリゲーム!ソシャゲに疲れた方におススメですね。
  2. OVERHIT(オーバーヒット) 風属性レイドボス「アラクネス」7月26日(木)開始!
  3. Googleマイマップでハマった「ズームアウトするとすべてのピンがずれる」問題を3分で解決。
  4. エヴァ貞本氏がキャラデザの大型新作「Black rose suspects」シナリオにハマる!
  5. volume up髪の毛に動きつけて少しボリュームアップするレタッチ。

カテゴリー記事一覧

PAGE TOP