表とリスト（ulとtable）の違いについて教えてください。

表とリスト（ulとtable）の違いについて教えてください。

HTMLでは、ulがリストで、tableが表を作るときに使用します。
リストとは、お問い合わせリストや、相互リンクリストなど、
一覧のような使い方もします。
表も同じように、アクセス結果表や、売上飲料水ランク表など、
これも、一覧のような使い方をします。
（言葉上での解釈）

HTML上で出来ないことは、ulの方は、tableで言うtdタグがなく、
一行一単語という感じですよね。
だけどこれは、レイアウト上の問題であって、
レイアウトのためにタグを選択するのは間違っています。

タグを正しく使うために、
表とリストの違い、つまり、ulとtableの違いを知らないといけません。

参考になればとも思っているので、
正しい答えがわからなくても、
「僕はこう思ってる」や
「僕はこう使い分けてる」というのでも教えてください。

No.7 ベストアンサー 回答者： think49 回答日時： 2010/07/13 18:53

#6 の続きです。

■<dl> は順番を意識する場合がある

次のようなフォームを時々見かけます

------
<form action="test.php">
　<table summary="フォーム サンプル">
　　<tbody>
　　　<tr><th><label for="Name">名前</label></th><td><input type="text" name="Name" id="Name" /></td></tr>
　　　<tr><th><label for="Tel">電話番号</label></th><td><input type="text" name="Tel" id="Tel" /></td></tr>
　　　<tr><th><label for="Address">住所</label></th><td><input type="text" name="Address" id="Address" /></td></tr>
　　　<tr><th><label for="Mail">メールアドレス</label></th><td><input type="text" name="Mail" id="Mail" /></td></tr>
　　　<tr><td colspan="2"><input type="submit" name="submit" value="送信" /></td></tr>
　　</tbody>
　</table>
</form>
------

<thead> がないのも気になりますが、それ以上に気になるのは「ソートしても問題ないか？」という点です。
この場合は順番に意味はなく、例えランダムソートしても問題なく解釈は出来ます。
ですが、ランダムソートすれば、直感的でないUIになるのも確かです。
フォームにおいて「名前」から始めるのは慣習的なものですが、そうすることに意義はあると思います。

勿論、フォームが <table> で作られているからといって、ランダムソートする人はまずいないでしょう。
ですが、「<table> がソートしても問題ない論理構造」なら、ソートして問題が出る構造な時点で「それは <table> でマークアップすべき構造ではなかった」ということになります。

■まとめ
ソートする意図があれば、<table> を使い、それ以外は <ul>, <ol>, <dl> を使い分けます。
ヘッダが不要な <table> なら、やはり、<dl> を使いますね。

以上。
偏った考え方だと思いますが、参考になれば…。

この回答へのお礼

ありがとうございいます。
納得できます。
ソートを意識して考えたことなかったです＞＜

順番を大事にするフォームを作る場合はolですね。

あれ？
っと言うことは、
お名前　＿＿＿＿＿
こういうフォームを作った場合、
項目名（お名前）とフォーム（＿＿＿＿＿）これの区別を付けることができなくなりますね＞＜
dlだと区別を付けられるけど、
順番を意識してはいけないものになってしまうしｗ

これが今のHTMLの不十分な所ですかね？
これに適したタグが存在しないということですかね？

tableタグのthの説明を確認してみましたが、
thead内で使うのと、tbody内で、カラムで使うのとでは違ってたみたいです。
聞けば当然だと思いましたがｗ
tbody内だと、定義になりますね。

tableタグは、
ヘッダーが有り、定義が有り、順番を気にしてはいけないもの。
dlタグは、
ヘッダーが無く、定義が有り、順番を気にしてはいけないもの。
ulタグは、
ヘッダーが無く、定義が無く、順番を気にしてはいけないもの。
olタグは、
ヘッダーが無く、定義が無く、順番を気にしないといけないもの。

定義又はヘッダーがあって、順番を気にするものが無いですね＞＜

お礼日時：2010/07/13 19:53

No.14 回答者： taloo 回答日時： 2010/07/17 12:30

すみません、あまりいろいろ考えると訳がわからなくなるので、

（私の悪い癖です）
No.4、5、6くらいまでの内容で考えておいた方が良いかも、、、

この回答へのお礼

自分の中では今のところは、
tableは、ヘッダーが有り、定義が有り、順番は意識しない
ulは、ヘッダーが無く、定義が無く、順番は意識しない
olは、ヘッダーが無く、定義が無く、順番は意識する
dlは、ヘッダーが無く、定義が有り、順番は意識する
こういう構造を作るときに使おうということになってます。
結局「見た目」で選ぶ感じかなという事ですねｗ
「見た目」ではなくて「文章のまとめ方」という言葉で逃げましょうかｗ

本来の問題ではない、フォームについては、
参考にして、また調べてみようと思います。

お礼日時：2010/07/20 10:51

No.13 回答者： taloo 回答日時： 2010/07/17 11:14

> No.11お礼

> 開発者が思った見た目にしやすいから、そのタグを使うというのは良くないと思います。

> No.12
> 見た目はCSSで如何様にでもなるので問題ない、ってことじゃないでしょうか？

「スタイルシートに対応しているブラウザ」であればスタイルシートで見た目を変更できますが、
特にXHTMLでは、スタイルシートに対応していないブラウザをも考慮すべきだと思いますが、いかがでしょうか。

Ajaxが標準になってるこのご時世にテキストブラウザや音声ブラウザは時代錯誤甚だしいかもしれませんが。
ただ、そこまで言ってしまうと、究極的には「XMLで作ればタグを自由に作れるからHTMLは不要だ」となりそうな気がします。


データベースの一種ですが、
EXCELやACCESSなどの表示方法ではなく、カードタイプのものを模しています。
二次元データを一次元で表現してみた、という感じで考えていただければと思います。
基本的にはNo.2の通り使い分けていますが、
> No.11
> 「本人が定義と思えば定義、見出しと思えば見出し」でいいと思いますけどね。
<table>と<ul>は表現次第でどちらでも使えるんじゃないか、と言うことを言いたいだけです。


<h1>参加者一覧</h1>
<p>
<dfn>氏名</dfn><br>
<dfn>年齢</dfn><br>
<dfn>出身</dfn>
</p>
<ul>
<li>近藤勇
　<ul>
　<li>25
　<li>北海道
　</ul>
<li>
<li>土方歳三
　<ul>
　<li>22
　<li>青森県
　</ul>
<li>
<li>沖田総司
　<ul>
　<li>20
　<li>岩手県
　</ul>
<li>


入れ子の<ul>は、<dfn>を消して<dl>でも出来ますが、

（抜粋）
<dt>氏名</dt>
<dd>近藤勇</dd>
<dt>年齢</dt>
<dd>25</dd>
<dt>出身</dt>
<dd>北海道</dd>

<dt>氏名</dt>
<dd>土方歳三</dd>

<dt>氏名</dt>
<dd>沖田総司</dd>


これを音声ブラウザで聞いたときに<dt>の部分が連呼されることになって、かなり鬱陶しいと思いますので、
<ul>にすることで<table>とほぼ同じ表現が出来るようになると思います。

この回答へのお礼

音声ブラウザや点字ブラウザなど、
ブラウザにはたくさんの種類があります。
マークアップをしっかりしていないと、
それらのブラウザが適切に処理ができなくなり、
目が見えない人が、「やっぱりこのページも見えないのか・・・」
という風に思うと思います。
このマークアップの意味は、ブラウザが知っている必要があるので、
XMLで自由に作れるようにすると、
ブラウザが解釈のしようが無く、
マークアップとしての意味がなくなります。
それは、1ページを1枚の画像でWEBを作っているのと同じで、
文章を書く意味もなくなってきます。

HTMLは意味を、
CSSは見た目を、
javascript(ajax)は動きを処理するもので、
それは、他の二つに影響を与える作り方は良くないと思います。
他の二つに影響を与えてしまうと、
talooさんが言っている通り、
ajaxを使っているページを音声ブラウザで聞くとおかしなことになります。

実は音声ブラウザなどは使ったこと無いので、
dtが連呼されること(読まれる順番？)もしりませんでしたｗ
一度見てみ無いといけないですね＞＜

お礼日時：2010/07/20 10:45

No.12 回答者： think49 回答日時： 2010/07/15 17:42

#6, 7, 8, 9, 10 です。

確かに、これは「日本語」の問題ですね。

88suzuran88さんは「HTML = 論理構造」という考えに拘っておられるようですが、現実にはそれだけでマークアップできません。

