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. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  2. ヤフオクの商品説明を綺麗に!売上アップのポイント
  3. マーケティングオートメーションの「Mautic」導入について
  4. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  5. facebookのいいねボタンに5種類の感情ボタンが出現!
  6. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  7. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  8. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…

コメント

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

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

おすすめ記事

Photoshopで対象物の色を変更する簡単な方法。

ポスターやヒーローバナー、広告バナーを制作しているとよく色の変更をしますよね。例えば冬の時期ならば青…

OVERHIT GvG「栄光の戦域」攻略のポイントを理解する。

GvGが実装され2日目、初日は偵察によるポイントが勝利ポイントに加算されるなど不具合がありましたね。…

簡単に美しいマーブル模様をPhotoshop CCで作成する方法

マーブル模様を簡単に作成する方法です。使用するのはPhotoshop CC。CCじゃなくてもいけるか…

WordPressの悩み相談「目次を中央寄せにしたい」を解決。

ひと昔はアメブロのカスタム相談が多かったですが、最近はWordPress(ワードプレス)に移行してい…

マーケティングオートメーションの「Mautic」導入について

マーケティングオートメーションの「Mautic」について、自社サーバーを利用したネットショップに導入…

人気記事

  1. DQMJ3 クリア前中盤~後半に使える効率の良い経験値の稼ぎ方
  2. 城ドラ 11/30 キャラ能力バランス調整 まとめ
  3. 草コインXPを購入してみた
  4. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポンシブ対応させてみよう。
  5. 本当にシワにならないの?CHOYA Shirt 日清紡のワイシャツ。1年着用したレビュー!

インスタグラム

カテゴリー記事一覧

PAGE TOP