テーブルがうまくいきません。

解決済

質問者：hoshikun23
質問日時：2008/10/18 00:26
回答数：5件

ＨＰの中にテーブルを使いたいんですが、
パーツがばらばらになってしまい、角もうまくつながりません。
テンプレートは配布サイトからＤＬしたものだったので、
メモ帳を使ってスタイルシートなしで試してみたところ、キレイにテーブルができました。
ソースが間違っているわけでもないようなので、やっぱりスタイルシートの影響ですよね…？
いろいろなサイトをまわって調べてみましたが、もうパンクしちゃいそうです◎
説明不足かもしれませんが、正直スタイルシートの何が原因なのか、ほんとにわかりません。
経験から「もしかしてこれじゃないの？」というのがあればぜひ教えてください！

通報する

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

質問の本文を隠す

回答 (5件)

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

No.5ベストアンサー

回答者： goldfox
回答日時：2008/10/18 09:28

＞その中身を書いたものが、No.1で書いた「★スタイルシート★」の部分なんです。

ああ、やっとわかりました。
paddingが原因です。
body,td,th{
～
margin:0px;
padding:3px;　（←td内にも余白ができる）
}
body{background-color:#色;}
を
body,td,th{
～
margin:0px;
}
body{background-color:#色;
padding:3px;}
に変えましょう。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
うまくつながらなかったテーブルが全てキレイにできました！
せっかく質問してくださることにもまともに答えられないし、
情けなくて使おうと思っていたテーブルは諦めようと思ってたんです。
goldfoxさんに本当に感謝です！
ありがとうございました！

スタイルシートの勉強、少しづつ頑張ります^^;

通報する

お礼日時：2008/10/19 01:57

No.4

回答者： goldfox
回答日時：2008/10/18 04:55

※はい、<tr>から始まってます。

ちゃんと<table>から</table>までありますよ。
つか、<table>で始まって</table>で終わらなければダメです。
「ない」と思うなら自分できちんと書かなくてはダメです。
http://www.tagindex.com/html_tag/table/table.html

次はcssファイル（style.css）の中身も提示してください。

※普通のページでdoctype宣言にframeset用を使うのは間違っています。（<frameset>が書かれた土台ページにのみ使う）
普通のStrictかTransitionalを宣言しましょう。
http://www.tagindex.com/html_tag/page/doctype.html

この回答への補足

説明不足でした。
<table>～</table>までちゃんと書いてあります。

cssファイルですが、
その中身を書いたものが、No.1で書いた「★スタイルシート★」の部分なんです。

いろいろ勉強しながら作ってはきたんですが、
あまりのスタイルシートなどの知識不足で恥ずかしいです//
ほんとすいません。
それでも何度も応えていただいて、ありがとうございます。

補足日時：2008/10/18 07:46

通報する

- 0
- 件

通報する

No.3

回答者： goldfox
回答日時：2008/10/18 01:52

＞何を載せたらいいかもわかんなかったので、とりあえず載せました。

提示されたソースでテストページを作成すれば、同様の現象を再現できる、その部分のソースをください。
どの部分を書けばいいのか分からないなら「ソースのすべて」を。
（URLを提示してもらうのが一番手っ取り早いのですが、この掲示板ではそれは禁止されていますので）
作ってみましたが、問題を再現できませんでした。

問題のページ上では、tableは<tr>から始まっているのでしょうか？

この回答への補足

多分違うと思いますが…こ、これでしょうか？
※はい、<tr>から始まってます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>サイト名</title>
</head>
<body>
<TABLE border="0" cellpadding="0" cellspacing="0">
<TR>
<TD width="42" height="39"><IMG src="a-t1.gif" width="42" height="39"></TD>
<TD background="a-t2.gif"></TD>
<TD width="36" height="39"><IMG src="a-t3.gif" width="36" height="39"></TD>
</TR>
<TR>
<TD background="a-t4.gif"></TD>
<TD bgcolor="#ffffff">
<p>ココに文章　ココに文章</p>
<p>ココに文章　ココに文章</p>
<p>ココに文章　ココに文章</p>
</TD>
<TD background="a-t5.gif"></TD>
</TR>
<TR>
<TD width="42" height="34"><IMG src="a-t6.gif" width="42" height="34"></TD>
<TD background="a-t7.gif"></TD>
<TD width="36" height="34"><IMG src="a-t8.gif" width="36" height="34"></TD>
</TR>
</TABLE>
</div>
</body>
</html>

補足日時：2008/10/18 02:40

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2008/10/18 01:06

オリジナルのテンプレートのスタイルシートへのリンク部分

- 0
- 件

通報する

No.1

回答者： goldfox
回答日時：2008/10/18 00:37

スタイルシートが「なければ」上手くいくなら、それが原因で間違いないでしょう。

わざわざ聞くまでもないです。

＞正直スタイルシートの何が原因なのか
問題のhtmlソースとスタイルシートを提示してくれなければ、分かろうハズもないのですが。

この回答への補足

★HTML★
<TR>
<TD width="42" height="39"><IMG src="ファイル" width="42" height="39"></TD>
<TD background="ファイル"></TD>
<TD width="36" height="39"><IMG src="ファイル" width="36" height="39"></TD>
</TR>
<TR>
<TD background="ファイル"></TD>
<TD bgcolor="色">
<p>ココに文章　ココに文章</p>
<p>ココに文章　ココに文章</p>
<p>ココに文章　ココに文章</p>
</TD>
<TD background="画像"></TD>
</TR>
<TR>
<TD width="42" height="34"><IMG src="画像" width="42" height="34"></TD>
<TD background="画像"></TD>
<TD width="36" height="34"><IMG src="画像" width="36" height="34"></TD>
</TR>
</TABLE>

★スタイルシート★
何を載せたらいいかもわかんなかったので、とりあえず載せました。
長くてすいません。
※実際は画像もカラーコードもちゃんと入ってます。

-全体-
body,td,th{
font-size:70%;
color:色;
font-family:Verdana,Osaka,'MS P Gothic';
font-weight:normal;
margin:0px;
padding:3px;
}
body{background-color:#色;}

-リスト設定-
ul,ol{
list-style-position:inside;
margin:0px 0px 0px 15px;
}

-画像のボーダー0-
img{border:none;}

-デザイン全般-
.ta{margin:30px 0px 0px 0px;}
.ta1{background:url(bg01.jpg) no-repeat 0% 0%;}
.ta2{background:url(bg02.jpg) no-repeat 0% 0%;}
#scroll{
overflow:auto;
font-size:10px;
color:色;
line-height:17px;
height:230px;width:200px;
border-top:1px solid #色;
border-bottom:1px solid #色;
padding:6px;
margin:4px 3px;
}

-テキスト-
.text1{
line-height:20px;
padding:12px 30px 40px 25px;
}

※何も知らなくてすいません；