はじめての親子ハイキングに挑戦!! >>

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

解決済

  • 質問者：kyanasaki
  • 質問日時：
  • 回答数：1件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： frogeye
  • 回答日時：

以下、HTML 4.01での話です。

（XHTMLでもほぼ同じだと思います）

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

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

このように、テーブル内でth，tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。
    • good
    • 4
    • 件
通報する
この回答へのお礼

＞tdの下にはブロック要素が書けるので、divも書ける
やはり、td要素の中にもdivは書くことは問題ありませんよね？
HTML4.01で、td直下にdiv要素を含めるのは正しくない
と噂で聞いたので、そんなわけがないと思い質問しましたが、
すっきりしました。

ほんとうにありがとうございました！

通報する
お礼日時：2006/10/04 17:13

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

Q質問する（無料）

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

ピックアップおすすめ記事

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

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

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

Qhtml の　divとtable　の役割

html の初心者です。
divで箱を作って、画面のレイアウトをしている人が多いようですが、
僕は、tableを使用しています。
tableでほとんど出来ると思うのですは、
divを使う理由は何なのでしょうか。

ご存知の方がいらっしゃられたら教えて下さい。
よろしくお願い致します。

Aベストアンサー

　少し長いですが、初心者は絶対に必要な知識ですから、頑張って呼んでくださいね。

　ます、初心者でしたら必ず仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )を読んでおきましょう。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
　　本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な内容になっていく。
・必要な情報に直接アクセスする。
　　できるだけ素早くシンタクスやセマンティクスに関する情報を得るために、オンライン版の仕様書には次の特徴を持たせた。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［About the HTML 4 Specification (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/about.html#h-1.2 )］より

　沢山の有象無象の情報があふれています。その中から正しい情報を得るのは藁の山から針を探すようなものです。最後は仕様書を読むことになります。
　ここに書かれているように、通読してどこに何が書いてあるかを知っておくこと。あとは必要なときに、詳細目次( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html#toc )や要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/index/elements.html )を利用して直接情報に進んでも良いでしょう。

　あなたの質問に関わる部分は

DIVの項目を読んでみると
　⇒DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )

table
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より

　⇒ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
　などでしょうか？？

★HTMLは、ワープロやDTPとは全く異なるものです。(ここを誤解されている)
　文書を読み解き、その文書を構成する要素(部品)に分解して、それぞれがどのような部品--要素であるかをタグを使ってマークアップするメタ言語です。
　<h1>ここはレベル1の見出し</h1>
　<p>ここはひとつの段落で、<strong>ここは重要</strong>です。</p>
　<blockquote>
　　<p>ここは引用文で</p>
　</blockquote>
　<ol><!-- ここから序列リスト -->
　　<li></li>

というふうに、文書の構造をマークアップして、どのようにプレゼンテーションするかは、全く書きません。
　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　ですから、読み上げソフトは、見出しは太い男声の声で、重要なところは強い言葉で読んでくれますし、検索エンジンにもどこが見出しで、どこが本文でどこが表かが判ります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　その上で、パソコンのディスプレイ用には、この様にプレゼンテーションするかをスタイルシートで指定すれば良いのです。

＞（画面のレイアウトは)tableでほとんど出来ると思うのです
　は全く間違っています。tableの目的は２次元(以上)のデータを表す要素です。あなたは視角メディアのことしか考えていない。

＞divで箱を作って、画面のレイアウトをしている人が多いようですが、
　これも重大な誤りです。!!!---DIVはデザインのためでは決してありません!!!
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　　・・・もしそのように使われていたら、「している人が多いようですが、」のサイトも間違っています。

＞divを使う理由は何なのでしょうか。
　
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　HTML4.01には、実は文書構造を示す要素(タグ)が不足していました。そのためにDIVに関して上記のように書かれていました。
<body>
　<div class="header">
　　<h1>見出し</h1>
　　・・・ここは文書のヘッダ・・・
　　<div class="nav">
　　　ナビゲーション
　　</div>
　</div>
　<div class="section">
　　<p>・・・ここは本文・・</p>
　</div>
　<div class="footer">
　　<p>・・ここはフッタ>/p>
　</div>
</body>
　のようにDIVを使うのが本来の使い方であるべきです。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
★★ところが、これは理解されたとは言いがたく★★

　あなたが、ご存知のように「divで箱を作って、画面のレイアウト」するような使い方がされてきました。!!!!
<div class="contents"><div class="left_box"><div class="main">とかね。見かけたことあるでしょう。

　その反省から、次期HTML5では、文書をよりよく構造化するために、section,article,aside,hgroup,header,footer,nav,figureなどの要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
　そして、DIVは、「他に適当な要素がないときの最後の手段としてのみ使う」ことになります。
　⇒Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-div-element )
　--著者は、 div 要素を、他に適切な要素がないときなど、最後の手段として使うことを、強く推奨する。---

