テーブルタグが上手にできません。



0   名前: うさ : 2007/04/03(火) 16:30  [URL]  ID:GRnA7R8c sub-Ds
テーブルの作り方についてです。
上の方はきちんとくっついているのですが、
下の方は途中で切れてしまいます…。
下も、上と同じようにずっとつながっているようにしたいのですが…。

色々調べてみたのですが、どうしてもわかりません。
わかる方、教えていただけないでしょうか。
どうぞよろしくお願いします。

1   名前: カヅサツ ◆ThCi95HEzw : 2007/04/03(火) 16:30  [URL]  ID:O5hEMlpW sub-r2
まず、body要素(念のためにhtml要素も)の上下margin を 0 にします(念のためにpaddingも)。これは htmlよりも CSS で行ったほうが良いので、さらに詳しい質問がある場合は総合質問板かスタイルシート質問板へどうぞ。

当たり前ですが、tableの前後に他のテキストや要素を置いてはいけません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
html,body{
	margin: 0px;
	padding: 0px;
}
table{
	margin: 0px auto;
	border-width: 0px 1px;
	border-style: solid;
	border-color: black;
}
td,th{
	border-width: 1px;
	border-style: solid;
	border-color: black;
}
</style>
</head>
<body>
<table summary="第1回試験" class="examination" id="examination01">
	<thead>
		<tr>
			<th scope="col">名前</th><th scope="col">得点</th>
		</tr>
	</thead>
	<tbody>
		<tr><th scope="row">出木杉英才</th><td>100</td></tr>
		<tr><th scope="row">野比のび太</th><td>0</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
		<tr><th scope="row">(略)</th><td>(略)</td></tr>
	</tbody>
</table>
</body>
</html>

2   名前: うさ : 2007/04/03(火) 16:30  ID:GRnA7R8c sub-Ds
カヅサツさん、ご回答ありがとうございます!
すごく初心者な返答で申し訳ないのですが…
html,body{
margin: 0px;
padding: 0px;
}
を、<style type="text/css">〜</style>の中に
埋め込めばよいのでしょうか?
色々試行錯誤してみたのですが、やっぱりぴったりにならなくて…。
もうあきらめて1から作り直した方がいいのでしょうか…。

3   名前: カヅサツ ◆ThCi95HEzw : 2007/04/03(火) 16:30  [URL]  ID:O5hEMlpW sub-r2
まず確認なのですが、>>1はうささんにとって「ぴったり」になってないのですか?

4   名前: うさ : 2007/04/03(火) 16:30  ID:GRnA7R8c sub-Ds
ご回答ありがとうございます。
1のタグを新たにテキストにコピーしてみてみたところ
これはぴったりになっていました。
自分のタグに入れてみたら直りませんでした。

5   名前: カヅサツ ◆ThCi95HEzw : 2007/04/03(火) 16:30  [URL]  ID:O5hEMlpW sub-r2
あと>>1の

> 当たり前ですが、tableの前後に他のテキストや要素を置いてはいけません。

は、ちゃんと守られていますか?

6   名前: うさ : 2007/04/03(火) 16:30  ID:GRnA7R8c sub-Ds
こちらの、「要素」というのは具体的にどういうものでしょうか?
結構ごちゃごちゃとしたソースなのでこれが原因かもしれません。。

7   名前: カヅサツ ◆ThCi95HEzw : 2007/04/03(火) 16:30  [URL]  ID:O5hEMlpW sub-r2
(前略)
</table>
(ここに何か書いたらダメですよ)
</body>
</html>

8   名前: あや : 2007/04/03(火) 16:30  ID:TRVH9wjM sub-ND
 >>0さんのサイトを拝見したところずいぶん不適切な記述が多いようです。
 まず<html lang="ja">と<meta〜>のあいだの<style type="text/css"></style>を削除した方がいいのではないでしょうか。
 
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

 ↑のサイトで>>0さんのhtml文書をチェックして不適切な記述を減らしてから再質問をされた方が>>0さんも納得できるサイトになると思います。
 もし上のサイトでチェックされた言葉が分からなかった時には「わかりません」ではなくて「××行について×××と言われたがどうしたらいいのか」と言うように聞いてもらえるとレスも付きやすくなると思います。頑張ってくださいね。

9   名前: うさ : 2007/04/03(火) 16:30  ID:GRnA7R8c sub-Ds
あやさん、カヅサツさんありがとうございます!!!
あやさんに教えていただいた方法でもう一度自分でやってみようと思います。
またわからなかったら書き込みにきます。
解決したら報告しますね!ありがとうございました。

10   名前: うさ : 2007/04/03(火) 16:30  ID:GRnA7R8c sub-Ds
やりなおしたら、なんとかできたみたいです><
大変お世話になりました。
ありがとうございました!

一覧へ戻る