Web制作には HTML, CSS, JavaScript, PHP... と様々な技術が使われていて、それらの概念に沿うようにバランス良く作ります。
id属性をつければCSSではIDセレクタでスタイルをつけ、JavaScriptでは getElementById() で要素ノードを得ます。
なので、それらが効率よく機能するように考えることもありますし、ユーザビリティに配慮してJavaScript,CSS無効でも閲覧できるようにしたりします。

そうした考えを全てひっくるめて私は <dl>, <ul>, <ol>, <table> の中から適切なものを選択します。

---

#10 で私は ul>li でマークアップした例を出しましたが、デフォルトスタイルシートレベルで見ると、多分、ul要素は「文章のリスト」だったのですよね。
私は単純に「リスト」と認識していて、それが「画像のリスト」であっても「コンテンツのリスト」であっても問題ないと考えました。
論理構造レベルでは正しいと今でも思っていますが、ブラウザを制作した人にとっては意図した使い方ではないのかもしれません。
あるいは、HTML を規定した人々の意図通りではなかったのかもしれません。
そういう考えも、いろいろな視点からみて生まれるものだと思います。

---

また、一口に論理構造といっても、そのHTML文書の中で確立された論理構造があるだけで統一された概念があるわけではないと思います。
Webページの数だけ論理構造があるので、他サイトのソースをみると制作者の考え方(論理構造)が見えてきて参考になることもあります。

つまり、それを「表」と捉えれば <table> でマークアップすればいいですし、「定義リスト」と捉えれば <dl> でマークアップすればいいのではないでしょうか。
「では、どういうコンテンツは表なのか？」というご質問なら、talooさんが指摘されたように日本語の質問ですね。

---

できれば、具体例を出してください。
このままでは、あまりにも抽象論すぎますし、私の具体例は尽きました。
「HTML = 論理構造」は正しいのですが、それをどう生かすかは人それぞれとしか言い様がないです。

また、抽象的な質問には抽象的な回答がつきやすい傾向があります。
私は抽象論が好きではないので出来るだけ具体的に書きますが、質問が抽象的だと回答するのに結構苦労します。

---

余計なこともしれませんが、#11 で talooさんは「見た目」に言及されていないように読めます。

> 「テキスト」「画像」しか書かれていないので、この質問文だけでは<table>でも<dl>でも<ul>や<ol>でも、どれでも使えそうです。
> ただ、<img>を横に並べるのが簡単そうですから、<table>を選びましたけどね。

<table>, <dl>, <ul>, <ol> のいずれでマークアップしても問題ないから、扱いやすい <table> を選択した。
見た目はCSSで如何様にでもなるので問題ない、ってことじゃないでしょうか？

---

>> #11 (talooさん)

> 順位表などなら、名前でソート、順位でソート、などと「ソートが可能な<ol>/<ul>」
こういうことでしょうか？

<p>名前で昇順ソート</p>
<ol>
　<li>Aさん / 3位 </li>
　<li>Bさん / 1位 </li>
　<li>Cさん / 2位 </li>
</ol>
<p>順位で昇順ソート</p>
<ol>
　<li>1位 / Bさん</li>
　<li>2位 / Cさん</li>
　<li>3位 / Aさん</li>
</ol>

なるほど。確かにソートできますね。
[名前] や [順位] を固定幅にしないと <table> と同じような一覧性を得られないのが個人的には気になりますが、その辺は好みかも。

この回答へのお礼

テーブルタグと、各リストタグは、
pタグとdivタグのように、同じ機能だと思っていましたが、
theadの中のthとtbodyの中のthでは意味が違うことを知り、
divとspanのように、機能自体が違うことがわかりました。
見た目を考慮しないと言ってましたが、
文章のまとめ方で意味も変わり、
そのまとめ方で、テーブルを選ぶかリストを選ぶかという考えになってます。

確かに日本語というか文章のまとめ方の問題ですね。
表にするのか、定義にするのか・・・

もともとの考えは、ulとtableの違いは、複数カラムに対応しているかどうかの違いで、
これは、CSSでどうにでもなることなので、このタグの違いは無いと捉えてました。
なので、こんな質問をしてしまいました。

