テーブルの表示がずれます

解決済

質問者：kiyohu16
質問日時：2003/09/17 15:03
回答数：3件

htmlを書いているのですが、テーブルの行を増やすたびに、ブラウザで表示するとテーブルの表示がだんだん下の方へずれてしまいます。友人に聞いたところ、彼も同じような現象が起こるようです。
このようにならないようにしたいのですが、専門書を読んでも分かりません。
ちなみにhtmlソースはこのようになっております。
(1)行が1つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト1</h3>
<table>
　　<tr>
　　　<td>テスト</td>
　　 <td>1</td>
　　 <td>2</td>
　　</tr>
</table>
</body>
</html>

(2)行が2つの場合
<html>
<head>
<title>テスト</title>
</head>
<body bgcolor = "white">

<h1>テスト</h1>
<h3>テスト2</h3>
<table>
　　<tr>
　　　<td>テスト</td>
　　 <td>1</td>
　　 <td>2</td>
　　</tr>
<tr>
　　　<td>テスト</td>
　　 <td>1</td>
　　 <td>2</td>
　　</tr>
</table>
</body>
</html>
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： chikorin7
回答日時：2003/09/17 15:14

こんにちは。

イマイチどうしたいのかがよく判らないので、具体的な説明を補足してください。
ソース自体は間違いではないと思いますが…。
<tr>や<td>の前にある空白はもちろん半角空白ですよね？全角だと不具合がでます。

行が増えると下に表が大きくなるのは必然ですし。
行が１行のものと、２行のものとでは、ページが違うんですよね？
もし、同じページに表示するのであれば、１ページにつき、<html>タグは一組です。（あくまでも基本的に、ですが）
これが、直接行がずれるっていうことにはならないと思いますけど…。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます、試してみたらどうも全角が入ってしまっていたようです。ちなみに、２つのhtmlは別々のファイルです。

通報する

お礼日時：2003/09/17 15:26

No.3

回答者： sumou111
回答日時：2003/09/17 15:20

空白に全角が混じっていると、だんだん段が下がってくることがあります。

空白をすべて半角にしてもう一度試してみてください。

- 1
- 件

通報する

この回答へのお礼

ありがとうございます。ご指摘のように、全角が混じっていたようです。半角でやってみたら直りました。

通報する

お礼日時：2003/09/17 15:30

No.2

回答者： neue_reich
回答日時：2003/09/17 15:16

trやtdタグの字下げにスペースを使っていませんか？

タブを使わないと文字扱いされてしまい、
tdタグ内に入っていない文字がある、と認識されます。
すると、それらは全てテーブルの真上に配置されますので
（ブラウザに表示してから文字を全てマウスで選択してください。
テーブルの上に怪しい形で選択されるものがあるはずです）
このような現象が起こります。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。どうも全角のスペースを使っていたのが原因のようでした。

通報する

お礼日時：2003/09/17 15:29

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

質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

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

Qテーブルのヘッダとボディの幅がズレルのを防ぐ

ヘッダとボディの幅を可変にし、かつズレないようにするにはどうすればよいのでしょうか？

Aベストアンサー

＞ヘッダを固定してボディのみスクロールするため、CSSでthead の tr と、tbody に float:left; を指定しているからです。

　floatの用途を間違えています。
　floatは本来、テキスト中に挿絵などがあるとき、その要素をフローとさせて、その周囲にテキストを回りこませるためのものです。floatでブロックを並べるテクニックは、確かによく見かける手法ですが、そのために文書構造を変えなければならない----floatさせる要素は回り込む要素の前に書かなければならない---という重大な問題があります。これはHTMLやスタイルシートの目的とかけ離れています。使うならabsoluteでしょう。

　しかし、floatやabsolute、fixedは、他の要素から完全に切り離されますから、列のセル幅を引き継げません。tableの描画ルーチンに従わなくなります。

　もう一点、tableの扱いはブラウザごとに大きな差があります。また根本的な問題として、tableには他のブロック要素に使えるプロパティが使えません。height/overflowなど・・

　そのような表を作成される場合は、table,thead,tfoot,tr,tdの各要素をblock要素に置き換えて、幅をセルごとにきちんと指定して配置するのが無難です。

＿<table class="scroll" summary="scrollTbody">
＿＿<thead>
＿＿＿<tr>
＿＿＿＿<th>あ行</th><th>か行</th><th>さ行</th><th>た行</th>
＿＿＿</tr>
＿＿</thead>
＿＿<tbody>
＿＿＿<tr>
＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>あ</td><td>か</td><td>さ</td><td>た</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>い</td><td>き</td><td>し</td><td>ち</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>う</td><td>く</td><td>す</td><td>つ</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>え</td><td>け</td><td>せ</td><td>て</td>
＿＿＿</tr>
＿＿＿<tr>
＿＿＿＿<td>お</td><td>こ</td><td>そ</td><td>と</td>
＿＿＿</tr>
＿＿</tbody>
＿</table>
に対して
table.scroll,table.scroll *{display:block;margin: 0;padding:0;line-height:30px;}
table.scroll{width:428px;margin-top:50px;border-bottom:1px solid gray;}
table.scroll thead,table.scroll tbody{width:100%;border:none;}
table.scroll tbody{height:94px;overflow:auto;width:428px;}
table.scroll thead th,table.scroll tbody td{float:left;width:100px;border:solid gray 1px;}
/* 本来はfloatではなくdisplay:inline-blockとすべきだが後方互換のためやむなくfloat */
table.scroll tbody,table.scroll tbody tr{clear:left;}

他の回答も見る

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family： "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳＰゴシック","MS PGothic"；
font-size： 14px；
line-height： 1；
margin： 0；
padding： 0；

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

他の回答も見る

QHTMLフォームのSELECTの幅を一定にするためには？

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか？

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

他の回答も見る

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか？
<TD>タグや<TR>タグのところでいじくるのですか？

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
＃2の方法ですね。

テーブルごとやセル（<TD>）ごとにサイズを変更するには
スタイルシート（CSS）を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル（<TD>）ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

＃1の方法だとページ内の全てのセル（<TD>）に設定することになります。

スタイルシート（CSS）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

Qテーブルセル余白（例えば左側だけ、上側だけ、など）

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。右が 10px。下が 20px。左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">

</style>

他の回答も見る

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか？
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、３つ以上なら
別途function化したほうが、可読性が高くなると
思います。

他の回答も見る

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ（改行タグ<br>の半分以）間隔を空けたいのですが、どうすれば良いのでしょうか？

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

他の回答も見る

QＩＥとクロームの表示ずれ

普段ＩＥを使ってＨＰを表示しているのですが、クロームで
表示してみたところ、添付資料のように表示されました。
（レイアウトに関する部分はＣＳＳで定義しています）

他のページもほとんど同じようなズレ方なのですが、
なにか簡単に修正ができるのでしょうか？

Aベストアンサー

IEのバージョンがわかりませんが、たぶんウェブ標準のすべてのブラウザでそうなります。
基本的な対策は、ウェブ標準に直し、IEが互換モードではなく標準モードで起動するようHTMLを修正する必要があります。
　DOCTYPEスイッチで、標準モードで起動するように直すこと
・doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )

　もちろん、HTMLもDOCTYPEに合わせて修...続きを読む

他の回答も見る

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか？
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

２列のテーブルを作ったらいかがでしょうか？
<table>
<tr>
<td>１つめのテーブルに入れる内容</td>
<td>２つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば２つ並びます。
<table>
<tr>
<td><table>←１つめのテーブル→</table></td>
<td><table>←２つめのテーブル→</table></td>
</tr>
</table>

他の回答も見る

Qテーブルタグの中にdivを含めてはダメ？

テーブルタグの中にdiv要素を入れるとダメなのでしょうか？
何か不都合でもあるのでしょうか？
何かご存知の方がいれば教えていただけませんか？

Aベストアンサー

以下、HTML 4.01での話です。（XHTMLでもほぼ同じだと思います）

tableタグ直下に書けるのは、caption，col，colgroup，head，tfoot，tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth，tdが書けることになっています（それ以外は不可）。

th，tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth，tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

他の回答も見る

ページトップ