上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 テーブルが使えるようになったら、テーブルにも他のタグ同様クラスを当てていきます。
 テーブルタグに当てられるクラスは、ほぼdivボックス同様です。
 width、フォント系やバックグランドカラーなどが当てられます。

 テーブルで使うスタイルで、かなりデザインが整形出来るものをピックアップ。


一覧表

枠線border
横幅width
背景background
ボーダーborder
テキストの位置vertical-align
表の隙間border-collapse
border-spacing

*「width」や「border」などは、「文字デコ・基本のCSSの命令文(プロパティ)」に書き方を紹介しています。




命令文(プロパティ)


vertical-align

「<td>」に指定出来る命令文です。
 表の中に入れるテキストやオブジェクトを、「上揃え」「真ん中揃え」「下揃え」に指定できます。
 書き方は…

vertical-align :top ;上詰め
niddle ;中央揃え
bottom ;下詰め

 こんな感じになります。

topだと、こういう感じの表示。middleだと、こんな感じ。デフォルトの値です。bottomだと、こんな感じです。


border-collapse

「<table>」に指定出来る命令文。
 表の枠の隙間を、無くすか、有りにするかの指定です。
 書き方は…

border-collapse : collapse ;無し
separate ;有り

 表示は、こんな感じの違いが…

  
separate
  
collapse


border-spacing

「<table」で使える命令文。
 ひとつ上の項目「border-collapse : separate ;」の時にだけ指定できます。隙間の大きさを数値で指定できます。
 書き方は…

border-spacing : ○px ;隙間の幅



 実際に表示確認してみる。
テーブルスタイルシート・テスト



 テーブルのボックスはちょっと特殊で、中には基本の命令文(文字デコ・基本のCSSの命令文(プロパティ))が上手く効かない命令文も有ります。

「<table>」タグは、ほぼブロック要素、「<tr>」「<td>」は、微妙な要素と覚えておけば、いい感じがします。
 厳密な指定をする場合は、「Tables」とか、「HTMLクイックリファレンス」とか、調べてみてください。どちらにせよ、ブラウザや環境によって、見え方が左右されることが有ります。

 ちなみに、後者のリンクはオススメです。前者のリンク先「W3C」のスタイルシートが網羅されています。日本語で、説明されていますので、なんとなく分かってきたら、こういう所で「辞書をひく」ように調べ物が出来るようになると思います。

■次のページはコチラから。
テーブルタグ・デザイン

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Thu.04.08.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。