こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

テーブルだらけのページをスッキリさせたい

いま、ホームページビルダーで趣味のサイトを作っているところなのですが、
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>

投稿日時 - 2008-04-26 16:11:47

QNo.3977514

困ってます

質問者が選んだベストアンサー

<!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はページの見出しのタグで、pは文章のタグです。表と同じようにデザインをつけることができます。真中とか絵をつけるとか大きさ等など。
<style>ではさまれた部分が各部分のデザイン指定。
デザイン指定はstyleでするので、本文中にfont-sizeなどを入れる必要はなく、すっきりします。<table>~</table>までを好きなだけ増やしてください。<table>~</table><table>~</table><table>~</table>こんな感じです。ブラウザの横幅で2段になるなら2段に5段入るなら5段にとなります。

投稿日時 - 2008-05-09 12:20:40

お礼

ありがとうございます。
お礼が遅くなりまして本当にすみませんでした。
回答1で無事解決できました。

<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をつけました。

投稿日時 - 2008-05-09 16:21:08

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.3

全体を大きなテーブルの中に入れずに
1.サイト名と説明の1列2行のテーブル
2.罫線
3.写真部分のテーブル
4.罫線
5.写真部分のテーブル
6.罫線
このように組むと写真ブロックが増えたときに多少表示が早くなります
フォントサイズはできればCSSで指定したほうが良いかと思います

投稿日時 - 2008-04-29 21:05:47

お礼

回答ありがとうございます。
お礼が遅くなってすみません。
みなさんのおかげで、ほぼイメージ通りのものができました。

投稿日時 - 2008-05-09 15:39:51

ANo.2

cssをいろいろ試すでなく、お教えした方法を上から試した結果を教えていただけるとありがたいです。具体的に書いたので、そのとおりすれば希望の形態になり表をいくら増やしてもいい筈なので。理由はわからなだろうけどできる方法をお教えしました。もし、うまくいかないなら、行かないと言っていただき、その時のソースをアップしていただけると添削も可能でしたが……。

大きなお世話ですが、いろいろ試してはだめです。試行錯誤よりまず基礎を学び、発想の切り替えをしないと、cssは泥沼で、遠回りになります。ビジュアルだけを考えて実現していくと、構造を考えて後からビジュアルをつけるより何十倍もややこしくなるので。

がんばってください。

投稿日時 - 2008-04-28 08:04:10

ANo.1

<style>
table{display:inline;margin:10px;}
</style>
上をhead内に入れてみてください。
そして、本当の表はそのままで、その表を並べるための表のタグは取ってしまってください。表の中の表は止めて、純粋な表のみ表としてを表示させてみて下さい。贅沢をいうと、見出しは見出しとしてタグ付けするのが、cssです。そういうレイアウトにしたいために表を使うことはcssの理念から外れます。

上の内容はテーブルを文字のように扱う指示と、表の周りを10pxあける指示です。テーブルは初期値では箱として扱われます。それを文字扱いにすることにより、文字のように並べることができます。他の方法もありますが、この方法はcssの基本の考え方である、ブロック要素とインライン要素を理解するだけで理解できます。

上の;}の間にfont-size:x-small;などと入れると、tdごとに入れているfont-sizeは不要になりますと、cssはとても便利なのですが、物理レイアウトと考え方が違うため、コピペだけで対応していくと、すぐにソースが複雑になり矛盾してきます。

テーブルレイアウトを勉強しその考え方になじむ前に、cssも勉強し、デザインと内容を切り離す理念を学ばれることをお勧めします。

投稿日時 - 2008-04-26 21:40:18

お礼

回答ありがとうございます。
CSSをいろいろ試してみます。
またわからないところがあったら
是非教えてください。
ありがとうございました。

投稿日時 - 2008-04-27 12:45:17

あなたにオススメの質問