このようにテーブルを入れ子にするのは不可能なのでしょうか?
<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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssで、表示されるテキストによ...
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
中に<table></table>が使えるア...
-
セル内の文字の色とサイズの指定
-
HTMLで文とテーブルの間が空く。
-
Htmlのtd要素の中で半角の空...
-
テーブルの行の高さを指定する...
-
HTMLのテーブルで桁をそろ...
-
テーブルの線を極細にしたい
-
EXCELからhtmlへの変換で罫線が...
-
テーブルの枠が2重線になるので
-
HTMLでアンケートの作り方を教...
-
テーブルの枠線(外内両方)を...
-
ホームページ 表の上の余白を...
-
HTML <td></td>タグ セル内余...
-
文字列が入っているtdを削除せ...
-
テーブルを横に二つ並べて表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
ホームページ 表の上の余白を...
-
テーブルのセルに画像をピッタ...
-
中に<table></table>が使えるア...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
スタイルシートで colspan=3と...
-
テーブルの装飾
-
EXCELのセル内にHTMLタグを含む...
-
tableの要素(tr、td)に一...
-
テーブルの表示がずれます
-
tableでcolspanを使うと次行以...
-
HTMLで文とテーブルの間が空く。
-
値が0なら非表示にしたい
-
テーブルの行の高さを指定する...
おすすめ情報