ホームページ作成初心者です。

Yahoo!のフリースペースGeoCitesで、アドバンストHTMLエディタで直接タグを打って作成していますが、表の行を追加すると、追加した行の幅だけ上部に余白ができてしまい、画面の下半分に表が表示されます。

余白はタイトルと表の間にできますが、タイトルを削除したり表の下に移動させても上面の余白は変わりません。不要な余白をなくす方法を教えて下さい。

ソースは以下の通りで、△△△の項目の<tr></tr>は20位あります。

<html>
<head>
<title>◯◯◯</title>
</head>

<!--color-->
<body bgcolor="#ddfff" text="#000000" link="#0000ff" vlink="#ff0000">
<center>

<!--HEAD1-->
<h1>タイトル</h1>

<table border="1" cellpadding="3" width="700" cellspacing=1 bordercolor="#dddddd">
<tr bgcolor="#ccfff">
  <th>◯◯◯</th>
  <th>◯◯◯</th>
  <th>◯◯◯</th>
  <th>◯◯◯</th>
  </tr>
 <tr>
  <td align="center">△△△</td>
  <td align="center">△△△</td>
  <td align="center">△△△</td>
  <td align="center">△△△</td>
 </tr>
</table>

</body>
</html>

このQ&Aに関連する最新のQ&A

A 回答 (2件)

これだとどうですか?


センターあっても、かまいませんし、
そうそうあなたのタグ、センターをとじてませんでしたね

<html>
<head>
<title>◯◯◯</title>
</head>

<!--color-->
<body bgcolor="#ddfff" text="#000000" link="#0000ff" vlink="#ff0000">
<center>

<!--HEAD1-->
<font size="7">タイトル</font>           
<table border="1" cellpadding="3" width="700" cellspacing=1 bordercolor="#dddddd">
<tr bgcolor="#ccfff">
<th>◯◯◯</th>
<th>◯◯◯</th>
<th>◯◯◯</th>
<th>◯◯◯</th>
</tr>
<tr>
<td align="center">△△△</td>
<td align="center">△△△</td>
<td align="center">△△△</td>
<td align="center">△△△</td>
</tr>
</table>
</center>
</body>
</html>
    • good
    • 0
この回答へのお礼

センターの閉じ忘れとタイトルは、余白の出現に関係ないようです。

問題は、△△△の項目の<tr></tr>の部分を増やすと現れます。
1~2行なら見やすくするための改行程度の余白ですが、20も作ると、
ずいぶんと下に表示されてしまいます。

結局「行を増やさなければよい」と考え、
項目を1行目に、内容をリストのようにして2行目のセルに詰め込むことで
余白を減らすことで解決しました。

ご回答、ありがとうございました。

お礼日時:2002/03/13 17:28

<!--color-->


<body bgcolor="#ddfff" text="#000000" link="#0000ff" vlink="#ff0000">
<center>

ここのセンターのタグですね<center>に対して</center>が見つかりませんね

これを消してしまえば、問題なく見れましたよ!
    • good
    • 0
この回答へのお礼

ありがとうございます。
</center>・・忘れてました。
でも、これが原因ではないようです。

お礼日時:2002/03/13 17:13

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qからに書き換えるか迷っています

普段はドリームウィーバー2004mxを使っております。
ブラウザはInternet Explorerの新しいほうだと思います。

私はWEB制作には素人で、ソフトに頼り四苦八苦していますので
HTMLもちょっとずつ覚えているという段階の、入り口の初心者であります。
そこで、教えてください。

先日驚いたのですが
行揃えの指定のタグがありますよね。
今までの制作部分では
<td align="XXXX">を使用してきましたが、
<td style="text-align: XXXX;">
のほうが、長い目でみて、良いということでした。
理由は<td align="XXXX">のままだと
  ・Operaブラウザで不具合
  ・またはXHTML1.1で廃止(?)
といったことがあるようです。
私は自分のInternet Explorerで観ていたので何も知りませんでした。
やはり将来的に、<td align="XXXX">は色んな不具合を起こしていく恐れがあるかも知れません。

