掲示板/HTML質問板/過去ログ/一覧/ 列と表の隙間について

0 名前： Tomo ： 2007/07/18（水） 11:41 ID:rPq7dyXe sub-C7: htmlを使って、初めてのHP作りに挑戦しています。よろしくお願いします。
以下のHTMLファイルを作ったのですが、表がある列（白色背景）の高さと、表の高さを同じにしたいのに、表の上部に隙間が開いてしまいます。htmlのどこをどう修正すれば、隙間がなくなるのでしょうか。助言をお願いします。

<html>
～省略～
<body>
<table width="700" height="600" cellpadding="0" cellspacing="0" border="0" bgcolor="C8E9FF" align="center" valign="top">
<tr><td width="700" height="60" bgcolor="C8E9FF" align="center" valign="middle"><font color="000000" size="5">サンプル</font></td></tr>
<tr><td><table width="550" height="90" bgcolor="#ffffff" border="1" align="center" valign="middle" cellpadding="10" cellspacing="0">
<tr><td height="90" align="center" valign="middle">
<table width="450" height="90" bgcolor="c8e9ff" cellpadding="5" cellspacing="1" border="1" align="center" valign="middle">
<tr><td width="130" height="30" align="center" valign="middle"></td>
<td width="80" height="30" align="center" valign="middle"><font color="000000" size="2"><b>前売1日券</b></font></td>
～省略～
<td width="80" height="30" align="center" valign="middle"><font color="000000" size="2">-</font></td></table></td></tr>
</table>
</body>
</html>

ページ：http://ajisai-ah.raindrop.jp/sample.html

1 名前： カヅサツ ◆ThCi95HEzw ： 2007/07/18（水） 11:41 ［URL］ ID:O5hEMlpW sub-r2

ウェブページの見た目に関する指定はスタイルシートで行いましょう。

<!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">
table,td,th{
	border-width: 0px;
	width: auto;
	height: auto;
	border-collapse: collapse;
}
#whole{
	color: #000000;
	background-color: #C8E9FF;
	font-size: xx-large;
	text-align: center;
	width: 700px;
	height: 600px;
	margin: 0px auto 0px auto;
}
.test1{
	color: #000000;
	background-color: #FFFFFF;
	font-size: medium;
	border-width: 1px;
	border-style: ridge;
	border-color: #FFFFFF;
	width: 550px;
}
.test1 table{
	color: #000000;
	background-color: #C8E9FF;
	width: 450px;
	margin: 0px auto 0px auto;
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC;
	height: 90px;
}
.test1 th{
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC;
	width: 150px;
}
.test1 td{
	font-weight: bold;
	border-width: 1px;
	border-style: solid;
	border-color: #CCCCCC;
	width: 80px;
}
</style>
</head>
<body>
<table id="whole">
	<tr>
		<td>サンプル</td>
	</tr>
	<tr>
		<td>
			<div class="test1">
				<table>
					<tbody>
						<tr>
							<th></th>
							<td>前売1日券</td>
							<td>-</td>
						</tr>
					</tbody>
				</table>
			</div>
		</td>
	</tr>
</table>
</body>
</html>

もし、この投稿についてさらに質問がある場合、総合質問板かスタイルシート質問板へどうぞ。

2 名前：匿名： 2007/07/18（水） 11:41 ID:jSC9zi.K sub-y9: 全角スペースと、 cellpadding="10"が原因です。

tableが三重の入れ子となっていて非常に見通しが悪くなっていますが大丈夫でしょうか？
</table>が二つしかないので、わけが分からなくなっているような気がします。

3 名前： Tomo ： 2007/07/18（水） 11:41 ID:w1tjaXVj sub-C7: ありがとうございます！

お二人のアドバイスに従い、問題解決しました。
今後ともよろしくお願いいたします。