掲示板/総合質問板/過去ログ/一覧/ TABLEの表示位置について

0 名前：へけ： 2005/08/05 13:32: いつもお世話になります。
TABLEタグ内(画面表示領域は全範囲）に、またTABLEタグを使用して表を作成しています。
その中でTDタグについてCOLSPAN="30"として定義して表を作成しました。しかし、ブラウザ上で
確認すると、その表が画面中央に配置されてしまいます。
TABLEタグ内のWIDTHプロパティ等を触っても何も変化がありません。
また、CSSでPOSITIONプロパティで強制的に表示位置を指定すれば、位置は修正できました。
しかし、画面上部に表示しているボタンが押せなくなりました。
ちなみにCOLSPANを5くらいにすると通常通り画面上部に表が表示されました。
何が原因かさっぱり判りませんので、ご指導のほどよろしくお願いします。

1 名前：モノ： 2005/08/05 13:32: そのページのソースをすべて提示するか、
転送してあるならばURLを提示すれば、
原因を特定できるかもしれません。

2 名前：へけ： 2005/08/05 13:32: 以下ソースです。文字数制限で表見出しの「発注GP4～30」は削除しています。
TDタグのCOLSPANは30のままです。

<BODY LEFTMARGIN=0 RIGHTMARGIN=0 TOPMARGIN=0 BOTTOMMARGIN=0 BACKGROUND="../img/back.gif" BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF ALINK=#000080 VLINK=#000080>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=100%>
<TR>
<TD BGCOLOR=#003333 HEIGHT=38>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=740>
<TR>
　　　<TD WIDTH=150><input type="button" name="button" value="特別日設定ﾒﾆｭｰへ" onclick="top.window.location = '../00.メニュー/特別日メニュー.html';" class="CmnHead100"></TD>
<TD ALIGN=CENTER class="Header0"><FONT COLOR=#FFFFFF><B>発注グループ登録</B></FONT></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM WIDTH=150 class="Header1"><FONT COLOR=#FFFFFF>作成日：<SPAN>2005/08/02</SPAN></FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD class="Header1"> </TD>
</TR>
<TR>
<TD ALIGN=LEFT>
<TABLE BORDER=0>
<TR>
<TD ALIGN=CENTER>

<TABLE BORDER=1 class="List1">

<TR HEIGHT=26>
<TD class="ItemName" width="70" rowspan="3" nowrap>店舗コード</TD>
<TD class="ItemName" width="130" rowspan="3" nowrap>店舗名</TD>
<TD class="ItemNameL" colspan="30" nowrap>  発注グループ</TD>
</TR>
<TR HEIGHT=26>
<TD class="ItemName" nowrap>発注GP1</TD>
<TD class="ItemName" nowrap>発注GP2</TD>
<TD class="ItemName" nowrap>発注GP3</TD>
</TR>
<TR HEIGHT=26>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name1" maxlength="20" size="10" tabindex="1" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name2" maxlength="20" size="10" tabindex="2" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name3" maxlength="20" size="10" tabindex="3" value=""></TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>

3 名前：モノ： 2005/08/05 13:32: 外部スタイルシートなどは使っていないのでしょうか？

また、中央に表示されるのは、具体的にどの部分か教えてもらえますか？

4 名前：へけ： 2005/08/05 13:32: 外部スタイルシートは使用していますが、表のPOSITION指定はしておりません。
私のほうでスタイルシート無しでHTMLを開くと今回の現象となっております。
また、中央表示されるのは「表見出し」部分が画面中央に位置します。
普通なら<TD class="Header1"> </TD>の下行に表が位置すべきだと思います。
要は<TD class="Header1"> </TD>から表までに行幅がかなり大きいのです。

5 名前：モノ： 2005/08/05 13:32: スタイルシートをきった状態で中央寄せになるということですか。
私の環境では再現できませんでした。
http://www.geocities.jp/x_mono_mono_x/index.html
(確認した際のスクリーンショットです)

現象を確認した環境も書き加えておくとよいかもしれません。

6 名前：へけ： 2005/08/05 13:32: いろいろお手数をお掛けして申し訳ございません。
私の環境では表見出しの「発注グループ」の次行の「発注GP1」～「発注GP3」までの表は問題無く
再現できます。
しかし、「発注GP1」～「発注GP30」まで列を増やすと上手く表示されません。
提示したソースでは、
<TD class="ItemNameL" colspan="30" nowrap>  発注グループ</TD>
というようにcolspan="30"と指定していますが、この掲示板も文字数制限の関係上、
見出し2～3行目は以下の様に３列までで割愛させて頂きました。
<TR HEIGHT=26>
<TD class="ItemName" nowrap>発注GP1</TD>
<TD class="ItemName" nowrap>発注GP2</TD>
<TD class="ItemName" nowrap>発注GP3</TD>
</TR>
<TR HEIGHT=26>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name1" maxlength="20" size="10" tabindex="1" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name2" maxlength="20" size="10" tabindex="2" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name3" maxlength="20" size="10" tabindex="3" value=""></TD>

お手数ですが、上記各々のTDタグを1～30まで増やして再度確認して頂けますでしょうか？

7 名前：モノ： 2005/08/05 13:32: 投稿時の文字数の制限ならば数回に分けて投稿すればいいのでは？
こういうときは、元のソースを"抜粋でなくそのまま"検証しないと
何が原因か特定が難しいです。
問題が再現できる環境は？XP(Home/Pro)でIEですか？そのバージョンは？
また、画面解像度は？

で、項目数を増やしてみました。
私の画面解像度(1024*768)では、画面いっぱいに左右の余白無しで表示されました。
中央寄せ、というからには、表の左右に均等に余白ができることが確認されているのですか？
一応Operaで縮小表示してみましたが、左によって表示されています。
http://www.geocities.jp/x_mono_mono_x/index.html

スクリーンショット、環境(先に記述したもの)など提示すれば
詳しい方から回答がいただけるかもしれません。

8 名前：へけ： 2005/08/05 13:32: いろいろ不手際があり申し訳ないです。。
環境はXP(HOME)で、IE6.0です。画面解像度は1024*768です。

全ソースを分割掲載します。お手数ですがよろしくお願いします。

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS;">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<TITLE>発注グループ登録</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="../css/style.css">
</HEAD>
<BODY LEFTMARGIN=0 RIGHTMARGIN=0 TOPMARGIN=0 BOTTOMMARGIN=0 BACKGROUND="../img/back.gif" BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF ALINK=#000080 VLINK=#000080>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=100%>
<TR>
<TD BGCOLOR=#003333 HEIGHT=38>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=740>
<TR>
　　　<TD WIDTH=150><input type="button" name="button" value="特別日設定ﾒﾆｭｰへ" onclick="top.window.location = '../00.メニュー/特別日メニュー.html';" class="CmnHead100"></TD>
<TD ALIGN=CENTER class="Header0"><FONT COLOR=#FFFFFF><B>発注グループ登録</B></FONT></TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM WIDTH=150 class="Header1"><FONT COLOR=#FFFFFF>作成日：<SPAN>2005/08/02</SPAN></FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD class="Header1"> </TD>
</TR>

<TABLE BORDER=0 ALIGN=LEFT>
<TR>
<TD>
<input type="button" name="button" value="登録" class="CmnHead100"></TD>
<TD>
<input type="button" name="button" value="クリア" class="CmnHead100"></TD>
</TR>
</TABLE>

9 名前：へけ： 2005/08/05 13:32: ２分割目です。

<TR>
<TD ALIGN=LEFT>
<TABLE BORDER=0>
<TR>
<TD ALIGN=CENTER>

<TABLE BORDER=1 class="List1">

<TR HEIGHT=26>
<TD class="ItemName" width="70" rowspan="3" nowrap>店舗コード</TD>
<TD class="ItemName" width="130" rowspan="3" nowrap>店舗名</TD>
<TD class="ItemNameL" colspan="30" nowrap>  発注グループ</TD>
</TR>
<TR HEIGHT=26>
<TD class="ItemName" nowrap>発注GP1</TD>
<TD class="ItemName" nowrap>発注GP2</TD>
<TD class="ItemName" nowrap>発注GP3</TD>
　　　　　　　　　　　　<TD class="ItemName" nowrap>発注GP4</TD>
　　　　　　　　　　　　<TD class="ItemName" nowrap>発注GP5</TD>
　　　　　　　　　　　　<TD class="ItemName" nowrap>発注GP6</TD>
　　　　　　　　　　　　<TD class="ItemName" nowrap>発注GP7</TD>
　　　　　　　　　　　　<TD class="ItemName" nowrap>発注GP8</TD>
　　　　　　　　　　　　<TD class="ItemName" nowrap>発注GP9</TD>
　　　　　　　　　　　　<TD class="ItemName" nowrap>発注GP10</TD>
<TD class="ItemName" nowrap>発注GP11</TD>
<TD class="ItemName" nowrap>発注GP12</TD>
<TD class="ItemName" nowrap>発注GP13</TD>
<TD class="ItemName" nowrap>発注GP14</TD>
<TD class="ItemName" nowrap>発注GP15</TD>
<TD class="ItemName" nowrap>発注GP16</TD>
<TD class="ItemName" nowrap>発注GP17</TD>
<TD class="ItemName" nowrap>発注GP18</TD>
<TD class="ItemName" nowrap>発注GP19</TD>
<TD class="ItemName" nowrap>発注GP20</TD>
<TD class="ItemName" nowrap>発注GP21</TD>
<TD class="ItemName" nowrap>発注GP22</TD>
<TD class="ItemName" nowrap>発注GP23</TD>
<TD class="ItemName" nowrap>発注GP24</TD>
<TD class="ItemName" nowrap>発注GP25</TD>
<TD class="ItemName" nowrap>発注GP26</TD>
<TD class="ItemName" nowrap>発注GP27</TD>
<TD class="ItemName" nowrap>発注GP28</TD>
<TD class="ItemName" nowrap>発注GP29</TD>
<TD class="ItemName" nowrap>発注GP30</TD>
</TR>

10 名前：へけ： 2005/08/05 13:32: ３分割目です。

<TR HEIGHT=26>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name1" maxlength="20" size="10" tabindex="1" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name2" maxlength="20" size="10" tabindex="2" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name3" maxlength="20" size="10" tabindex="3" value=""></TD>
　　　　　　　　　　　　<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name4" maxlength="20" size="10" tabindex="4" value=""></TD>
　　　　　　　　　　　　<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name5" maxlength="20" size="10" tabindex="5" value=""></TD>
　　　　　　　　　　　　<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name6" maxlength="20" size="10" tabindex="6" value=""></TD>
　　　　　　　　　　　　<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name7" maxlength="20" size="10" tabindex="7" value=""></TD>
　　　　　　　　　　　　<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name8" maxlength="20" size="10" tabindex="8" value=""></TD>
　　　　　　　　　　　　<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name9" maxlength="20" size="10" tabindex="9" value=""></TD>
　　　　　　　　　　　　<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name10" maxlength="20" size="10" tabindex="10" value=""></TD>

11 名前：へけ： 2005/08/05 13:32: ４分割目です。

<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name11" maxlength="20" size="10" tabindex="11" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name12" maxlength="20" size="10" tabindex="12" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name13" maxlength="20" size="10" tabindex="13" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name14" maxlength="20" size="10" tabindex="14" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name15" maxlength="20" size="10" tabindex="15" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name16" maxlength="20" size="10" tabindex="16" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name17" maxlength="20" size="10" tabindex="17" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name18" maxlength="20" size="10" tabindex="18" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name19" maxlength="20" size="10" tabindex="19" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name20" maxlength="20" size="10" tabindex="20" value=""></TD>

12 名前：へけ： 2005/08/05 13:32: 5分割目です。

<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name21" maxlength="20" size="10" tabindex="21" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name22" maxlength="20" size="10" tabindex="22" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name23" maxlength="20" size="10" tabindex="23" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name24" maxlength="20" size="10" tabindex="24" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name25" maxlength="20" size="10" tabindex="25" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name26" maxlength="20" size="10" tabindex="26" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name27" maxlength="20" size="10" tabindex="27" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name28" maxlength="20" size="10" tabindex="28" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name29" maxlength="20" size="10" tabindex="29" value=""></TD>
<TD class="ItemName" width="55" nowrap><input type="text" name="gp-name30" maxlength="20" size="10" tabindex="30" value=""></TD>
</TR>

</TABLE>

13 名前：へけ： 2005/08/05 13:32: ラストです。

</TD>
</TR>
</TABLE>
</TD>
</TR>

<TR>
<TD class="Header1"> </TD>
</TR>
<TR>
<TD class="Header1"> </TD>
</TR>

</TABLE>
</BODY>
</HTML>

14 名前：モノ： 2005/08/05 13:32: 不適切な箇所に入っている全角のスペースをすべて削除してみてください。
<tr>と<td>の間、</td>と<td>の間には全角スペース（=文字）を入れてはいけません。

＃上の検証のときに書き忘れていた…

15 名前：へけ： 2005/08/05 13:32: 全角スペースを削除しましたら出来ました！！
モノさん、長い時間お付き合いして頂きましてありがとうございました。。
感謝、感謝です！