Nvu1.0でホームページを作成しよう : Nvu1.0のテーブルでレイアウト

top || Nvu1.0でホームページを作成しよう || テーブルでレイアウト

▼Nvu1.0のテーブルでレイアウト

 

テーブルでレイアウトができる事を理解できると出来ないとではサイトの見た目に雲泥の差が生じます。

 

▼Nvu1.0 テーブルとは

 

皆さんは表(テーブル)と言えばマイクロソフトのエクセルやロータスなどの表計算を想像すると思いますが、ホームページではレイアウトを整える重要な役割を果たします。

例)エヌヴュー のプロフィール

枠無し(テーブルがあることを感じさせない)

名前 エヌヴュー
年齢 3歳
住所 日本
職業 デザイナー
趣味 散歩
電話番号 ひみつ
枠表示(実はこうなっています)
名前 エヌヴュー
年齢 3歳
住所 日本
職業 デザイナー
趣味 散歩
電話番号 ひみつ

テーブルを使わなくても出来そうですが、訪問者のブラウザがどのフォントを使用しているかによって文字間隔がそれぞれ違いますのでレイアウトがガタガタになってしまいます。

又、こんな事もテーブルを使わないと出来ません。

枠無し(テーブルがあることを感じさせない)

名前 エヌヴュー
年齢 3歳
住所 日本
職業 デザイナー
趣味 散歩
電話番号 ひみつ
枠表示(実はこうなっています)
名前 エヌヴュー
年齢 3歳
住所 日本
職業 デザイナー
趣味 散歩
電話番号 ひみつ

 


例)スポーツニュース

枠無し(テーブルがあることを感じさせない)
メニュー
広告スペース
広告スペース
更新履歴
今日の出来事
掲示板
日記
プロフィール
プロ野球 最新情報
5/30 タイガースまたも最下位
6/1 巨人不振か?

世界水泳 最新情報
****が金!
枠表示(実はこうなっています)
メニュー
広告スペース
広告スペース
更新履歴
今日の出来事
掲示板
日記
プロフィール
プロ野球 最新情報
5/30 タイガースまたも最下位
6/1 巨人不振か?

世界水泳 最新情報
****が金!

こんな感じでデザインも兼ねてしまいます。結構便利!

今は大分使われなくなって来てますが、まだまだ現役!

臨機応変に使用するべし!

 

▼Nvu1.0 テーブルの名称

 

下を全て指しているのが[テーブル]です。そして一つ一つが[セル]と言います。

名前 エヌヴュー
年齢 3歳
住所 日本
職業 デザイナー
趣味 散歩
電話番号 ひみつ

 

▼Nvu1.0 実際に表を作る

 

では実際に表を作ってみましょう。

テーブルの挿入・配置

・テーブルの挿入
・セル内の配置
・テーブルの配置

テーブルの背景

・背景の挿入
・背景に画像

その他、テーブルの設定

・セルの間隔とは
・セルの間隔を設定
・ユーザビリティー

 

戻る||アップロード