基本となるシンプルなtableの装飾:CSS小技

ブログが作りたい!CSSの小技 > 基本となるシンプルなtableの装飾:CSS小技

基本となるシンプルなtableの装飾:CSS小技

基本となるシンプルなtableの装飾:CSS小技

CSSの小技(14)

今回は、table(一覧表)に、基本的でシンプルな装飾をほどこす CSSの小技をご紹介いたします。


基本となるシンプルなtableの装飾とは?

例えば、次のような枠(罫線)や、背景色を table(一覧表)にほどこすことを指しています。

基本となるシンプルなtableの装飾

今回もサンプルを用意しました。良かったらサンプルをご覧になってみてください


tableに基本的でシンプルな装飾をほどこす方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、「border-collapse」に、collapse(隣接するボーダーは重ねて表示する)を設定していることです。

「border-collapse」というのは、table内の各セルのボーダー(枠)の表示の仕方を指定するプロパティです。

「border-collapse」に、collapseを指定することで、セル同士が「ぴたっ」とくっついたような、そんな感じになります。

あとは、CSSのborderプロパティで、重複しないようにボーダー(枠)を指定しています。

重複しないようにボーダーを指定

また、th(項目見出し)に、background-colorで背景色をつけると、より一覧表らしくなります。(見やすくもなります)


追記:「border-collapse: collapse;」のバグ対応

1:「border-collapse: collapse;」のバグ

5ri3さんから「Firefox3.5で見ると、一覧表がズレている」旨のご指摘をいただきました。

表示を確認してみると、なるほどたしかにFirefox3.5の他にも Chrome、Safari、Operaなどで同様の異常がみられました。こりゃピンチ!

調べてみると、どうやら「border-collapse」にて「collapse」を指定すると、状況によって、異常な表示になってしまうようです。

Firefox3.0では問題なかったはずなので、3.5の開発段階でプログラマの人がとちったのかもしれません。

2:「border-collapse: collapse;」の暫定的な解決法

とりあえず、暫定的な解決法としては、次のようにすればよろしいかと思います。

「collapse」で異常が起きるFirefox3.5、Chrome、Operaについては、「separate」指定に代えて、さらに「border-spacing: 0px;」を指定します。

しかし、IE6、7は、「border-spacing」が正しく表示できないので、CSSハックで「/border-collapse: collapse;」を指定します。

それから、Safari3は何ともならんようです。調べたら方法があるかもしれませんが、とりあえずの暫定的な解決法として、ここまで記述しておきます。

5ri3さん、ご指摘ありがとうございました。

前の記事へ
次の記事へ

次回予告

次回も、一覧表(table)をきれいに表示する CSSの小技をご紹介したいと思います。少しだけおしゃれです。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2009/05/05 更新日:2009/07/23

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/498-aa9a5462
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて