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. マーケティングオートメーションの「Mautic」導入について
  2. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  3. テーブルの見出しを固定できるjsがとても便利。
  4. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  5. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  6. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  7. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  8. WordPressの悩み相談「目次を中央寄せにしたい」を解決。

コメント

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

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

おすすめ記事

テーブルの見出しを固定できるjsがとても便利。

テーブルによる表の表示はよく利用します。ただ近年はスマホの対応があるのでこの表示領域はかなり絞られま…

ゲームのキャラ(黒い砂漠)をリアルの世界に配置してみたビジュアル風レタッチ。 – from Instagram

投稿コメントゲームのキャラ(黒い砂漠)をリアルの世界に配置してみたビジュアル風レタッチ。…

友達のヨーロッパ旅行写真のレタッチ。観光名所は、案内板や補強工事などがあるので雰囲気壊すものもある。そういうのを取り除いてあげるのもレタッチの仕事かな。やりすぎるとアレだけどね。1枚目レタッチ。2枚目元画像光を強調。看板を削除。階段の木目を調整。天井部分の補強パネルを削除。 – from Instagram

投稿コメント友達のヨーロッパ旅行写真のレタッチ。観光名所は、案内板や補強工事などがあるので雰囲気…

黒い砂漠モバイル 馬やペットの交換(世代上昇)や武器防具・アクセサリーの潜在力突破について

今回は序盤で躊躇してしまう交換(世代上昇)や武器防具・アクセサリーの潜在力突破についてです。特にアク…

BONXを購入。アプリとイヤフォンを組み合わせたネット通信を介したコミュニケーションツールのレビュー。

まず「BONX」は、1個15,000円と結構高額です。まず買う前に思うことは、Bluetoothのイ…

人気記事

  1. 友達のヨーロッパ旅行写真のレタッチ。観光名所は、案内板や補強工事などがあるので雰囲気壊すものもある。そういうのを取り除いてあげるのもレタッチの仕事かな。やりすぎるとアレだけどね。1枚目レタッチ。2枚目元画像光を強調。看板を削除。階段の木目を調整。天井部分の補強パネルを削除。 – from Instagram
  2. iPhone SE と iPhone5/5s の形状について
  3. OVERHIT(オーバーヒット) 毎日10時間ぐらいプレイしてみて身に付いた攻略要素まとめ
  4. 遂にメルカリが、公式にPCからの出品に対応!
  5. 6/16 ドラゴンクエストモンスターズ ジョーカー3 モンスターマスター究極秘伝書 発売!プレゼントコード付き

インスタグラム

カテゴリー記事一覧

PAGE TOP