掲示板/HTML質問板/過去ログ/一覧/ テーブルタグのわくについて

0 名前：はな： 2006/10/27（金） 18:45 ID:/usM/g/9: いつもどおり、テーブルタグを組んでいたのですが、
なぜか、テーブルの枠の線が1箇所だけ表示が変になります。
URLは、こちら
http://www.asahihouse.jp/test.htm
一番右下と右から2番目の画像の間の線の表示がへんなのです。
なお画像は、適当に入れているので、気にしないでください。

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/10/27（金） 18:45 ［URL］ ID:O5hEMlpW: 結論から言うと、Windows IE の不具合のようです。
セル内の余白もおかしくなるようです。
Operaではこれらの不具合は再現しません。

このようなcolspanやrowspan属性の複雑な組み合わせはオススメしません。
ただ、画像の大きさが決まっているのであれば、テーブルを使わずになんとかなりそうな気がします。

2 名前： カヅサツ ◆ThCi95HEzw ： 2006/10/27（金） 18:45 ［URL］ ID:O5hEMlpW

私はテーブルでのレイアウトそのものをオススメしませんが、
ひょっとしたら、別の誰かが解決したいかもしれません。
検証用に作った、なるべくわかりやすく変えたソースを出しておきます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<html>
<head>
<base href="http://www.asahihouse.jp/">
<title>施工中の家</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Robots" content="index, follow">
<meta name="Keywords" content="建売,注文住宅,福山,賃貸,モデルハウス,新築,安心,広島,モデル,工事実績,">
<meta name="Description"
content="住まい総合サイト。最新施工例をリアルタイム更新！！ブックマークはhttp://www.asahihouse.jp/まで">
<style type="text/css">
html, body {
	scrollbar-base-color: #F5DEB3;
	scrollbar-track-color: #FFFACD;
}
body{
	color: #000000;
	background-image: url("./kippoikabe.gif");
}
div#title{
	color: #FFFFFF;
	background-color: #006400;
	width: 450px;
	margin: 0em auto;
	border-width: 3px;
	border-style: solid;
	border-color: #CCC #999 #999 #CCC;
}
h1{
	font-size: large;
	font-weight: normal;
	text-align: center;
	margin: 3px;
	border-width: 1px;
	border-style: inset;
	border-color: #FFF;
}
.main{
	background-color: #FFFFFF;
	border-width: 2px;
	border-color: #006400;
	border-style: solid;
	margin: 1em auto;
	height: 769px;
}
.main td{
	background-color: #FAFAD2;
	border-width: 1px;
	border-color: #006400;
	border-style: solid;
	text-align: center;
	vertical-align: center;
}
</style>
</head>
<body>
<div id="title">
	<h1>画像テスト</h1>
</div>
<table id="main">
	<tbody>
		<tr>
			<td><img src="./y-genkan3.jpg" alt="玄関"></td>
			<td colspan="2" rowspan="2"><img src="./y-genkan2.jpg" alt="玄関"></td>
			<td colspan="2" rowspan="2"><img src="./y-kaidan2.jpg" alt="階段"></td>
			<td colspan="2" rowspan="2"><img src="./y-kittin2.jpg" alt="キッチン"></td>
			<td><img src="./y-wasitu3.jpg" alt="和室"></td>
		</tr>
		<tr>
			<td rowspan="2"><img src="./y-2you.jpg" alt="2階洋室"></td>
			<td rowspan="2"><img src="./y-you2.jpg" alt="洋室"></td>
		</tr>
		<tr>
			<td colspan="6" rowspan="2"><img src="./y-gaikan3.jpg"
				alt="外観" width="320" height="215"></td>
		</tr>
		<tr>
			<td><img src="./y-2roka.jpg" alt="2階廊下"></td>
			<td><img src="./y-wasitu2.jpg" alt="和室"></td>
		</tr>
		<tr>
			<td><img src="./y-ld.jpg" alt="洋室"></td>
			<td colspan="3"><img src="./y-ld.jpg" alt="洋室"></td>
			<td colspan="3"><img src="./y-ld.jpg" alt="洋室"></td>
			<td><img src="./y-you3.jpg" alt="洋室"></td>
		</tr>
	</tbody>
