上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 今回は、実際にテーブルタグをデザインしてみます。
 テーブルを使えば、今まで文章では説明しづらかったことが、グラフィカルにわかり易く表現出来るようになります。
 いろんな見やすいテーブルをデザインしていってください。


テーブルの基本形

301 302 303 304 305
201 202 203 204 205
101 102 103 104 105



 この形を基本にして、実際のどんなデザインが出来るのか、実演していきましょう。
 タグはそのままブログ内でも使用できます。活用してね☆
 ブログサービスでは、自動で「改行(<br>)」が挿入されるため、タグに改行は入っていません。見づらいですが…また、「閉じタグ(</tr>)(</td>)」は省略可能な場所は省略されています。



見本とタグ


下駄箱風

301 302 303 304 305
201 202 203 204 205
101 102 103 104 105




「border-collapse : collapse ; border-spacing : 5px ;」で、ボーダーの隙間を表現。テーブルのバックグランドカラーを水色、「td」のバックグランドカラーを白に指定しています。



トリコロール

301 302 303 304 305
201 202 203 204 205
101 102 103 104 105




スタンダード

301 302 303 304 305
201 202 203 204 205
101 102 103 104 105




シック

301 302 303 304 305
201 202 203 204 205
101 102 103 104 105



 こんな感じで、様々なテーブルのデザインが使用できます。

 細かいデザインを施すと、タグが非常に長くなり、実用的ではありませんが…
 実際は、スタイルシートを使って(旗印で!)一定のデザインを指定しておくのが現実的です。
 ちょっとしたお遊び感覚の時などに、活用してください。



 つぎのページへはコチラから。
テーブルをある程度制御する

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