ID登録せずに、無料で質問できる♪ 教えて!gooアプリ>>

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

<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しているセル全体にテーブルを置きたいのですが・・・。

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

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

A 回答 (6件)

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{ /*子供*/
・・どれでもよいけど、詳細度で他と区別したけりゃ適当なものを
「テーブルの入れ子について」の回答画像4
    • good
    • 0

間違われたらまずいので・・


他の方のコメントにある
<tr colspan="4">は間違いです。
trは、colspanというattributeはもてません。
Tables in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 ブラウザが不完全なHTMLでも何とか表示しますが、それに期待してはなりません。
table要素の正しいというか最小限のマークアップは
<table summary=""><!-- summaryは必須 -->
 <tbody>
  <tr>
   <th abbr=""><!-- abbrは必須 --><th><!-- 内部に%flow -->
   <td><!-- 内部に%flow-->
  </tr>
 </tbody>
</table>
th|tdは<!ELEMENT (TH|TD) - O (%flow;)ですから終了タグは省ける。XHTMLにするときは必須

 
    • good
    • 0
この回答へのお礼

何度も詳しくありがとうございます。

tbodyのタグはまったく使っていませんでした。
今後は使うようにします。

先ほどのご回答でなんとか解決しそうです。
本当にありがとうございます。

お礼日時:2011/04/13 16:45

趣味でWEBページを作成してる30代男です。


補足要求というか質問の書き間違いか?
下図のなかのcolspanを設定しているタグがおかしいです。
何故そこで<td>??
<table>
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
 </tr>
 <tr>  ←これにむしろcolspan="4"とするべき、これと↓2へ   
  <td colspan="4">←いらない
    <table> ←当然1個のテーブルに複数の<table>↓
     <tr>  ←これも要らん         入れ子はダメ!!
     <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
     </tr>    ←2 これが有ればよい
    </table>        ←当然これも要らん
  </td>     ←これも要らん
 </tr>      ←これも要らん
</table>

ちょっと命令調で申し訳ないのですが簡潔にしないと
改行してしまうので…
テーブル段組みは
<table>
<tr> ここから
<td>1</td>
<td>2</td>
<td>3</td>
</tr>      ここまでが1列 
<tr colspan="4"> こっから2列目
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
単純に書きますと
<table><tr><td></td><td></td></tr></table>
この流れを崩してはいけません。
従って<td>で<tr>をくくれません。
まぁ強い弱いとお考えください。
記述的には何ら問題ないのですが使っている
タグに問題があったというだけです。
    • good
    • 1
この回答へのお礼

細かい点まで書いていただいてありがとうございます。

どうしてもテーブルの入れ子にしたい状況に
ありました。

お礼日時:2011/04/13 16:43

?


ぱっと見た感じだと「colspanしているセル全体にテーブルを置きたい」という希望はかなっていると思うんだが....

どういう形を期待しているんだろ.
    • good
    • 0
この回答へのお礼

ありがとうございます。
ORUKA1951さんのご回答で、無事解決しそうな問題にハマっていました。

お礼日時:2011/04/13 16:42

どういう癖かわかりませんが、全角スペースでインデントするのをやめれば


ご提示のソースでも希望のとおりなるんじゃないでしょうか?

この回答への補足

お見苦しい質問文で申し訳ありません…。

こちらのサイトに転記する際、全角インデントになってしまいました。
本当の癖は、まったくインデントなしです。

補足日時:2011/04/13 16:28
    • good
    • 0

tableのセルは内容の大きさによってサイズは変わります。

必要以上のサイズに広がることはありません。
table table{width:100%;}
でよいかと
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
table{
width:600px;
margin-left:auto;
margin-right:auto;
border-collapse:collapse;
border:blue 4px solid;
}
table table{width:582px;}
table td{border:solid 2px blue;padding:5px;}
table table{border-color:green;width:100%;}
table td table td{border-color:red;}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<table summary="sample" border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td colspan="4" border="1">
<table>
<tbody>
<tr>
<td>5</td>
<td>67</td>
<td>789</td>
<td>8901</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
    • good
    • 0

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

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

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

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

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

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の仕様でそう決まっているからです。

Qtableにtableをネストした場合

<!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で見たときには思ったとおりに表示されるのですが・・・。
どなたか原因が分かる方おられましたら教えてください。

<!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>

...続きを読む

Aベストアンサー

単純に最初のテーブルタグの<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>

単純に最初のテーブルタグの<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{
...続きを読む

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にul,または,olを入れられますか?

<table>
 <tbody>
  <th>くだもの</th>
   <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
   …etcとして
くだもの
・りんご
・みかん
・すいか
としたいのですが、
<table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
HTMLの仕様に反していますでしょうか?

Aベストアンサー

きちんとネストされていれば構いません。
ただ、書かれた例だと
・テーブルを構成する<THEAD>, <TR>タグが無い
・<UL>が閉じていない
というエラーがあるので、それを直せばいいでしょう。

<table>
 <thead>
  <tr><th>くだもの</th></tr>
 </thead>
 <tbody>
   <tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
   :
   :
 </tbody>
</table>

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

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テーブル内の文字サイズを変更したい。

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

Aベストアンサー

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

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

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

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

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

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

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

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

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

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

Aベストアンサー

<select style="width: 200px">

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング