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

lifezakk

投稿者の記事一覧

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

関連記事

  1. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  2. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  3. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  4. LINEで郵便局の荷物追跡や再配達ができる!?
  5. テーブルの見出しを固定できるjsがとても便利。
  6. Photoshopで対象物の色を変更する簡単な方法。
  7. YoutubeやUstreamの埋め込み動画をスマホ向けにレスポ…
  8. GoProMAX等で撮影した360度写真をPhotoshopで簡…

コメント

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

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

おすすめ記事

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. ホウチ帝国 イベント攻略 「財宝発掘」について 7/20-7/26
  2. – from Instagram
  3. 遂にメルカリが、公式にPCからの出品に対応!
  4. 城ドラ新キャラ サムライビートル販売開始!ステータスやスキルついてまとめ。
  5. 城ドラ レッドドラゴンとチビドラのタッグで焼き尽くす!

インスタグラム

This error message is only visible to WordPress admins
Error: There is no connected account for the user 8694609815.

カテゴリー記事一覧

PAGE TOP