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. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  2. ヤフオクの商品説明を綺麗に!売上アップのポイント
  3. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  4. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  5. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  6. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  7. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  8. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…

コメント

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

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

おすすめ記事

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

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

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

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

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

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

OVERHIT(オーバーヒット) 「震天の神域 風の龍 ファフニール」が10月18日(木)START

前回の討伐戦の風BOSSは、「アラクネス」でしたが、今回は「震天の神域 風の龍 ファフニール」です。…

Photoshopの炎フィルターを使って簡単にテキストを炎文字にしてみる。

炎文字は、結構頻繁に使います。例えば、イベントやキャンペーンのポスターやバナー、アプリゲームでも使っ…

人気記事

  1. Photoshop CC 導入。バナー作成時に楽する複数アートボードとスマートオブジェクトの活用方法
  2. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載する方法。
  3. ホウチ帝国 銀月酒場イベントについてまとめ
  4. ふとっちょ剣士が城ドラに登場!新キャラの気になるスキル等についてまとめ
  5. 【事前登録】Guardian Hunter 爽快感MAXの大乱闘アクションゲーム

インスタグラム

カテゴリー記事一覧

PAGE TOP