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

質問

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

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

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

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

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

回答No.7

think49 · ベストアンサー

#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タグは、
ヘッダーが無く、定義が無く、順番を気にしないといけないもの。

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

回答No.3

notnot

箇条書き(ul)と、二次元の構造を持ったデータ(table)という違いです。

tableでも箇条書きを表現できるというのはお書きの通り。

お礼

ですよね。
1次元で表現するのか、2次元で表現するのか。
今まではこう使ってました。
だけど、見た目はCSSで、htmlはマークアップを
というのを徹底してみたくなったのでｗ
見た目の理由だけでタグを決めたくないなとｗ
ありがとうございます。
参考にします。

回答No.2

神崎 渉瑠（@taloo）

私の考え方ですが。

・一覧表ではなく「箇条書き」で言い換えられる内容であれば<ul>または<ol>。
・一覧の中で「見出し」「内容」が明確に区別できるなら<table>
・見出しと内容ではなく「定義」と「解説」であれば<dl>

お礼

見出しと内容は、
td、thでマークアップできるので、
これは正しいかもしれませんね。
ただ、定義と見出し、解説と内容の違いも曖昧ですねｗ
こうなると、ulとtableは使い分けられますが、
tableとdlの違いも気になってきますねｗ
ありがとうございます。
参考にします。

回答No.1

yyr446

一覧表を作る時、各レコードの項目に意味が有る時、それを並べて見たいときには
<table>を使い、単にレコードを順番に列挙するだけでいい時は
<ul>か<ol>を使います。あるいは微妙なとこですが、

<dl>
<dt>見出し</dt>
<dd>説明</dd>
－－－－－－－
</dl>

もよく使います。

お礼

ありがとうございます。
参考にします。
項目の意味の違いはtableではマークアップ出来ないので、
見た目だけで選んでるという感じですね。
複数行複数列の場合はtableという感じですかね。