HPを作る際にテーブルを使うと思うのですが、

私はテーブル作成がとても苦手です。

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/11/02 13:18:43
  • 終了:2006/11/09 13:20:03

回答(5件)

id:naleringar No.1

naleringar回答回数110ベストアンサー獲得回数52006/11/03 01:31:30

ポイント20pt

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

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

id:rrr3

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

2006/11/08 18:48:30
id:thunder9119 No.2

thunder9119回答回数24ベストアンサー獲得回数02006/11/02 19:32:39

ポイント20pt

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

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

id:rrr3

ありがとうございます!

2006/11/08 18:49:20
id:youyoun No.3

youyoun回答回数3ベストアンサー獲得回数12006/11/02 14:15:49

ポイント20pt

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

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

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

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

id:notapachi No.4

notapachi回答回数213ベストアンサー獲得回数182006/11/02 17:36:46

ポイント20pt

●まず、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はダミーです)

id:rrr3

ありがとうございます!

わかりやすかったです!

2006/11/08 18:52:48
id:dreamworks No.5

dreamworks回答回数249ベストアンサー獲得回数62006/11/02 21:49:00

ポイント20pt

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

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

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません