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

以下、HTML 4.01での話です。（XHTMLでもほぼ同じだと思います） tableタグ直下に書けるのは、caption，col，colgroup，head，tfoot，tbodyと定義されています。特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。 tr直下にはth，tdが書けることになっています（それ以外は不可）。 th，tdの下にはブロック要素が書けるので、divも書けます。このように、テーブル内でth，tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

テーブルタグの中にdivを含めてはダメ？ -テーブルタグの中にdiv要素を- HTML・CSS

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>　

他の回答も見る

<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

他の回答も見る