CSS

table装飾時に持っておきたいベーステンプレートとなるCSS

みなさんtableって結構使いますか?zakkは結構使っちゃいます。古いIEでもまぁ崩れずに表示されますので万能=楽ですw
入れ子にしてはさすがに使いませんが、ちょっとした箇所に使ったりします。

今日はそんな時にすぐに取り出せるようベースとなるtableのCSSについて備忘録です。

tableベーステンプレートとなるCSS

HTML

HTMLは、下記の感じです。特出する点はございません。クラス名をtblなど指定しあとは普通に記述してください。
thにwidthを指定すると簡単に列の幅を固定指定し直せて便利です。ピクセル指定するとスマホで閲覧時にはみ出す可能性があるので、ここではパーセントで指定しておきます。

<table cellpadding="0" cellspacing="0" class="tbl" width="100%">
<tr>
<th width="25%">A</th>
<th width="25%">B</th>
<th width="25%">C</th>
<th width="25%">D</th>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
</table>

CSS

tableにcollapseを指定します。隣接する境界線を結合し表示させます。ブラウザによりseparateが初期値の場合もあるので、しっかり指定をします。trは、奇数行または偶数行の背景色を縞々にし見やすくします。th、tdは任意に装飾しましょう。

.tbl {
border-collapse: collapse;
border: 1px solid #ccc;
margin: 0 0 10px;
font-size:12px;
}
.tbl th {
background:#E5E5E5;
color:#222;
font-weight:bold;
border: 1px solid #ccc;
padding:5px;
}
.tbl td {
border: 1px solid #ccc;
padding:5px;
}
.tbl tr:nth-child(odd){
background:#fafafa;
}

実際のベースとなるテーブル

A B C D
ストロベリー アップル オレンジ バナナ
ストロベリー アップル オレンジ バナナ
ストロベリー アップル オレンジ バナナ
ストロベリー アップル オレンジ バナナ

これだけでも、見栄えは良くなったと思います。後は適宜編集すればサクッと表ができますよね。
なお縞々部分はCSS3の擬似クラス:nth-child(n)となりIE8以下では未対応となります。

 

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  2. 川沿いの景色 – α6400 – sig…
  3. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  4. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  5. Photoshopで対象物の色を変更する簡単な方法。
  6. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  7. テーブルの見出しを固定できるjsがとても便利。
  8. Googleマイマップでハマった「ズームアウトするとすべてのピン…

コメント

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

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

CAPTCHA


おすすめ記事

SNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラするんだよね。そこを踏むと中にはサラサラのパウダーが詰まってる。 – フォトレタッチ

投稿コメントSNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラする…

ALLGREEN. – フォトレタッチ

投稿コメントALLGREEN.rezakk399 Instagram…

factory. – フォトレタッチ

投稿コメントfactory.rezakk399 Instagram…

雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版いたしました。初めての方でもレタッチが楽しめるよう解説した一冊です。電子書籍では試し読みもできます。プロフィールのリンク先を掲載してますので良かったらご覧ください。 – フォトレタッチ

投稿コメント雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版…

夕焼けシルエット。 – フォトレタッチ

投稿コメント夕焼けシルエット。rezakk399 Instagram…

人気記事

  1. 城ドラ 新キャラ「ジャイアントパンダ」登場。特徴とスキルをチェック。
  2. 髪の毛のリアルな切抜き。 – from Instagram
  3. 仮想通貨歴10日間で戸惑った3つのこと
  4. カミナリ@ – from Instagram
  5. SNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラするんだよね。そこを踏むと中にはサラサラのパウダーが詰まってる。 – フォトレタッチ

インスタグラム

カテゴリー記事一覧

PAGE TOP