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. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  2. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  3. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  4. テーブルの見出しを固定できるjsがとても便利。
  5. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  6. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  7. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  8. Pythonで作成したボットの実行結果をLINEに通知させる備忘…

コメント

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

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

おすすめ記事

カメラを持って瞬間を狙ったPhoto retouch。

投稿コメントカメラを持って瞬間を狙った。lifezakk Instagram…

背景のぼかし系レタッチ – from Instagram

投稿コメント背景のぼかし系レタッチlifezakk Instagram…

光のぼかしレタッチ。

投稿コメント光のぼかしレタッチ。lifezakk Instagramぼかしレンズ…

合成する時のトーン調整レタッチ

投稿コメント合成する時のトーン調整レタッチlifezakk Instagram背景と…

Pixar風レタッチ。 – from Instagram

投稿コメントPixar風レタッチ。lifezakk Instagram…

人気記事

  1. 黒い砂漠モバイル 馬やペットの交換(世代上昇)や武器防具・アクセサリーの潜在力突破について
  2. NHKがリオオリンピックを試験的にネット中継!?PCでもスマホでもLIVE視聴!
  3. 城ドラ キャラ月間検索ランキング-2016年6月
  4. マーケティングオートメーションの「Mautic」導入について
  5. 放置xRPG ホウチ帝国 事前登録キャンペーン!最大ダイヤ3,000個!

インスタグラム

カテゴリー記事一覧

PAGE TOP