ただ、いろいろな使い方のアイデアが出て、
もっと聞きたいと思ったので、解決にしなかっただけです＞＜
疑問はまだありますが、ほぼだいじょうぶかなという感じです。

お礼日時：2010/07/20 10:36

No.11 回答者： taloo 回答日時： 2010/07/15 01:42

No.2です。

これら「日本語の問題」は、HTMLよりも国語カテゴリーで国語または日本語学の専門家に質問されるのが良いと思います。
HTMLでも、英訳や和訳でもそうなんですが、とにかく国語（日本語）が出来なければ、
翻訳したり、「ここは名詞、ここは動詞」「ここは表題、ここは定義」などという目印を付けることは出来ません。

マークアップ（どの部分がどの意味を持っているかの目印を付ける）する前に、
日本語で書いてみて、どの意味を持っているか、と言うのを考えることが重要だと思います。


> No.2 お礼
> ただ、定義と見出し、解説と内容の違いも曖昧ですねｗ

定義と解説は、辞書のような説明の仕方を想像してもらえればいいと思います。

国語の読み取りが赤点ぎりぎりだった私の考えからすれば、
「本人が定義と思えば定義、見出しと思えば見出し」でいいと思いますけどね。
数十人の日本語学者に聞いて、全員が同じ答えを出したなら、それが答えだと思いますが、そんなことはまずあり得ないでしょう。。。（という「赤点ぎりぎりの人」の言い訳）

No.2を回答する前にこの質問にも答えましたが、
> http://oshiete.nikkeibp.co.jp/qa6032403.html
「テキスト」「画像」しか書かれていないので、この質問文だけでは<table>でも<dl>でも<ul>や<ol>でも、どれでも使えそうです。
ただ、<img>を横に並べるのが簡単そうですから、<table>を選びましたけどね。


> No.7お礼

<h2>
<ul>
<li>ヘッダ
　<ul>
　<li>コンテンツ
　<li>コンテンツ
　</ul>
</li>
<li>ヘッダ
　<ul>
　<li>コンテンツ
　<li>コンテンツ
　</ul>
</li>
</ul>

<ul>は入れ子に出来ますので、ヘッダ付き箇条書きも可能です。

> No.8
さらに混乱させる考え方（反論）ですが、
順位表などなら、名前でソート、順位でソート、などと「ソートが可能な<ol>/<ul>」になるんじゃないかと思います。

> No.9
<div>や<span>が非推奨にならないのは、HTML/XHTMLタグの全てのタグの定義に当てはまらない考え方が存在するからです。
そういうときに<div>や<span>を使用するための物ですので、これらを非推奨や削除することは出来ません。
そして、<article>は<div>に変わる物であって、<table>や<ul>などに変わる物ではありません。

この回答へのお礼

＞これら「日本語の問題」は、HTMLよりも国語カテゴリーで
＞国語または日本語学の専門家に質問されるのが良いと思います。
実はこれも考えましたｗ
まずはリストと表の違いを聞こうかとｗ

カテゴリーを複数設定出来ればよかったんですけどね＞＜

作る文章の日本語も理解しないといけないですね。

＞本人が定義と思えば定義、見出しと思えば見出し
確かにそうですね。
みんな同じ解釈が出来れば、
同じ内容の、違う書き方の本が出たりはしないですし。
ありがとうございます。
参考にします。



ん～。
開発者が思った見た目にしやすいから、そのタグを使うというのは良くないと思います。
究極を言えば、これって、
HTMLではなくて画像でもいいじゃんってなりますよね。
ブラウザに依存しないし。

googleが画像内の文字も認識するようにしたと言っているので、
いずれ、そうなることもあり得るとおもいますけど＞＜

お礼日時：2010/07/15 15:57

No.10 回答者： think49 回答日時： 2010/07/14 19:22

#6, 7, 8, 9 です。

> divは推奨しないタグになっているのに、
> spanは推奨しないと書いていないのには納得いきませんでしたｗ
divやspanを非推奨にすべき、って考えはわかります。
最も、spanを非推奨にしなかったのは、spanでないと表現できない論理構造があるからなんでしょうね…。

少し話が逸れますが、私は <div> を使うべきか <li> を使うべきか悩んだことがあります。
私は文章を括るブロックレベル要素を <ul>, <li> で定義しました。

