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 や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. ヤフオクの商品説明を綺麗に!売上アップのポイント
  2. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  3. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  4. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  5. マジックアワー α6400 – sigma 30mm f1.4
  6. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  7. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  8. CSSグリッドレイアウトについて。flexboxより使いやすいが…

コメント

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

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

おすすめ記事

お皿の物撮り。 – from Instagram

投稿コメントお皿の物撮り。rezakk399 Instagram…

My favorite dish. – from Instagram

投稿コメントMy favorite dish.#fruitinfusedwater #fruit…

Abandoned bench. α6400-sigma 30mm – from Instagram

投稿コメントAbandoned bench. α6400-sigma 30mm#wood #ba…

マジックアワー α6400 – sigma 30mm f1.4

夕日が落ちかけた19時前に撮影。この数分間はほんと色が変わる。写真を撮り始めて初めて知った日常ですね…

川沿いの景色 – α6400 – sigma 30mm f1.4

投稿コメント川沿いの景色lifezakk Instagramこの写真は、陽が落ちた19時…

人気記事

  1. ホウチ帝国 配信スタート!人気急上昇ランキング1位獲得のアプリ
  2. VOUN使ってみた。すごい簡単にモック作れるね。 – from Instagram
  3. 城ドラ キャラ能力バランス調整 2016/6/10仕様変更!オークが近距離複数へ
  4. 城ドラ チビドラLv30・研究所10フル装備のステータス
  5. 城ドラ 新キャラ登場!ジャイアントサイ!砦占拠タイプの2コス

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP