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. 川沿いの景色 – α6400 – sig…
  2. Photoshopで対象物の色を変更する簡単な方法。
  3. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  4. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  5. マジックアワー α6400 – sigma 30mm f1.4
  6. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  7. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  8. CSSグリッドレイアウトについて。flexboxより使いやすいが…

コメント

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

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

おすすめ記事

ずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる便利な超高機能。 – フォトレタッチ

投稿コメントずっと苦手なイメージ持ってた3D。使ってみると思ったより簡単で、プロっぽく制作できる…

多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思ったけど結構時間を使った。ただ、面白い。 – フォトレタッチ

投稿コメント多重露光 アート風のレタッチ。人物と風景のバランスが難しい、簡単に出来るかなと思った…

秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待。 – フォトレタッチ

投稿コメント秋探し。十月桜は咲き始めかな?紅葉はもう少し先だね、気温が一気に下がれば色づきも期待…

Photoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う現在の手順はコレ①選択範囲を作成②「選択とマスク」で微調整しマスク③空の画像を配置④色調補正「カラーの適用」でトーン調整これがワンタッチに。トーン調整が付いてるのがヤバイ。進化がはやいなぁ、sensei。 – フォトレタッチ

投稿コメントPhotoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う…

四国 日の出。 – フォトレタッチ

投稿コメント四国 日の出。rezakk399 Instagram…

人気記事

  1. 城ドラ 剣士をカンストさせてみたけど、ここまで育てる必要あるの?
  2. 2月はビットフライヤーFXにデビュー。知識ゼロですが、ボットにも初挑戦。
  3. DQMJ3 初めての突然変異モンスターの見つけ方
  4. 夕焼けのショットとレタッチ。暗雲とのバランスが良かった。 – from Instagram
  5. VOUN使ってみた。すごい簡単にモック作れるね。 – from Instagram

インスタグラム

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