-------
<!-- HTML4.01 Strict -->
<style type="text/css"><!--
ul, li { display: block; }
--></style>
</head>
<body>
<ul id="body">
　<li>
　　<h2>見出し1</h2>
　　<p>内容1</p>
　</li>
　<li>
　　<h2>見出し2</h2>
　　<p>内容3</p>
　</li>
　<li>
　　<h2>見出し3</h2>
　　<p>内容3</p>
　</li>
</ul>
-------

<div> のようなグループ化の意味しかない要素をマークアップするのは嫌でしたし、同じレベルでブロックを並べるなら「順不同リスト」で問題ないと考えました。
これは上手くいったように見えますが、制作者スタイルシートを無効にすると多くのブラウザで「リストマーカー」が出てきます。

HTML5にはarticle要素があるので、以下のように書けます。

-------
<article>
　<header><h2>見出し1</h2></header>
　<p>内容1</p>
</article>
<article>
　<header><h2>見出し2</h2></header>
　<p>内容2</p>
</article>
<article>
　<header><h2>見出し2</h2></header>
　<p>内容2</p>
</article>
-------

これをHTML4.01で書き直すと、以下のように。

-------
<div class="article">
　<h2 class="header">見出し1</h2>
　<p>内容1</p>
</div>
<div class="article">
　<h2 class="header">見出し2</h2>
　<p>内容2</p>
</div>
<div class="article">
　<h2 class="header">見出し3</h2>
　<p>内容2</p>
</div>
------

同じclass属性値を並べるのは美しくない。
今でもそう思いますが、少し考え方を変えました。

id, class は該当要素がない時に論理構造を指定するのに近い気がします。
article要素がないから、class="article" を指定するのはまさにそれです。
よく「class="red" のようにデザインを連想する名前をつけてはいけない」といわれますが、最終的には論理構造を表す名前をつけるのではないでしょうか。
そういう意味では、div要素やspan要素にも意義があるかもしれません。

この回答へのお礼

>spanについて。
同じくそう思ってましたｗ
HTMLがまだ不完全ということですね＞＜
けど考えてみたんですけど、
重要を表すstrong、強調を表すem、、、
それ以外に必要か？
って。
それ以外に必要だとすると、、、何も思いつきませんでした。。。＞＜

divは、header、footer、section、articleで、ほぼ出揃ったかなという感じがしますね。
これも、それ以外に必要なものが思いつかないです。

＞少し話が逸れますが、私は <div> を使うべきか <li> を使うべきか悩んだことがあります。
ん～。
良いとも悪いとも思いますねｗ
これは、tableをレイアウトに使うのと同じ感じがします。
なので、やるべきではないとも思いますが、
確かに、章をリスト化するという意味では、あっているようにも思いますね。
さらに、物語を順番に書くには、olも適切のように見えますね。
すごい発見ですｗ
ありがとうございますｗ

＞class、idについて
classはグループ化というか組織化というか。そんな感じで、
idは、個を表す、固有名詞みたいなものですね。
HTMLではデザインを考慮すべきではないと考えているので、
このclassやidも、デザインのために使用してはいけないと思ってます。
まぁここは、まだそんなにこだわってませんがｗ
ここにこだわると、かなり難しくなりそうですよね＞＜

これを指定することで、divやspanの力が発揮するようなことは、
HTML5の説明でも書いてました。
しかし、マークアップとしての力ではありませんよね。
全てのブラウザがclassの値のarticleを見て、これが章だと判断していないと思うし。
HTML5の説明でも、ブラウザの仕様でこうとは書いてなかったと思うので。

お礼日時：2010/07/15 15:55

No.9 回答者： think49 回答日時： 2010/07/14 19:20

#6, 7, 8 です。

> 「見る人次第」というのは少し納得いきません。
反応したのは、以下の部分でしょうか？

------
同じ行内にあるセルなら、<th> と <td> で相関関係は出来ます。
ただ、どのような関係性であるかは、閲覧者が判断することになりますね。
------

<dl> の「定義」と「説明」のような関係性であることは、共通認識と思っていいと思います。
ただ、それを <table> として見たときには省略された情報(ヘッダ)がありますよね？
#7 は以下のように書くことも可能です。

