- ベストアンサー
テーブルだらけのページをスッキリさせたい
いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 HTMLのことでわからない事があるので教えてください。 現在、大きなテーブルの中にさらに小さなテーブルをいれています。 そのためタグがとてもごちゃごちゃしています。 小さなテーブルはサイト更新の度に追加していく予定なので、 見た目よりデータが重いページになってしまうと思います。 これをなんとかスッキリさせたいのですが 良い方法はあるでしょうか？ スタイルシートを使えばいいのでしょうか？ どのように使用すれば無駄の無い形になるか 具体的なアドバイスをいただけると助かります。 参考までに作りかけのタグを載せました。 悪い部分等があったら、ぜひお願いします。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サイト名「タイトル未定」</TITLE> </HEAD> <BODY> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0" width="840"> <TBODY> <TR> <TD colspan="2" align="center" height="40">サイト名 タイトル</TD> </TR> <TR> <TD colspan="2" align="center">サイトの説明と注意事項</TD> </TR> <TR> <TD colspan="2" height="15"> <HR> </TD> </TR> <TR> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#009900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">チューリップ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月1日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#999900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">さくら</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月2日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> </TR> <TR> <TD align="center"></TD> <TD align="center"></TD> </TR> <TR> <TD colspan="2"> <HR> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML>
- ホームページ作成ソフト
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サイト名「タイトル未定」</TITLE> <style> table{display:inline;margin:10px;font-size:x-small;} </style> </HEAD> <BODY> <h1>サイト名 タイトル</h1> <p>サイトの説明と注意事項</p> <HR> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#009900">花の写真</TD> <TD width="80">花の名前</TD> <TD width="150">チューリップ</TD> </TR> <TR> <TD width="80">分類</TD> <TD width="150">あああああ</TD> </TR> <TR> <TD width="80">撮影日</TD> <TD width="150">2008年4月1日</TD> </TR> <TR> <TD colspan="3" height="80">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</TD> </TR> </TBODY> </TABLE> <HR> </BODY> </HTML> No.1の提案をソースにしてみました。 本当の意味の表は表のまま、レイアウト的な表は取り除く。 h1はページの見出しのタグで、ｐは文章のタグです。表と同じようにデザインをつけることができます。真中とか絵をつけるとか大きさ等など。 <style>ではさまれた部分が各部分のデザイン指定。 デザイン指定はstyleでするので、本文中にfont-sizeなどを入れる必要はなく、すっきりします。<table>～</table>までを好きなだけ増やしてください。<table>～</table><table>～</table><table>～</table>こんな感じです。ブラウザの横幅で2段になるなら2段に5段入るなら5段にとなります。
その他の回答 (3)
- crepon133
- ベストアンサー率51% (399/776)
全体を大きなテーブルの中に入れずに 1.サイト名と説明の1列2行のテーブル 2.罫線 3.写真部分のテーブル 4.罫線 5.写真部分のテーブル 6.罫線 このように組むと写真ブロックが増えたときに多少表示が早くなります フォントサイズはできればCSSで指定したほうが良いかと思います
お礼
回答ありがとうございます。 お礼が遅くなってすみません。 みなさんのおかげで、ほぼイメージ通りのものができました。
- Nine-nine
- ベストアンサー率49% (25/51)
ｃｓｓをいろいろ試すでなく、お教えした方法を上から試した結果を教えていただけるとありがたいです。具体的に書いたので、そのとおりすれば希望の形態になり表をいくら増やしてもいい筈なので。理由はわからなだろうけどできる方法をお教えしました。もし、うまくいかないなら、行かないと言っていただき、その時のソースをアップしていただけると添削も可能でしたが……。 大きなお世話ですが、いろいろ試してはだめです。試行錯誤よりまず基礎を学び、発想の切り替えをしないと、ｃｓｓは泥沼で、遠回りになります。ビジュアルだけを考えて実現していくと、構造を考えて後からビジュアルをつけるより何十倍もややこしくなるので。 がんばってください。
- Nine-nine
- ベストアンサー率49% (25/51)
<style> table{display:inline;margin:10px;} </style> 上をhead内に入れてみてください。 そして、本当の表はそのままで、その表を並べるための表のタグは取ってしまってください。表の中の表は止めて、純粋な表のみ表としてを表示させてみて下さい。贅沢をいうと、見出しは見出しとしてタグ付けするのが、ｃｓｓです。そういうレイアウトにしたいために表を使うことはｃｓｓの理念から外れます。 上の内容はテーブルを文字のように扱う指示と、表の周りを10ｐｘあける指示です。テーブルは初期値では箱として扱われます。それを文字扱いにすることにより、文字のように並べることができます。他の方法もありますが、この方法はｃｓｓの基本の考え方である、ブロック要素とインライン要素を理解するだけで理解できます。 上の;}の間にfont-size:x-small;などと入れると、tdごとに入れているfont-sizeは不要になりますと、ｃｓｓはとても便利なのですが、物理レイアウトと考え方が違うため、コピペだけで対応していくと、すぐにソースが複雑になり矛盾してきます。 テーブルレイアウトを勉強しその考え方になじむ前に、ｃｓｓも勉強し、デザインと内容を切り離す理念を学ばれることをお勧めします。
お礼
回答ありがとうございます。 ＣＳＳをいろいろ試してみます。 またわからないところがあったら 是非教えてください。 ありがとうございました。
お礼
ありがとうございます。 お礼が遅くなりまして本当にすみませんでした。 回答１で無事解決できました。 <style>の部分はこんな感じになりました <style> table{display:inline;margin:12px;font-size:x-small;} H1{font-size:16pt;} H2{font-size:14pt;} </style> そのほかMETAの追加 <META name="description" content=""> <META name="keywords" content=""> あと、小さな写真をクリックすると 大きな写真が出るようにしました。 全ての画像にaltをつけました。