</table>
</body>
</html>

3 名前：はな： 2006/10/27（金） 18:45 ID:/usM/g/9: カヅサツさんのソースだと、テーブルの枠がまったく表示されなくなってしまいました。
それとこのタグは、<html lang="ja" dir="ltr">
<html>とhtml宣言の開始タグが２つ続いていいのですか？

自分は、<html>タグにはなにも加えないほうなので、<html lang="ja" dir="ltr">
な使い方があったとは、初めて知りました。

4 名前： カヅサツ ◆ThCi95HEzw ： 2006/10/27（金） 18:45 ［URL］ ID:O5hEMlpW

> テーブルの枠がまったく表示されなくなってしまいました。

すいません。訂正します。

> <html>とhtml宣言の開始タグが２つ続いていいのですか？

良くないですね。訂正します。

が >>1 の通り、解決していません。
現状のまま、テーブルを使い続けると Win IE では恐らく解決しないだろう、というのが、私の結論です。
ただし、他の方は知識があるかもしれませんので、その方のためにできるだけ簡略化した(というか物理要素を排除した)ソースを提出しただけです。これを叩き台にできるかもしれません(できないかもしれません)。

私なら、本件では別の手段を考えます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<base href="http://www.asahihouse.jp/">
<title>施工中の家</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Robots" content="index, follow">
<meta name="Keywords" content="建売,注文住宅,福山,賃貸,モデルハウス,新築,安心,広島,モデル,工事実績,">
<meta name="Description"
content="住まい総合サイト。最新施工例をリアルタイム更新！！ブックマークはhttp://www.asahihouse.jp/まで">
<style type="text/css">
html, body {
	scrollbar-base-color: #F5DEB3;
	scrollbar-track-color: #FFFACD;
}
body{
	color: #000000;
	background-image: url("./kippoikabe.gif");
}
div#title{
	color: #FFFFFF;
	background-color: #006400;
	width: 450px;
	margin: 0em auto;
	border-width: 3px;
	border-style: solid;
	border-color: #CCC #999 #999 #CCC;
}
h1{
	font-size: large;
	font-weight: normal;
	text-align: center;
	margin: 3px;
	border-width: 1px;
	border-style: inset;
	border-color: #FFF;
}
#main{
	background-color: #FFFFFF;
	border-width: 2px;
	border-color: #006400;
	border-style: solid;
	margin: 1em auto;
	height: 769px;
}
#main td{
	background-color: #FAFAD2;
	border-width: 1px;
	border-color: #006400;
	border-style: solid;
	text-align: center;
	vertical-align: center;
}
</style>
</head>
<body>
<div id="title">
	<h1>画像テスト</h1>
</div>
<table id="main">
	<tbody>
		<tr>
			<td><img src="./y-genkan3.jpg" alt="玄関"></td>
			<td colspan="2" rowspan="2"><img src="./y-genkan2.jpg" alt="玄関"></td>
			<td colspan="2" rowspan="2"><img src="./y-kaidan2.jpg" alt="階段"></td>
			<td colspan="2" rowspan="2"><img src="./y-kittin2.jpg" alt="キッチン"></td>
			<td><img src="./y-wasitu3.jpg" alt="和室"></td>
		</tr>
		<tr>
			<td rowspan="2"><img src="./y-2you.jpg" alt="2階洋室"></td>
			<td rowspan="2"><img src="./y-you2.jpg" alt="洋室"></td>
		</tr>
		<tr>
			<td colspan="6" rowspan="2"><img src="./y-gaikan3.jpg"
				alt="外観" width="320" height="215"></td>
		</tr>
		<tr>
			<td><img src="./y-2roka.jpg" alt="2階廊下"></td>
			<td><img src="./y-wasitu2.jpg" alt="和室"></td>
		</tr>
		<tr>
			<td><img src="./y-ld.jpg" alt="洋室"></td>
			<td colspan="3"><img src="./y-ld.jpg" alt="洋室"></td>
			<td colspan="3"><img src="./y-ld.jpg" alt="洋室"></td>
			<td><img src="./y-you3.jpg" alt="洋室"></td>
		</tr>
	</tbody>
</table>
</body>
</html>

