新規無料会員登録で1000名様に電子コミック1000円分が当たる!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style type="text/css">
body{margin:0}
table{border-collapse:collapse}
td{padding:0;}
</style>
</head>
<body>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>

<table style="width:100px;height:100px;background-color:#f93;">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td>
a
</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

</td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>

以上のソースをIEで見たとき。よく分からない1pxぐらいの隙間が上に開いてしまいます。
FFで見たときには思ったとおりに表示されるのですが・・・。
どなたか原因が分かる方おられましたら教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

単純に最初のテーブルタグの<tr>-</tr>分の空白ですね。


以下のソース上で、青の部分が最初のテーブルの枠線部分。
上下に少しだけ有る赤の部分が件の空白に当たる部分です。最初の、<tr>~</tr>までを消せば空白も消えます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css">
body{margin:0}
table{
border-collapse:collapse;
padding:0;
border-style: solid;
border-width: 8px;
border-color: blue;
background-color: red;
}
.aaa{
width:100px;
height:100px;
background-color: orange;
}
td{padding:0;}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<table class="aaa">
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td>
<td>a</td>
<td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>
    • good
    • 0

TABLEタグなどに頼らず、すなおにposition/floatで位置決めすればいいだけの事。

    • good
    • 0

>よく分からない1pxぐらいの隙間


連続した改行および空白文字は1文字の空白に置換される。
通常次のようなタグの閉じ記号を次の行の頭にして次の開始タグの開始記号に連続させる方法で表示空白に変換される改行を潰す(バッドノウハウ)

<table><tr
><td
></td
></tr
></table>

この回答への補足

回答ありがとうございます

ためしにtableに関するタグを以下のようにすべて一行で書いてみたんですが
<table cellspacing="0"><tr><td></td>.....</table>(とっても長い
それでもよく分からない1pxの空白はまだ残ってしまいます

補足日時:2007/09/19 13:54
    • good
    • 0

<table cellspacing="0" style="width:100px;height:100px;background-color:#f93;">



cellspacing="0"を追加してください。

思っていることと違っていたらごめんなさい。

タグの組み方(書き方)でおかしいところがあります。
同じものにたいしてCSS設定を二回するのもおかしいと思います。

(タグ打ちのみで行おうとすると間違いに気がつきにくいので、何かソフトを導入して作業してみては如何でしょうか。余談)
    • good
    • 0

外tableに余計な行があるではにでしょうか?


この行と
<tr><td></td><td></td><td></td></tr>
この行(但し<tr>はいる)
<tr><td></td><td>
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブルの入れ子について

このようにテーブルを入れ子にするのは不可能なのでしょうか?

<table>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <tr>
  <td colspan="4">
    <table>
     <tr>
     <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
     </tr>
    </table>
  </td>
 </tr>
</table>

cssなどでいろいろと設定しても、
「5・6・7・8」のセルが「1」のセルの幅にしかなりません。
colspanしているセル全体にテーブルを置きたいのですが・・・。

間違いを教えて下さい。
よろしくお願いします。

Aベストアンサー

No.1です。
図で解説すると・・tableのcellは内容の量に比例して配分されるので図の上になる。
tableの子孫のtableについてのみセル内100%幅なら
table table{}
table tbody tr table{
table tbody td table{
table tr td table{
table tbody table{
table tbody td table{
table tr td table{
table tr table{
td>table{ /*子供*/
・・どれでもよいけど、詳細度で他と区別したけりゃ適当なものを

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qテーブルとテーブルの間に、隙間があいてしまいます。

お世話になります。
表題のとおりです。

下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが
テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。
1時間ほど考えましたが、どうにもこうにも理由が分かりません。
初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。

---------------------------以下ソース--------------------------------------
<body>
<!-- 背景白 -->
<table border="1" cellpadding="0" cellspacing="0" class="table_white">
<tr>
<td>
<!-- 丸枠 -->
<table width="820" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="image/head.gif" width="820" height="9" /></td>
</tr>
</table>
<!-- 丸枠ここまで -->
</td>
</tr>
<tr>
<td align="center">
<!-- ヘッダ -->
<table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="324" height="15" align="left" >
<strong class="seo01">ミ</strong></td>
<td width="203"></td>
<td width="5" align="center"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="42"><a href="kaisya.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','image/head_kaisya_ov.gif',1)"><img src="image/head_kaisya.gif" alt="会社概要" width="42" height="11" border="0" id="Image4" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="61"><a href="toiawase.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('問い合わせ','','image/head_toiawase_ov.gif',1)"><img src="image/head_toiawase.gif" alt="お問い合わせ" width="61" height="11" border="0" id="問い合わせ" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="62"><a href="sitemap.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sitemap','','image/head_sitemap_ov.gif',1)"><img src="image/head_sitemap.gif" alt="sitemap" width="62" height="11" border="0" id="sitemap" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
</tr>
</table>
<!-- ヘッダ ここまで-->
</td></tr>
<tr>
<td align="center">

<table width="730" border="0" cellspacing="0" cellpadding="0">
<!-- ロゴ -->
<tr>
    <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td>
</tr>
<!-- ロゴ ここまで -->
---------------------------ソースここまで--------------------------------------

---------------------------念のため使用CSS--------------------------------------
body {
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-size: 12pt;
font-weight: normal;
color: #5c5c5c;
background-color: #889fb6;
margin-left: 30px;
margin-top: 30px;
letter-spacing: 2.5px;
line-height: 18px;
}


.table_white {
background-color: #FFFFFF;
width: 820px;
}

.seo01 {
font-size: x-small;
letter-spacing: normal;
font-weight: normal;
}

---------------------------ここまで--------------------------------------

お世話になります。
表題のとおりです。

下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが
テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。
1時間ほど考えましたが、どうにもこうにも理由が分かりません。
初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。

---------------------------以下ソース--------------------------------------
<body>
<!-- 背景白 -->
<table border="1" cellpadding="0" cellspacing="0" cl...続きを読む

Aベストアンサー

オリジナルのソースもこの通りなのでしたら、

<!-- ロゴ -->
<tr>
※    <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td>
</tr>
<!-- ロゴ ここまで -->

※のところに全角スペースが4つも入ってます。ソースをインデントしたければ、タブを使用して下さい。<tr>の直下には子要素である<th>もしくは<td>しか入れません。テキストデータが素のままで入る事は有り得ません。

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む


人気Q&Aランキング