人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HPを作る際にテーブルを使うと思うのですが、
私はテーブル作成がとても苦手です。

WEBデザインをする人に質問です
テーブル作成を手際よくするコツを、できるだけ多く教えてください。なるべく解答欄に丁寧に記述して頂けると助かります。
おねがいします

●質問者: rrr3
●カテゴリ:コンピュータ インターネット
✍キーワード:デザイン 作成 手際 記述 HP
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● naleringar
●20ポイント

自分なりの方法です。最低限必要なものは、紙、鉛筆、エディタ(メモ帳など)、ブラウザです。

1:まず、作りたい表の形を紙の上でざっと構築します。縦横に段と列が必要で、どの枠は2列にまたがるか、そしてそこに入れる内容などです。置きたい場所の幅のピクセル数が決まっているなら、紙の上でそれも各枠に当てはめて計算しておきます。

2:1で作った設計図に従い、TABLE TR TDを並べていきます。一番最初は、BORDER=1にしておいて、中身は「あ」とか「い」とか、ともかく簡単にしておくことで、視覚的にセルの縦横の大きさと形を見られるので、設計図通りの段数・列数になるまで、TRとTDを組んでしまいます。開くタグ<TR>と閉じるタグ</TR>をセットでコピーペーストして、編集すると早いです。

3:TRとTDを正しく配置し終わって、設計図通りの枠線が表示されるようになってから、中身の文字やイメージを入れ込んでいきます。この作業中もまだBORDERはつけておきます。見やすいので。

4:最後に、思い通りの表示になったら、BORDERを外します(必要じゃない時は)

http://www.tohoho-web.com/www.htm

◎質問者からの返答

なるほど!ありがとうございます。


2 ● thunder9119
●20ポイント

テーブルのタグは確実に暗記してるものとして・・・

1.タブをそろえること!

これは絶対です。tableタグとtrタグを同じ行に置いたりすると

階層が全然分からなくなってしまうので…

<table>

<tr>

<td>

</td>

</tr>

</table>

という感じですね。


2.colspan、rowspanに悩んだらまず絵をかく

作りながら、ここの列が2列分で・・・とやってるとこんがらがるので

一度、全部で何列いるのかをちゃんと整理します。


3.線を表示する

HPでは表示したくない線も、border=0にせずに、作っていく間はborder=1にします。

線を消しながらやると、思った以上に目算がはずれます。


私は、この3つを気にするようにしてますね。

テーブル作成、頑張ってください。

http://q.hatena.ne.jp/answer

◎質問者からの返答

ありがとうございます!


3 ● youyoun
●20ポイント

レイアウトにtableタグを使うのは現在では一般的ではありません。tableは表などを作るのに限定し、レイアウトにはdivタグとcss(スタイルシート)を組み合わせる方が好まれています。

必要な数のdivブロックを作成し、それぞれにcssでclass設定していけばレイアウトはcssを書き換えるだけでいかようにでも修正できますので、一件面倒なようですが結局はこちらのが早道ですし、見映えの良いホームページが作れます。

スタイルシートの基本については以下などを参考にしてください。

http://www.kanzaki.com/docs/html/htminfo17.html


4 ● notapachi
●20ポイント

●まず、DreamweaverやGoLiveなどのHTMLエディタを使っているのかどうかで答えが変わってきますが、使っているものとして考えてみます。

【テーブルを手際よく作成するコツ】

1.ワープロやExcelなどで下ごしらえしてしまう

2.ExcelやWordなどで作成したものをhtmlで書き出す

3.多い目のテーブルを作っておく

4.テーブル内テーブルを利用する

5.テーブルはテーブルだけで、まとめて別ファイルに作ってしまう

1.ワープロやExcelなどで下ごしらえしてしまう

・あらかじめ、どの項目とどの項目が、「行頭(や行末)」が揃うのか把握してから作成すると、入力間違いなどが減ります。

把握できていると作成が簡単になります。また、テーブルに入力した文字の移動は面倒くさいですし。

2.ExcelやWordなどで作成したものをhtmlで書き出す

・ここ5年以内のバージョンだったら、html書き出しが使えます。

・Dreamweaverなら、不要タグを削除する機能もあります([コマンド]メニューにあります)。

3.多い目のテーブルを作っておく

・テーブルはあとから削除できます。「10行×20列」だったら「15行×25列」くらいで作っておき、完成してから不要なテーブルを一括で削除すると楽になります。

4.テーブル内テーブルを利用する

・テーブル内のデータはExcelほど楽には移動させられません。

あとから修正しやすいように、小項目(たいてい、横一列)で独立させ、中項目のテーブル内に入れておくと、小項目単位で移動させやすくなります。

・大項目としてテーブルを分けておくと、有利な点もあります。テーブルは「テーブル内のデータすべての読み込みが終わってから」表示されるので、本来テーブルはあまり大きくない方が有利とされています。

5.テーブルはテーブルだけで、まとめて別ファイルに作ってしまう

・同じ見栄えのテーブルを作成するときは、あらかじめ別ファイルにまとめて作っておき、完成してから各ページにペーストするようにすると、各テーブルで仕様が違う、なんてことを防ぎやすくなります。

また、修正し忘れを防ぎやすくなるとともに、他のテーブルをコピーすることで流用しやすくなります。

http://q.hatena.ne.jp/answer(URLはダミーです)

◎質問者からの返答

ありがとうございます!

わかりやすかったです!


5 ● dreamworks
●20ポイント

http://www.w-frontier.com/software/ezhtml.html

http://hp.vector.co.jp/authors/VA014491/

webサイト作成支援ツールを使用してみてはいかがでしょうか。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