このようにテーブルを入れ子にするのは不可能なのでしょうか?
<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しているセル全体にテーブルを置きたいのですが・・・。
間違いを教えて下さい。
よろしくお願いします。
No.4ベストアンサー
- 回答日時:
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{ /*子供*/
・・どれでもよいけど、詳細度で他と区別したけりゃ適当なものを
No.6
- 回答日時:
間違われたらまずいので・・
他の方のコメントにある
<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にするときは必須
何度も詳しくありがとうございます。
tbodyのタグはまったく使っていませんでした。
今後は使うようにします。
先ほどのご回答でなんとか解決しそうです。
本当にありがとうございます。
No.5
- 回答日時:
趣味で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>をくくれません。
まぁ強い弱いとお考えください。
記述的には何ら問題ないのですが使っている
タグに問題があったというだけです。
No.1
- 回答日時:
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- Perl PERL 1 2022/04/26 14:15
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルを2つ横に並べる
-
cssで、表示されるテキストによ...
-
TRタグの余白をcssで設定するには
-
tableタグ内で、空白セルでも罫...
-
テーブルのヘッダとボディの幅...
-
nth-childをtrとtdに同時に使う...
-
<table>の<thead>をposition:fi...
-
テーブルの行の高さを指定する...
-
テーブルの任意の列を非表示に...
-
中に<table></table>が使えるア...
-
tdなどの閉じタグは省略しても...
-
テーブルのセルに画像をピッタ...
-
テーブルの外側の線を消す
-
tableの要素(tr、td)に一...
-
テーブルの装飾
-
HTML <td></td>タグ セル内余...
-
width指定したTDでwhite-space:...
-
テーブルをスクロールさせると...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
テーブルの任意の列を非表示に...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルの表示がずれます
-
HTML <td></td>タグ セル内余...
-
HTMLのテーブルで桁をそろ...
-
中に<table></table>が使えるア...
-
スタイルシートで colspan=3と...
-
htmlのtable内に画像
-
ホームページ 表の上の余白を...
-
テーブルタグのセルの幅の一部...
-
テーブルの行の高さを指定する...
-
CSSだけで<table>の<td>や<tr>...
-
EXCELからhtmlへの変換で罫線が...
おすすめ情報