　たとえば、よく引き合いに出すのですが・・
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　のソースは、全くシンプルですが、ブラウザの[表示]メニューから[スタイルシート]に進みスタイルシートを選択すると様々にデザインが変わります。ウィンドウサイズを変化させても追随します。印刷プレビューで見ると印刷用に変わります。この様なことはtableでHTMLが作成されていたら、決して出来ませんね。
　
　

　少し長いですが、初心者は絶対に必要な知識ですから、頑張って呼んでくださいね。

　ます、初心者でしたら必ず仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html#toc )を読んでおきましょう。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
本仕様書は様々な方法で利用できるだろう。
・最初から最後まで通読する。
　　本仕様書は、HTMLに関する一般表現から始まり、末尾に向けて徐々に技術的で特殊な内容になっていく。
・必要な情報に直接アクセスする。
　　できるだけ素早くシンタクス...続きを読む

他の回答も見る

Qtd要素内のdiv要素をセンタリングしたい

いつもお世話になっております。

HTMLのセンタリングで困っております。
どなたか教えていただけないでしょうか。

HTML
<table>
<tr>
<td>
<div><a href="#"></div>
</td>
</tr>
</table>

上記のdivをtd内でセンタリングさせたいです。

どうかよろしくお願いいたします。

Aベストアンサー

結果どうしたいのか不明ですが、
＞div要素をセンタリング
aをセンターリングするのではなく、”div要素”をセンタリングですね？
その例だと、
<td style="padding: 0 100px;">
等で簡単で済みそうですが・・・
見た目同じでも、本来のセンターリングの意味にはならないので以下で。

まずは、貴方のHTMLは間違っています。
<div><a href="#"></div>
この↑divの中身は一体何でしょう？　ここの質問だけの例だとしても適切に書きましょう。
<div><a href="#">例</a></div>

#1の方の回答では、divはセンターリングされません。
div内のインライン要素（文章など）はセンターリングになりますが
ブロック要素は、腐ったブラウザを除いてセンターリングされない・・・
divに罫線（枠のborder）を入れると理解できるでしょう。

箱を移動させる？　物を移動させる？　この違いです。どちらかな？

#2の方のは、〆のHTMLが間違かな・・・

divはブロック要素なので、デフォルトでは幅が100％になります。
幅が100％なのだから、右も左もセンターもありません・・・

|｜大大大大大大｜ ← 幅が大きいと移動できない。
|　　　｜小｜　　　　← 幅が小さいと移動できる。
なので、
td内で、divのボックス自体が遊べるように、
tdの幅よりもdivの幅を小さくするのが第一条件です。
次に、
divの左右を margin:auto; にする。
例：
<td style="width:200px;">
<div style="width:100px; margin:auto; border:1px solid red;">
<a href="">例</a>
</div>
</td>

これで、中身のインライン要素が左（デフォルトなら）のままで、
divだけがセンターに配置されます。

外部CSSなら（数値は適当）
td{ width:200px;}
td div{ width:100px; margin:auto;}


因みに、上記ができなければ、
過去モードの可能性があるのでハックなどの別途対応が必要です・・・
<td style="width:200px; text-align:center;">
<div style="width:100px; margin:auto; text-align:left; border:1px solid red;">
<a href="">例</a>
</div>
</td>

あとは応用とか、「CSS センターリング」で検索するとか。

結果どうしたいのか不明ですが、
＞div要素をセンタリング
aをセンターリングするのではなく、”div要素”をセンタリングですね？
その例だと、
<td style="padding: 0 100px;">
等で簡単で済みそうですが・・・
見た目同じでも、本来のセンターリングの意味にはならないので以下で。

まずは、貴方のHTMLは間違っています。
<div><a href="#"></div>
この↑divの中身は一体何でしょう？　ここの質問だけの例だとしても適切に書きましょう。
<div><a href="#">例</a></div>

#1の方の回答では、divはセンターリングさ...続きを読む

他の回答も見る

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>

他の回答も見る

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>　

他の回答も見る

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

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

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

Aベストアンサー

<select style="width: 200px">

他の回答も見る

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の方も修正する方法でもよけ...続きを読む

他の回答も見る

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか？
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、３つ以上なら
別途function化したほうが、可読性が高くなると
思います。

他の回答も見る

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

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

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>
：
：
<table>
<tr>
<th class="about">右が１へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト１</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト２</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">右が１へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト１</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト２</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テーブル内の文字サイズを変更したい。

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テーブル内の文字列を改行させたい

<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

他の回答も見る
ページトップページトップ

Q質問する（無料）

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

人気Q&Aランキング

おすすめ情報