<form action="test.php">
　<table summary="フォーム サンプル">
　　<thead><tr><th>ラベル</th><th>フォームコントロール</th></tr></thead>
　　<tbody>
　　　<tr><th><label for="Name">名前</label></th><td><input type="text" name="Name" id="Name" /></td></tr>
　　　<tr><th><label for="Tel">電話番号</label></th><td><input type="text" name="Tel" id="Tel" /></td></tr>
　　　<tr><th><label for="Address">住所</label></th><td><input type="text" name="Address" id="Address" /></td></tr>
　　　<tr><th><label for="Mail">メールアドレス</label></th><td><input type="text" name="Mail" id="Mail" /></td></tr>
　　　<tr><td colspan="2"><input type="submit" name="submit" value="送信" /></td></tr>
　　</tbody>
　</table>
</form>

ここで私は項目名を [ラベル] と [フォームコントロール] としました。
しかし、#7 のように <thead> を省略したなら、別の項目名を連想する人もいるかもしれません。
そういった意味での「見る人次第」です。
これが <dl> なら別の意味での「見る人次第」になりますが、<table> のような論理的にマークアップ可能な要素でわざわざ「見る人次第」にする必要はないと個人的には思います。

> HTMLはマークアップする言語で、見た目を整えるものでは無いです。
「HTMLが論理構造を定義するもの」っていうのは仰るとおりです。

ただ、人がその文書を見るときに論理構造だけでは見ないですよね？
見た目はCSSで定義しますが、CSSを完全に無効化して閲覧する人はいないと思います。
スタイルシートには

・制作者スタイルシート
・ユーザスタイルシート
・デフォルトスタイルシート

の3つがありますが、制作者サイドでコントロールできるのは「制作者スタイルシート」だけ。
そして、ユーザが制作者スタイルシートを無効に設定した時、「デフォルトスタイルシートでどのように表示されるか」に配慮があってもいい、と私は思います。
ユーザスタイルシートは各自の好みなので想像しようがありませんが、デフォルトスタイルシートは概ねデザインに統一感があります。

・<table> は、セル周りに罫線が表示され、<th> は太字にデザインされます。
・<dl> は <dt> を太字にし、<dd> はインデントされます。

両者のデザインを踏まえて、どちらが適切かを考えてみよう、ってことです。
これは論理構造ではなく、ユーザビリティに関わる考え方なので、デザインに目を向けても問題ないと思います。

値わりあて，カスケード処理，継承 - CSS2リファレンス
http://hp.vector.co.jp/authors/VA022006/css/casc …

ただ、その「見た目」をどのように捉えるかは人それぞれだとも思います。
制作者側が良いと思った(デフォルトスタイルシートの)デザインでも、ある訪問者は良くないと思うかもしれない。
それぐらい微妙な線の議論をしているのではないでしょうか。
私が主張するソートに対する考え方もマイノリティだと感じていますし、反論があってもおかしくないと思います。
(というか、ソートも所詮は「見た目」の話であって、順不同である限りランダムソートしても論理構造は変わりません。)

(...次の記事に続きます...)

この回答へのお礼

>見る人次第
あー。誤解してました。
確かに、tbodyのthに、「半角英数で入力してください」とも書いていれば、
ラベルではなく、説明になることもありますね。
この「お名前」も何を入力するかの説明とも受け取れますし。

＞CSSの件
閲覧者が勝手にスタイルシートを作ってデザインを変えてしまうということは、
その閲覧者は、そのデザインが見やすいからだと思います。

マークアップを正しく設定していれば、
見出しが下に、本文が上に設定されるなどの間違いは起こらないと思います。
マークアップを正しく設定していなければ、
例えば、見出しをdivで、本文もdivで設定してしまうと、
見出しなのか、本文なのかがわからず、
ユーザスタイルシートの設定のしようがありませんよね。
そのためにも、マークアップをちゃんとし、
マークアップ時にデザインを考慮しないようにするべきだと思います。
マークアップ時にデザインを考慮してしまうと、
ユーザスタイルシートで出来ることが限定されてしまう場合が多いです。

お礼日時：2010/07/15 15:54

No.8 回答者： think49 回答日時： 2010/07/13 20:55

#6, 7 です。

