- ベストアンサー
テーブルの入れ子について
- テーブルを入れ子にすることは不可能ですか？
- 設定しても指定したセルの幅にならない問題があります。
- colspanしているセル全体にテーブルを配置したいですが、間違いがあるようです。
- みんなの回答 （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{ /*子供*/ ・・どれでもよいけど、詳細度で他と区別したけりゃ適当なものを
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
間違われたらまずいので・・ 他の方のコメントにある <tr colspan="4">は間違いです。 trは、colspanというattributeはもてません。 Tables in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#edef-TR ) ブラウザが不完全な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にするときは必須
- abacabu
- ベストアンサー率37% (250/663)
趣味でWEBページを作成してる30代男です。 補足要求というか質問の書き間違いか？ 下図のなかのcolspanを設定しているタグがおかしいです。 何故そこで<td>？？ <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> ←これにむしろcolspan="4"とするべき、これと↓２へ <td colspan="4">←いらない <table> ←当然1個のテーブルに複数の<table>↓ <tr> ←これも要らん 入れ子はダメ!! <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> ←２ これが有ればよい </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>をくくれません。 まぁ強い弱いとお考えください。 記述的には何ら問題ないのですが使っている タグに問題があったというだけです。
お礼
細かい点まで書いていただいてありがとうございます。 どうしてもテーブルの入れ子にしたい状況に ありました。
- Tacosan
- ベストアンサー率23% (3656/15482)
? ぱっと見た感じだと「colspanしているセル全体にテーブルを置きたい」という希望はかなっていると思うんだが.... どういう形を期待しているんだろ.
お礼
ありがとうございます。 ORUKA1951さんのご回答で、無事解決しそうな問題にハマっていました。
- yambejp
- ベストアンサー率51% (3827/7415)
どういう癖かわかりませんが、全角スペースでインデントするのをやめれば ご提示のソースでも希望のとおりなるんじゃないでしょうか？
補足
お見苦しい質問文で申し訳ありません…。 こちらのサイトに転記する際、全角インデントになってしまいました。 本当の癖は、まったくインデントなしです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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>
お礼
何度も詳しくありがとうございます。 tbodyのタグはまったく使っていませんでした。 今後は使うようにします。 先ほどのご回答でなんとか解決しそうです。 本当にありがとうございます。