以下は私が立てさせていただいた質問で、
経験者のおっしゃることですので信憑性はたいへん高いと思っています。
http://oshiete1.goo.ne.jp/qa5051214.html

で、本題はここからですが、長い目でみた場合に、
<td align="XXXX">を
<td style="text-align: XXXX;">の状態に書き換えるべきでしょうか。

すでに<td align="XXXX">で作ってある部分が結構あります。
ただWEBサイトは長く使いたいので、今のうちに手を打てるなら打っておこうと思います。
この書き換え案に迷っていますので、お詳しい方、アドバイスをください。
または今WEB制作中の専門家の方は、
<td align>と
<td style="text-align: XXXX;">
はどちらを使っていらっしゃることが多いのでしょうか。

もしかしたら<td valign="XXXX">も同様のことが言えるのかも知れません。
宜しくお願いいたします。

普段はドリームウィーバー2004mxを使っております。
ブラウザはInternet Explorerの新しいほうだと思います。

私はWEB制作には素人で、ソフトに頼り四苦八苦していますので
HTMLもちょっとずつ覚えているという段階の、入り口の初心者であります。
そこで、教えてください。

先日驚いたのですが
行揃えの指定のタグがありますよね。
今までの制作部分では
<td align="XXXX">を使用してきましたが、
<td style="text-align: XXXX;">
のほうが、長い目でみて、良いということでした。
理由は<td alig...続きを読む

Aベストアンサー

一応、XHTML1.1で廃止されていないという根拠です。

W3Cは、日本(日本語)の文科省みたいなところです。
http://www.w3.org/

XHTML1.1のtableのページ(英語ですがタグ名とタグ属性だけなのでわかると思います)
http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_simpletablemodule


> #このあたりは、制作者の考え方次第ですね。
同意します。

読みやすいかどうかは慣例を重視(基準に)しています。
たとえば予算や売り上げ表などの「(単位千円)」みたいな記述は右寄せしています。

align指定は、もし翻訳サイトを通じてアラビア語など右から左に書く言語で表示した場合、
左寄せ、右寄せが逆転し、非常の読みづらくなります。
(この現象はfloatも同様です)

W3C(など)はそういうのも考慮し、alignなしを推奨しているようですが、(W3Cはアメリカだったと思いますが、おそらく日本語の右寄せのような習慣がないと思いますので)
現実には、私はalignを使っての影響はほとんどないと思います。

Operaの古いバージョンで、この状態をシミュレーションできた気がしますが、
もし「不具合」がその事であれば、私は無視できる範囲だと思います。

一応、XHTML1.1で廃止されていないという根拠です。

W3Cは、日本(日本語)の文科省みたいなところです。
http://www.w3.org/

XHTML1.1のtableのページ(英語ですがタグ名とタグ属性だけなのでわかると思います)
http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_simpletablemodule


> #このあたりは、制作者の考え方次第ですね。
同意します。

読みやすいかどうかは慣例を重視(基準に)しています。
たとえば予算や売り上げ表などの「(単位千円)」みたいな記述は右寄せ...続きを読む

Q と、

<td></td> と、<td><BR></td>

ホームページビルダーで作ったホムペを、KompoZerというHTMLエディタで開くと、
テーブルのなにも入っていないセルに<BR>タグが勝手に挿入されてしまいます。
<td></td> と、<td><br></td> は、
ブラウザ上ではどちらでもちゃんと表示されるのですが、
HTML文法的にはどちらが正しいのでしょうか?
また、どちらも正しい場合、<br>がある・ないで、違いがあるのでしょうか?

※ホームページビルダー、KompoZerの善し悪しは無視してください。

Aベストアンサー

文法的にはどちらも正しいです。
ブラウザの種類やHTMLのモードによって、tdが空だと、見え方が違うケースがあります。
tableでborderを指定したときに、へこんで見えるかどうか。空でないとかならずへこんで見えます。

Qでテキストボックスとセルの間にわずかな隙間があいてしまう・・

<TABLE>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
</TALBLE>

こう書くときに、テキストボックスの下にわずかな隙間が
できるのを防ぎたいのですが、何か方法はありませんでしょうか?

Aベストアンサー

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>
</TABLE>
としていませんか?
HTMLとしては好ましくないと思いますが、<FORM>や</FORM>の前後にある<TR><TD>~</TD></TR>を取り除き、以下の様にします。
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<FORM ~>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD><INPUT TYPE="TEXT"></TD>
</TR>
<!-- ここまで -->
</FORM>
</TABLE>

尚、表の罫線を残すのであればBORDERを変更したりしてください。

隙間をつくってしまう原因はいくつかあります。

(1) <TABLE>タグ
BORDER=0またはNOBORDERにする。
CELLSPACING=0
CELLPADDING=0

(2) <INPUT TYPE="TEXT">前後の改行
<TD><INPUT TYPE="TEXT"></TD>

(3)<FORM>や</FORM>タグの記述場所
恐らくこれが原因でしょう。
上記には記述されていませんが、
<TABLE>
<TR>
<TD>
<FORM ~>
</TD>
</TR>
<!-- ここから10回ほど繰り返し -->
<TR>
<TD>
<INPUT TYPE="TEXT">
</TD>
</TR>
<!-- ここまで -->
<TR>
<TD>
</FORM>
</TD>
</TR>...続きを読む

Q

どちらを使うべき?

文字列を中央に寄せたい場合は、
<p align="center"> <center> どちらを使うべきでしょうか?
最近では、<p align="center">の方が多い気がするのですが、
何か良いことでもあるのでしょうか?

Aベストアンサー

どちらも使うべきではありません。見た目・レイアウトは、HTML ではなく、CSS などのスタイルシート言語で指定します。

なお、<center> は <div align="center"> の省略形です。つまり、<center> は単なる div 要素と同じように扱われるのに対し、<p align="center"> は一つの段落要素として扱われるということです。

Q
と同じ意味のタグ

ヤフオクの出品でタグを勉強しています。(Chrome使用)

普段は<center></center>で中央に寄せているのですが、
調べていたら【<caption></caption>】【<div style="margin:auto;text-align:center"></div>】というのを見つけました。

これらは<center>と同じく、中央に寄せるタグで良いのですか?

ちなみに<center>を使うと、プラウザによっては正しく表示されないことがあるみたいですが、
現在はどれを使った方が良いのでしょうか?

よろしくお願いします。

Aベストアンサー

><div align="center"></div>の略ではないとのことで
>No.2の方と意見が分かれ…
>結局どちらが正しいの??って感じです。
<center></center>が><div align="center"></div>の略な訳もなく、無視されていいでしょう。
くどいようですが、<caption></caption>は<table></table>を使ったテーブル(表)にタイトルをつけるためのタグであり、特に何も指定しない限りテーブルの上部の中央に表示されるように決められているものです。
つまり元のテーブルが中央に寄せられていなければ左に寄ったテーブルの中央に表示されます。
<table></table>全体を<center></center>で中央に寄せていれば<caption></caption>で表示したタイトルもテーブルの中央にくるので結果としてページ全体の中央に寄せられるということだけです。
そもそも<caption></caption>をテーブル(表)のタイトル以外の目的で使うのは正しくないです。
Yahooオークションではスタイルシートが使えないというのは知りませんでしたが、一般的なHTML文書作成上では、<div style="margin:auto;text-align:center"></div>がいいでしょう。

><div align="center"></div>の略ではないとのことで
>No.2の方と意見が分かれ…
>結局どちらが正しいの??って感じです。
<center></center>が><div align="center"></div>の略な訳もなく、無視されていいでしょう。
くどいようですが、<caption></caption>は<table></table>を使ったテーブル(表)にタイトルをつけるためのタグであり、特に何も指定しない限りテーブルの上部の中央に表示されるように決められているものです。
つまり元のテーブルが中央に寄せられていなければ左に寄ったテーブルの中央に表示され...続きを読む


このカテゴリの人気Q&Aランキング

おすすめ情報