HOME＞テーブル使用法

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



■レイアウトに使用する。
　レイアウト。つまり文章や、画像などの配置。
これにも主にテーブルタグが使われています。

スタイルシートなど、自由なレイアウトが可能な技術があるのに多くのサイトでは未だにHTMLのテーブルタグでレイアウトをしています。

なぜなら一番簡単だから。

読み込み時間が長くなる恐れもありますがテーブルタグは何より簡単です。
しかも表がもとになっているから、自由な配置の場合よりずっとまとまりがあるレイアウトになります。

　さて、下のレイアウトはあるページのトップページレイアウトを簡略化したものです。コレをテーブルで再現してみましょう。
題名・バナー サイト概要・・・・
・・・・・・・・・
ナビ１ ナビ２ ナビ３ ナビ４
メニュー

１
２
３
４
５
６
 文章ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー コンテンツ
コンテンツ
コンテンツ
konsproduce


①　まずセルの数を決定します。
ページの全体像を創造し、ラフスケッチをかきます。
スケッチといっても簡単なもので構いません。
それをもとにセルの数を決定します。

　ラフスケッチをもとに最小の長方形か正方形を一単位として行の数、列の数を決めます。上のレイアウトだとこのようなセル割りにすると良いでしょう。
あとから書き足すときのためにセルを多めにつくっておくのもいいかもしれません。


②次に大きくしたいセルをくっつけていきます。「セルの結合」には
<TD colspan="セル数"><TD rowspan="セル数" >

<TD>で表されるセルを横に2つ分つなげたいときはcolspan="2",縦に2つ分つなげたいときはrowspan="2"となります。

セルの結合についてはHTMLリファレンスサイトを参考にするとより分かりやすいでしょう。いまさらHTML講座など。


③セルの結合ができたらラフスケッチどおりに整形します。セルの幅や高さなどを<TD width="幅" height="高さ">で設定しましょう。


④最後にテーブルの枠線を消し、罫線の幅を０にすればレイアウトの完成です。<TABLE cellspacing="0">とし<TABLE border="">のborder部分を消す。

こうしてレイアウト枠を作ることで、セル部分ごとにサイト作成ができたり、文章が自動で折り返しできるなどのメリットが生まれます。

ただし画像をセル内に置くときは画像の大きさとセルの大きさをあわせるように注意しましょう。


右レイアウトに使ったHTMLソース
<TABLE width="252" height="196" cellspacing="0">
<TBODY>
<TR>
<TD bgcolor="#ffcf00" colspan="2" height="20"></TD>
<TD bgcolor="#ffffff" colspan="2" height="20"></TD>
</TR>
<TR>
<TD bgcolor="#ffff00" width="59" height="16"></TD>
<TD bgcolor="#ffff00" width="46" height="16"></TD>
<TD bgcolor="#ffff00" width="63" height="16"></TD>
<TD bgcolor="#ffff00" width="51" height="16"></TD>
</TR>
<TR>
<TD bgcolor="#ffffff" rowspan="3" width="59" height="121"></TD>
<TD bgcolor="#efebef" colspan="2" rowspan="3" height="121"></TD>
<TD bgcolor="#ffffff" width="51"></TD>
</TR>
<TR>
<TD bgcolor="#ffffff" width="51"></TD>
</TR>
<TR>
<TD bgcolor="#ffffff" width="51"></TD>
</TR>
<TR>
<TD bgcolor="#000000" colspan="4" height="11"></TD>
</TR>
</TBODY>
</TABLE>


■テーブルはつねにわかりやすく。
テーブルのテクニック、特にレイアウトは簡単でしかも効果的です。

しかし、だからといってテーブルを多用し、列も行もわからないテーブルをつくったり、テーブルの中にテーブルを作るなどをしすぎると痛い目にあいます。

テーブルはお互いのセルの幅や全体の大きさが関わりあっているので、行や列を多くするとその制御がきかなくなってきます。

また、テーブルのなかにテーブルをつくりすぎると読み込みが遅くなる傾向にあります。

シンプルに。キレイにしましょう。
→次へ
プロの技！ウェブデザインの資料集
騒がしいイメージを逆手に
フェイスインターネットショップ


この騒がしさは何なんだ。と思わせるほどの画像の嵐。
配色も賑やかこの上ない。
まるで電気屋に行ったかのような騒がしいデザインは狙いか。
基本的なレイアウトはナビ＋3段レイアウトとベーシック・スタイル。
「サイト内検索」は情報量の多いページには欠かせない要素。
チュートリアルー第17回
テーブルを使ってレイアウト！

前回はナビゲーションのデザインをしました。
今回はテーブルタグを使ったレイアウトをやってみましょう。

テーブルはもともとレイアウトの為のタグではないのですが、現在は様々な理由により多くのウェブデザイン・レイアウトに使われています。

左で紹介しているのは基本的なレイアウトの例で、画面が縦に3分割されている「3段レイアウト」です。

3段レイアウトはデザインとして効率良く、いろんなサイトで使うことが出来ます。
今回はこの「3段レイアウト」を上のチュートリアルページに当てはめてみます。

①題名の部分を1行3列のテーブル(枠線無し)に挿入→左のセルには題名、中央は空白セル、右側のセルにサイト概要文

②ナビゲーションはそのままで、メニュー・サイト説明・空白、で3段レイアウトを構成します。
1段目はメニュー(左寄せのテーブル)として出来ているので、同じ行にに以下のような表(枠線なし)を挿入します。
3段目
2段目
2段目
メニューは左寄せになっているので、このテーブルは自動的に右側に来ます。

③それぞれのコンテンツを表中に挿入します。2段目には「what is,,」をコピー＆ペースト
topics
nodata...

HOME＞テーブル使用法

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





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