> 項目名（お名前）とフォーム（＿＿＿＿＿）これの区別を付けることができなくなりますね＞＜
同じ行内にあるセルなら、<th> と <td> で相関関係は出来ます。
ただ、どのような関係性であるかは、閲覧者が判断することになりますね。
明示的に項目名を決められる <table> なのに省略しちゃっているので、個人的には勿体ないと思います。
(HTMLに詳しい人なら、ソースを見て [ラベル] と [フォームコントロール] の関係であることは分かりますが、ソースを見ないと関係性が分からないのもあれですし。まあ、ある程度は見た目から察してもらえるでしょうけれど…。)

> tableタグのthの説明を確認してみましたが、
> thead内で使うのと、tbody内で、カラムで使うのとでは違ってたみたいです。
これかな？

th 要素 - テーブルデータ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
http://www.html5.jp/tag/elements/th.html

#7 の <th> は右方向のセルと結びつけられますね。

> dlタグは、
> ヘッダーが無く、定義が有り、順番を気にしてはいけないもの。
確かにそうです。
本質的には、定義リストも順不同である必要があります。

ただ、#7 は順不同でも論理構造的に間違っているわけではないので、難しいところですね。(全くのランダムでは困るのですが…。)
かといって、序列リスト (ol) にしてリスト番号をつける程でもないので、「順序が整えばベター」というやや弱めの順番があるような感じです。
論理構造(HTML)としてみれば、間違った考え方は少ないので、最終的には個人の判断に委ねられるのかもしれません。

「<table> は <thead> 必須」というのも個人的な考え方ではありますが、「<table> の一覧性(視認性)」のメリットを考えると、やはり、入れた方がいい気がします。
「<thead> を省略する」ということは「2つのセルの関係性の判断は閲覧者に委ねられる」わけですが、その考え方ならdl要素の方が適しているように思えます。
「<table> だけで表現可能な論理構造」を追求して、「<thead> は省略すべきではない」という結論に落ち着いています。

# --- ここから先は、私の個人的な感想です。
私は「<table> はソートを積極的に使うデータ一覧」の意識が強いのかもしれません。
たった2列だとソートしがいがなく、わざわざ <table> にする意味がない気がします。
「それなら、計算コストが安いdl要素がベター」ってスタンスになるわけです。
……こっちの考え方の方が分かりやすかったかな？

この回答へのお礼

「見る人次第」というのは少し納得いきません。
HTMLはマークアップする言語で、
見た目を整えるものでは無いです。
HTMLを見て、ブラウザが、適切に見た目を整えるものなので、
つまり、HTMLを適切に書いて、見る人が区別できないということは、
ブラウザもまだ完全ではないということですね。
HTMLを書く人は見た目を意識することはなく、
ブラウザが作ったデザインに＋アルファする場合は、
CSSという感じなので。

フォームをtableで作る場合は、thとtdで出来ますが、
この場合、順番を意識しないものになります。
「お名前」を始めに書いて欲しいという場合は、tableではなくてolが適切で、
この場合、項目名とフォームの区別が出来ないなということでした。
総合的に見ると、tableの方が適切だったりするかもしれませんね＞＜

thについて、同じところで確認しましたｗ
他の要素についても使ってますがｗ
もう最近はここですねｗ
余談ですけど、このサイトの説明で、
divは推奨しないタグになっているのに、
spanは推奨しないと書いていないのには納得いきませんでしたｗ
どちらも意味のないタグとは書いてましたがｗ

そうですね。
theadが無く、thとtdだけなら、dtとddに限りなく近くなりますね。
これからtableにはtheadを、必ず書くようにしますｗ
これはこの質問で勉強になりましたね。

＞たった2列だとソートしがいがなく、わざわざ <table> にする意味がない気がします。
少しわかりにくかったですｗ
ソートを積極的に使うというのは、
閲覧者が並び替えを自由にできるので、
つまり、順番は意識しないデータという事なんですね。
たしかに、tableでのソートは見たことありますが、dlでは無いですね。
2列だとソートしてもほとんど変わらない感じがしますし。
ありがとうございます。

お礼日時：2010/07/14 14:16

No.6 回答者： think49 回答日時： 2010/07/13 18:51

■<table> はソートしても意味が通るように

私は <table> を「Excelの表」のようなものだと思っています。
基本的にExcelで使われるような表を想定していますが、私はExcelを以下のルールで使用しています。

----
◎ソートしても意味が通るようにしなければならない
　・ヘッダ ([列名] または [行名]) をつけなければならない
　・順番に意味を持たせてはならない (必要なら、[データNo.] の列をつけて、ソートで元の順番に戻せるように)
　・[セルの結合] を使ってはならない (ソートした時に視認しづらい)
・ヘッダとボディは明確に区別できるデザインでなければならない
----

