HOME>テーブル使用法

kon`s produce webdesign lecture!
<<|テーブル使用法|グラデーションマーカーを使用する>>
   Lテーブルをキレイに見せる
   L題や項目の表現
   Lレイアウトに使う
テーブルの役割



■ウェブデザインでの<table>の役割

 HTMLで<table>タグといえば「表」をつくるためのもの、という考えが一般的ではないでしょうか。

しかしウェブデザインにおいては、そんな使われ方をすることはあまりありません。
ジツはほとんどの<table>タグが右のような普通の
「表」とはまったく違う使われ方をしています。

 以下の<table>タグの使い方が解れば、ウェブサイトでいかに多く<table>タグが使われているか気が付くはずです。


normal table  一般的なテーブルの使い方
 エクセルのように資料を整理するため
統計資料に使う
アンケートの集計結果など


■<table>タグをキレイに見せる

 テーブルタグは、普通に使うと上の「normal table」のように枠が立体的な表になります。

もちろんこのままでもいいのですが、ちょっと味気ないと思いませんか?
全体のデザインと調和がとれにくいこともあるでしょう。

kon`s produce
 右の枠ならどうでしょうか。色も自由に変えられるし、枠線の立体感がなくなったことや、線が細くなったことによって他との調和がとりやすそうです。

 
右上のnormal tableも右の枠も、<table>タグを使
design
った表現です。
使い方によって大きな違いがでることが分かると思います。

 では右の枠のようなテーブルを作ってみることにしましょう。
とても簡単です。


web site
 まず始めにテーブルの枠線を消してしまいます。<TABLE border="枠線の太さ">のborder=""の記述を消します。

 これで枠線がなくなります。次にセル(テーブルの一マス)ごとに背景を設定します。
セルの背景を白
for free
にするなら<TD bgcolor="#ffffff">とします。

 セルの背景が設定できたら、今度は違う色を使用して、テーブル全体の背景を設定します。
全体の背景を黒にするなら<TABLE bgcolor="#000000">

 最後にテーブルの罫線を設定します。
罫線は通常なら枠の大きさとして表示されますが、枠が消えてしまっているため、全体の背景色の線が表示れます。
<TABLE bgcolor="#000000" cellspacing="1">とする。

 これで白地に黒枠線のテーブルができたはずです。
このテクニックはウェブデザインでは非常に多く使われています。
「スタイルシート」とかつかってんじゃないの?と見せかけて
ジツはHTMLだけでできるんですね。

 
タグはこうなる
<TABLE cellspacing="1" bgcolor="#000000">
<TBODY>
<TR>
<TD></TD>
</TR>
<TR>
<TD bgcolor="#FFFFFF"></TD>
</TR>
</TBODY>
</TABLE>
→次へ
プロの技!ウェブデザインの資料集
画像の代用を考える
オンライン「実践WEBデザイナー塾」



ウェブデザイン関連のページにしてはすごくシンプルな作り。
基本的にはテーブルで構成されていて、画像で立体感をだしている。
上部のグラデーションや右部の影は3Dドラム3Dテーブルを使ってHTMLのみでもデザインできる。

チュートリアルー第15回
テーブルをデザインしよう!

前回はテーブルタグとフォントタグでロゴ作成の応用をしました。

今回は左のテーブルタグの使い方を基本にしてデザインしてみたいと思います。

@メニューのロゴに当たる部分のテーブルを2行1列にします。
上のセルには「menu」のフォントを、下のセルにメニューの内容をコピー&ペースト

A左のテーブル使用法をもとにテーブルを調整します。
ここでは枠線無し、罫線=2、下のセルの背景を白にします。

BここでAのテーブルを左よせにして、ページの右側には「what is,,,」の部分をもってきます。
テーブルの左寄せには<TABLE align="left">を使います。

下のように少しウェブデザインっぽくなってきました。
このようなデザインも基本的なタグの組み合わせでできているのです。




topics
nodata...

HOME>テーブル使用法

kon`sproduce All rights reserved
お問い合わせ





100MB無料ホームページ可愛いサーバロリポップClick Here!