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. ヤフオクの商品説明を綺麗に!売上アップのポイント
  2. Photoshopで対象物の色を変更する簡単な方法。
  3. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  4. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  5. WordPressの悩み相談「目次を中央寄せにしたい」を解決。
  6. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  7. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  8. マジックアワー α6400 – sigma 30mm f1.4

コメント

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

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

CAPTCHA


おすすめ記事

Blue Protocolについて

こんにちは!今回は、オンラインゲームの最新作「Blue Protocol」についてご紹介します。この…

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

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

ALLGREEN. – フォトレタッチ

投稿コメントALLGREEN.rezakk399 Instagram…

factory. – フォトレタッチ

投稿コメントfactory.rezakk399 Instagram…

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

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

人気記事

  1. ディシディアファイナルファンタジー最新作「DFFオペラオムニア」がアプリで登場!バトルシステムやリセマラポイントについて
  2. オズクロノクロニクル-童話オズの魔法使いの世界観を豪華な声優陣が彩る3DアクションRPG
  3. 城ドラ タートルキャノンはおすすめ!フル装備にして感じた事
  4. ホウチ帝国 攻略 7/13-19のイベントについて まとめ
  5. 城ドラ リーグデッキの選出について重要な3つのポイント

インスタグラム

このエラーメッセージは WordPress の管理者にだけ表示されます

エラー: フィードが見つかりません。

アカウントを接続するには、Instagram Feed の設定ページに移動してください。

カテゴリー記事一覧

PAGE TOP