ソート可能なのがExcelの最大のメリットだと感じているので、ソートするのに不向きな機能はとことん制限しています。

■「<dt> と <dd>」「<th> と <td>」
よく似ているように感じるかもしれませんが、両者は明確に区別できます。

------------
<dl>
　<dt>果物</dt>
　<dd>みかん</dd>
　<dd>りんご</dd>
　<dd>ぶどう</dd>
　<dt>穀物</dt>
　<dd>米</dd>
　<dd>パン</dd>
　<dd>パスタ</dd>
</dl>

<table summary="食べ物リスト">
　<thead>
　　<tr><th>分類</th><th>食べ物</th></tr>
　</thead>
　<tbody>
　　<tr><td>果物</td><td>みかん</td></tr>
　　<tr><td>果物</td><td>りんご</td></tr>
　　<tr><td>果物</td><td>ぶどう</td></tr>
　　<tr><td>穀物</td><td>米</td></tr>
　　<tr><td>穀物</td><td>パン</td></tr>
　　<tr><td>穀物</td><td>パスタ</td></tr>
　</tbody>
</table>
------------

<table> は「果物」のセルが複数あっても問題ありませんが、<dl> で同一の定義が並んでいれば論理構造が破綻してしまいます。
また、<thead> の存在も無視できません。
HTML4.01, (X)HTML5 において <thead> は必須ではありませんが、私はソートしても問題ないように必ずつけていることにしています。

(...文字数制限につき、次の記事に続きます...)

この回答への補足

お礼、ミスしました＞＜
他のと混ざってしまいましたm(__)m

補足日時：2010/07/13 19:48

この回答へのお礼

そうですね、1カラムのtableもありそうですね。
この使い方も納得出来ます。
ありがとうございます。
今、疲れているせいか、
ここまで考えながら作ると思うと、
頭が爆発しそうですねｗ

tableとdlの例は分かりやすいですね。
確かに違いますね。
ありがとうございます。

tableタグ、存在しない時代が会ったんですねД
昔はかなり制限が会ったんですね＞＜
その当時も、SEOがあったりしてたんですかね？
あと、構文を気にしていた人がいたのかどうかも気になりますねｗ
表示できればいいという作り方の人が多かったのかな？ｗ

お礼日時：2010/07/13 19:46

No.5 回答者： notnot 回答日時： 2010/07/13 18:32

#3です。

＞1次元で表現するのか、2次元で表現するのか。
＞見た目の理由だけでタグを決めたくないなとｗ

表現(見た目)というか、もとのデータの構造が、二次元データなのか、箇条書き項目なのか、と書いたつもりです。

箇条書きでない一次元データは上記どちらにも該当しないですね。ulで代用する事も出来ますが、1カラムのtableで表現するのが良さそうです。
三次元データは適切なタグがない。

あと、二次元データを縦一列の見た目にしたければ、tableを使ってtdをブロック要素にしたりするのかな？

逆に、
関東：東京 埼玉 神奈川 千葉 群馬 栃木 茨城
中部：山梨 静岡 愛知 長野 岐阜 新潟 富山 石川 福井
のようなデータを、一項目ずつ分けた構造で表すのであれば、tableを使わないでリスト系の要素でcssで横書きにするんでしょうね。


#3＞tableはかなり足場が曖昧な要素で、本来必要ないが無いと困る要素みたいな感じがします。

そういえば、初期(ブラウザがMosaic Ver1しか無かった頃)のHTMLにはtableタグがなかったです。ul/olはありました。cssも無かったので、見た目を調整するのが不可能。

この回答へのお礼

そうですね、1カラムのtableもありそうですね。
この使い方も納得出来ます。
ありがとうございます。
今、疲れているせいか、
ここまで考えながら作ると思うと、
頭が爆発しそうですねｗ

tableタグ、存在しない時代が会ったんですねД
昔はかなり制限が会ったんですね＞＜
その当時も、SEOがあったりしてたんですかね？
あと、構文を気にしていた人がいたのかどうかも気になりますねｗ
表示できればいいという作り方の人が多かったのかな？ｗ

お礼日時：2010/07/13 19:49