5 名前：はな： 2006/10/27（金） 18:45 ID:/usM/g/9: CSSかJSを使えば出来そうですが、オジリナルのテンプレートを使いまわしているため、
複雑なのは大変なので、テーブルを使っています。
やはりテーブルでは、無理みたいですね。
あきらめます。

6 名前： 通りすがり ： 2006/10/27（金） 18:45 ID:9IuG66CT: 上下二つのテーブルに分けてしまえば、不具合は出なくなるのでは。
テーブルとテーブルの間の枠線や幅はスタイルシートでどうにでもなりますし。

7 名前：はな： 2006/10/27（金） 18:45 ID:/usM/g/9: テーブルを2つにわけると、上のテーブルの外枠としたのテーブルの外枠がくっつくと思うのですが、
スタイルシートでテーブルの特定の枠だけを消すことは、できるのでしょうか。

8 名前： カヅサツ ◆ThCi95HEzw ： 2006/10/27（金） 18:45 ［URL］ ID:O5hEMlpW

お、出来た。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="Robots" content="index, follow">
<title>施工中の家</title>
<meta name="Keywords"
content="建売,注文住宅,福山,賃貸,モデルハウス,新築,安心,広島,モデル,工事実績,">
<meta name="Description"
content="住まい総合サイト。最新施工例をリアルタイム更新！！ブックマークはhttp://www.asahihouse.jp/まで">
<style type="text/css">
html, body {
	scrollbar-base-color: #F5DEB3;
	scrollbar-track-color: #FFFACD;
}
body{
	color: #000000;
	background-image: url("./kippoikabe.gif");
}
div.title1{
	color: #FFFFFF;
	background-color: #006400;
	width: 450px;
	margin: 0em auto;
	border-width: 3px;
	border-style: solid;
	border-color: #CCC #999 #999 #CCC;
}
h1{
	font-size: large;
	font-weight: normal;
	text-align: center;
	margin: 3px;
	border-width: 1px;
	border-style: inset;
	border-color: #FFF;
}
div.title2{
	color: #000000;
	background-color: #FFFFCC;
	width: 342px;
	margin: 0em auto;
	border-width: 2px;
	border-style: solid;
	border-color: #CCC #999 #999 #CCC;
}
h2{
	font-size: small;
	text-align: center;
	margin: 3px;
	border-width: 1px;
	border-style: inset;
	border-color: #CCC;
}
h2 em{
	font-size: medium;
	font-style: normal;
	letter-spacing: 1em;
}
p.notice{
	text-align: center;
	font-size: small;
}
ul.menu{
	list-style-type: none;
	text-align: right;
}
#main{
	background-color: #FFFFFF;
	border-width: 2px;
	border-color: #006400;
	border-style: solid;
	margin: 1em auto;
	height: 769px;
	table-layout: fixed;
}
#main td{
	background-color: #FAFAD2;
	border-width: 1px;
	border-color: #006400;
	border-style: solid;
	text-align: center;
	vertical-align: center;
	padding: 0px;
}
#main td.side{
	width: 210px;
}
#main td.middle{
	width: 172px;
}
#main td.appearance{
	background-color: #FFFFFF;
}
#backnumber{
	color: #006400;
	font-size: large;
	font-weight: bold;
	margin: 1em 0em;
	paddimg: 0em;
	text-align: center;
}
#backnumber ul{
	margin: 0em;
	paddimg: 0em;
	display: inline
}
#backnumber li{
	list-style-type: none;
	display: inline
}
</style>
</head>
<body>
<div class="title1">
	<h1>画像テスト</h1>
</div>
<table id="main">
	<tbody>
		<tr>
			<td class="side"><img
				src="./y-genkan3.jpg" alt="玄関"></td>
			<td class="middle" colspan="2" rowspan="2"><img
				src="./y-genkan2.jpg" alt="玄関"></td>
			<td class="middle" colspan="2" rowspan="2"><img
				src="./y-kaidan2.jpg" alt="階段"></td>
			<td class="middle" colspan="2" rowspan="2"><img
				src="./y-kittin2.jpg" alt="キッチン"></td>
			<td class="side"><img
				src="./y-wasitu3.jpg" alt="和室"></td>
		</tr>
		<tr>
			<td rowspan="2"><img
				src="./y-2you.jpg" alt="2階洋室"></td>
			<td rowspan="2"><img
				src="./y-you2.jpg" alt="洋室"></td>
		</tr>
		<tr>
			<td colspan="6" rowspan="2" class="appearance"><img
				src="./y-gaikan3.jpg" alt="外観"></td>
		</tr>
		<tr>
			<td><img
				src="./y-2roka.jpg" alt="2階廊下"></td>
			<td><img
				src="./y-wasitu2.jpg" alt="和室"></td>
		</tr>
		<tr>
			<td><img
				src="./y-ld.jpg" alt="洋室"></td>
			<td colspan="3"><img
				src="./y-ld.jpg" alt="洋室"></td>
			<td colspan="3"><img
				src="./y-ld.jpg" alt="洋室"></td>
			<td><img
				src="./y-you3.jpg" alt="洋室"></td>
		</tr>
	</tbody>
</table>
<div class="title2">
	<h2><em>最新現場写真</em> (10月25日掲載)</h2>
</div>
<ul id="backnumber">
	<li>バックナンバー /
		<ul>
			<li><a href="./make-up-s-bk1.htm">1</a> /
			<li><a href="./make-up-s-bk2.htm">2</a> /
			<li><a href="./make-up-s-bk3.htm">3</a> /
			<li><a href="./make-up-s-bk4.htm">4</a> /
			<li><a href="./make-up-s-bk5.htm">5</a> /
			<li><a href="./make-up-s-bk6.htm">6</a> /
		</ul>
	</li>
</ul>
<p class="notice">バックナンバーは、番号が若いほど最新のものになります。</p>
<ul class="menu">
	<li><a href="http://www.asahihouse.jp/">戻る</a></li>
</ul>
</body>
</html>

9 名前：はな： 2006/10/27（金） 18:45 ID:/usM/g/9: ありがとうございます。
なんとか、解決しました。
１つ気になることがあるのですが、緑とクリーム色の文字の入っているテーブル内側の凹みの
上側と左側に線が入っているようなのですが、これを消すことは、出来ないのでしょうか。
Lを90度右回転したような黒い線のことです。

それと、今回コピーペーストしてソースの中に始めて見るCSSがたくさんあるので、何を意味しているのかが、微妙です。

個人サイトもCSSを使いまくれるサーバーに移転中なので、これからはCSSを使いまくってみようと思います。

10 名前： カヅサツ ◆ThCi95HEzw ： 2006/10/27（金） 18:45 ［URL］ ID:O5hEMlpW: > 緑とクリーム色の文字の入っているテーブル

私はテーブルでなく見出しだと思う(ので、サンプルではh1要素にした)のですが、この見出しの枠線を消したい、というお話なら可能です。

11 名前： カヅサツ ◆ThCi95HEzw ： 2006/10/27（金） 18:45 ［URL］ ID:O5hEMlpW: まぁしかし、元質問から離れつつあるので、別スレッドで仕切りなおした方が宜しいかと思います。

12 名前： Z ◆XTzyosZXcL ： 2006/10/27（金） 18:45 ID:0kFtme6G: >>9
>始めて見るCSSがたくさんあるので、何を意味しているのかが、微妙です。
　一度仕様書やリファレンスなどに一通り目を通されることをお奨めしておきます。

CSS2　Level2仕様書(和訳)：
http://www.y-adagio.com/public/standards/tr_css2/toc.html

CSS2リファレンス：
http://hp.vector.co.jp/authors/VA022006/css/

セオリー・オブ・スタイルシート（書籍）：
http://www.amazon.co.jp/exec/obidos/ASIN/4774127833/
（註・Amazonへのリンクです。）

13 名前：えじ ◆HtEaXt.II9 ： 2006/10/27（金） 18:45 ID:WP1ytrfY: >>12

Amazonへのリンクですが、アソシエイトIDが含まれていたのでその部分を削除・編集させていただきました。

アソシエイトIDはサイト単位で登録されています。そのため、このIDが含まれたURLを別サイトに掲載すると、Amazonアソシエイトに関する規約に触れてしまう可能性があります。

※アソシエイトIDとは、URL内の ****-22 といった感じの部分です。