- ベストアンサー
テーブルだらけのページをスッキリさせたい
いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 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）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (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をつけました。