free web hit counter

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. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  2. ヤフオクの商品説明を綺麗に!売上アップのポイント
  3. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  4. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  5. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  6. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  7. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  8. Pythonの実行結果をGoogleスプレッドシートに出力してみ…

コメント

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

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

おすすめ記事

OVERHIT(オーバーヒット) 闇属性レイドボス「獣の王」9月13日(木)登場!

久々の討伐戦です。レイドボスが闇属性なので、今まで通りの場合、闇属性の強力な武器防具やアクセサリーが…

OVERHIT(オーバーヒット) 新装備「グリモア」について

8/30のメンテ後から新装備「グリモア」が登場。グリモアは、SSRとSR英雄固有の装備品で装備す…

OVERHIT(オーバーヒット) 9/1から始まる新イベ!震天の神域「火の龍 イグニス」新装備「グリモア」が手に入る!?

9/1より「震天の神域」が始まりますね。最初のレイドは、「火の龍 イグニス」。このイベントで獲得でき…

OVERHIT(オーバーヒット) ギルド対抗戦 最終日 皆様お疲れさまでした。

OVERHIT(オーバーヒット) ギルド対抗戦、最終日の結果がでましたね。皆様お疲れさまでした。…

OVERHIT(オーバーヒット) ギルド対抗戦 6日目 ランキング・変動順位更新

ギルド対抗戦6日目です。残す時間も僅かとなってきました。この週末でランキングの変動も多くなると思…

人気記事

  1. 城ドラ新キャラ サムライビートル販売開始!ステータスやスキルついてまとめ。
  2. 城ドラ クレイジーフラワーが登場!気になるスキルは!
  3. ホウチ帝国 機種変更でのデータ引継ぎについて
  4. iPhone7 iPhone7 Plusにイヤホンジャック接続の自分撮りセルカ棒は使えるのか!?
  5. 城ドラ 12月26日のキャラ能力バランス調整

カテゴリー記事一覧

PAGE TOP