HTMLの表とリストの違いについて教えてください

このQ&Aのポイント
  • HTMLでは、ulとtableを使ってリストや表を作成します。
  • リストは一覧表を作るために使用され、お問い合わせリストや相互リンクリストなどの使われ方があります。
  • 一方、表も一覧のような使い方をし、アクセス結果表や売上ランキング表などに使われます。
回答を見る
  • ベストアンサー

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

表とリスト(ulとtable)の違いについて教えてください。 HTMLでは、ulがリストで、tableが表を作るときに使用します。 リストとは、お問い合わせリストや、相互リンクリストなど、 一覧のような使い方もします。 表も同じように、アクセス結果表や、売上飲料水ランク表など、 これも、一覧のような使い方をします。 (言葉上での解釈) HTML上で出来ないことは、ulの方は、tableで言うtdタグがなく、 一行一単語という感じですよね。 だけどこれは、レイアウト上の問題であって、 レイアウトのためにタグを選択するのは間違っています。 タグを正しく使うために、 表とリストの違い、つまり、ulとtableの違いを知らないといけません。 参考になればとも思っているので、 正しい答えがわからなくても、 「僕はこう思ってる」や 「僕はこう使い分けてる」というのでも教えてください。

  • HTML
  • 回答数14
  • ありがとう数19

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.7

#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> を使いますね。 以上。 偏った考え方だと思いますが、参考になれば…。

88suzuran88
質問者

お礼

ありがとうございいます。 納得できます。 ソートを意識して考えたことなかったです>< 順番を大事にするフォームを作る場合はolですね。 あれ? っと言うことは、 お名前 _____ こういうフォームを作った場合、 項目名(お名前)とフォーム(_____)これの区別を付けることができなくなりますね>< dlだと区別を付けられるけど、 順番を意識してはいけないものになってしまうしw これが今のHTMLの不十分な所ですかね? これに適したタグが存在しないということですかね? tableタグのthの説明を確認してみましたが、 thead内で使うのと、tbody内で、カラムで使うのとでは違ってたみたいです。 聞けば当然だと思いましたがw tbody内だと、定義になりますね。 tableタグは、 ヘッダーが有り、定義が有り、順番を気にしてはいけないもの。 dlタグは、 ヘッダーが無く、定義が有り、順番を気にしてはいけないもの。 ulタグは、 ヘッダーが無く、定義が無く、順番を気にしてはいけないもの。 olタグは、 ヘッダーが無く、定義が無く、順番を気にしないといけないもの。 定義又はヘッダーがあって、順番を気にするものが無いですね><

その他の回答 (13)

回答No.14

すみません、あまりいろいろ考えると訳がわからなくなるので、 (私の悪い癖です) No.4、5、6くらいまでの内容で考えておいた方が良いかも、、、

88suzuran88
質問者

お礼

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

回答No.13

> 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>とほぼ同じ表現が出来るようになると思います。

88suzuran88
質問者

お礼

音声ブラウザや点字ブラウザなど、 ブラウザにはたくさんの種類があります。 マークアップをしっかりしていないと、 それらのブラウザが適切に処理ができなくなり、 目が見えない人が、「やっぱりこのページも見えないのか・・・」 という風に思うと思います。 このマークアップの意味は、ブラウザが知っている必要があるので、 XMLで自由に作れるようにすると、 ブラウザが解釈のしようが無く、 マークアップとしての意味がなくなります。 それは、1ページを1枚の画像でWEBを作っているのと同じで、 文章を書く意味もなくなってきます。 HTMLは意味を、 CSSは見た目を、 javascript(ajax)は動きを処理するもので、 それは、他の二つに影響を与える作り方は良くないと思います。 他の二つに影響を与えてしまうと、 talooさんが言っている通り、 ajaxを使っているページを音声ブラウザで聞くとおかしなことになります。 実は音声ブラウザなどは使ったこと無いので、 dtが連呼されること(読まれる順番?)もしりませんでしたw 一度見てみ無いといけないですね><

  • think49
  • ベストアンサー率59% (285/482)
回答No.12

#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> と同じような一覧性を得られないのが個人的には気になりますが、その辺は好みかも。

88suzuran88
質問者

お礼

テーブルタグと、各リストタグは、 pタグとdivタグのように、同じ機能だと思っていましたが、 theadの中のthとtbodyの中のthでは意味が違うことを知り、 divとspanのように、機能自体が違うことがわかりました。 見た目を考慮しないと言ってましたが、 文章のまとめ方で意味も変わり、 そのまとめ方で、テーブルを選ぶかリストを選ぶかという考えになってます。 確かに日本語というか文章のまとめ方の問題ですね。 表にするのか、定義にするのか・・・ もともとの考えは、ulとtableの違いは、複数カラムに対応しているかどうかの違いで、 これは、CSSでどうにでもなることなので、このタグの違いは無いと捉えてました。 なので、こんな質問をしてしまいました。 ただ、いろいろな使い方のアイデアが出て、 もっと聞きたいと思ったので、解決にしなかっただけです>< 疑問はまだありますが、ほぼだいじょうぶかなという感じです。

回答No.11

No.2です。 これら「日本語の問題」は、HTMLよりも国語カテゴリーで国語または日本語学の専門家に質問されるのが良いと思います。 HTMLでも、英訳や和訳でもそうなんですが、とにかく国語(日本語)が出来なければ、 翻訳したり、「ここは名詞、ここは動詞」「ここは表題、ここは定義」などという目印を付けることは出来ません。 マークアップ(どの部分がどの意味を持っているかの目印を付ける)する前に、 日本語で書いてみて、どの意味を持っているか、と言うのを考えることが重要だと思います。 > No.2 お礼 > ただ、定義と見出し、解説と内容の違いも曖昧ですねw 定義と解説は、辞書のような説明の仕方を想像してもらえればいいと思います。 国語の読み取りが赤点ぎりぎりだった私の考えからすれば、 「本人が定義と思えば定義、見出しと思えば見出し」でいいと思いますけどね。 数十人の日本語学者に聞いて、全員が同じ答えを出したなら、それが答えだと思いますが、そんなことはまずあり得ないでしょう。。。(という「赤点ぎりぎりの人」の言い訳) 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>などに変わる物ではありません。

88suzuran88
質問者

お礼

>これら「日本語の問題」は、HTMLよりも国語カテゴリーで >国語または日本語学の専門家に質問されるのが良いと思います。 実はこれも考えましたw まずはリストと表の違いを聞こうかとw カテゴリーを複数設定出来ればよかったんですけどね>< 作る文章の日本語も理解しないといけないですね。 >本人が定義と思えば定義、見出しと思えば見出し 確かにそうですね。 みんな同じ解釈が出来れば、 同じ内容の、違う書き方の本が出たりはしないですし。 ありがとうございます。 参考にします。 ん~。 開発者が思った見た目にしやすいから、そのタグを使うというのは良くないと思います。 究極を言えば、これって、 HTMLではなくて画像でもいいじゃんってなりますよね。 ブラウザに依存しないし。 googleが画像内の文字も認識するようにしたと言っているので、 いずれ、そうなることもあり得るとおもいますけど><

  • think49
  • ベストアンサー率59% (285/482)
回答No.10

#6, 7, 8, 9 です。 > divは推奨しないタグになっているのに、 > spanは推奨しないと書いていないのには納得いきませんでしたw 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要素にも意義があるかもしれません。

88suzuran88
質問者

お礼

>spanについて。 同じくそう思ってましたw HTMLがまだ不完全ということですね>< けど考えてみたんですけど、 重要を表すstrong、強調を表すem、、、 それ以外に必要か? って。 それ以外に必要だとすると、、、何も思いつきませんでした。。。>< divは、header、footer、section、articleで、ほぼ出揃ったかなという感じがしますね。 これも、それ以外に必要なものが思いつかないです。 >少し話が逸れますが、私は <div> を使うべきか <li> を使うべきか悩んだことがあります。 ん~。 良いとも悪いとも思いますねw これは、tableをレイアウトに使うのと同じ感じがします。 なので、やるべきではないとも思いますが、 確かに、章をリスト化するという意味では、あっているようにも思いますね。 さらに、物語を順番に書くには、olも適切のように見えますね。 すごい発見ですw ありがとうございますw >class、idについて classはグループ化というか組織化というか。そんな感じで、 idは、個を表す、固有名詞みたいなものですね。 HTMLではデザインを考慮すべきではないと考えているので、 このclassやidも、デザインのために使用してはいけないと思ってます。 まぁここは、まだそんなにこだわってませんがw ここにこだわると、かなり難しくなりそうですよね>< これを指定することで、divやspanの力が発揮するようなことは、 HTML5の説明でも書いてました。 しかし、マークアップとしての力ではありませんよね。 全てのブラウザがclassの値のarticleを見て、これが章だと判断していないと思うし。 HTML5の説明でも、ブラウザの仕様でこうとは書いてなかったと思うので。

  • think49
  • ベストアンサー率59% (285/482)
回答No.9

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

88suzuran88
質問者

お礼

>見る人次第 あー。誤解してました。 確かに、tbodyのthに、「半角英数で入力してください」とも書いていれば、 ラベルではなく、説明になることもありますね。 この「お名前」も何を入力するかの説明とも受け取れますし。 >CSSの件 閲覧者が勝手にスタイルシートを作ってデザインを変えてしまうということは、 その閲覧者は、そのデザインが見やすいからだと思います。 マークアップを正しく設定していれば、 見出しが下に、本文が上に設定されるなどの間違いは起こらないと思います。 マークアップを正しく設定していなければ、 例えば、見出しをdivで、本文もdivで設定してしまうと、 見出しなのか、本文なのかがわからず、 ユーザスタイルシートの設定のしようがありませんよね。 そのためにも、マークアップをちゃんとし、 マークアップ時にデザインを考慮しないようにするべきだと思います。 マークアップ時にデザインを考慮してしまうと、 ユーザスタイルシートで出来ることが限定されてしまう場合が多いです。

  • think49
  • ベストアンサー率59% (285/482)
回答No.8

#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要素がベター」ってスタンスになるわけです。 ……こっちの考え方の方が分かりやすかったかな?

88suzuran88
質問者

お礼

「見る人次第」というのは少し納得いきません。 HTMLはマークアップする言語で、 見た目を整えるものでは無いです。 HTMLを見て、ブラウザが、適切に見た目を整えるものなので、 つまり、HTMLを適切に書いて、見る人が区別できないということは、 ブラウザもまだ完全ではないということですね。 HTMLを書く人は見た目を意識することはなく、 ブラウザが作ったデザインに+アルファする場合は、 CSSという感じなので。 フォームをtableで作る場合は、thとtdで出来ますが、 この場合、順番を意識しないものになります。 「お名前」を始めに書いて欲しいという場合は、tableではなくてolが適切で、 この場合、項目名とフォームの区別が出来ないなということでした。 総合的に見ると、tableの方が適切だったりするかもしれませんね>< thについて、同じところで確認しましたw 他の要素についても使ってますがw もう最近はここですねw 余談ですけど、このサイトの説明で、 divは推奨しないタグになっているのに、 spanは推奨しないと書いていないのには納得いきませんでしたw どちらも意味のないタグとは書いてましたがw そうですね。 theadが無く、thとtdだけなら、dtとddに限りなく近くなりますね。 これからtableにはtheadを、必ず書くようにしますw これはこの質問で勉強になりましたね。 >たった2列だとソートしがいがなく、わざわざ <table> にする意味がない気がします。 少しわかりにくかったですw ソートを積極的に使うというのは、 閲覧者が並び替えを自由にできるので、 つまり、順番は意識しないデータという事なんですね。 たしかに、tableでのソートは見たことありますが、dlでは無いですね。 2列だとソートしてもほとんど変わらない感じがしますし。 ありがとうございます。

  • think49
  • ベストアンサー率59% (285/482)
回答No.6

■<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> は必須ではありませんが、私はソートしても問題ないように必ずつけていることにしています。 (...文字数制限につき、次の記事に続きます...)

88suzuran88
質問者

お礼

そうですね、1カラムのtableもありそうですね。 この使い方も納得出来ます。 ありがとうございます。 今、疲れているせいか、 ここまで考えながら作ると思うと、 頭が爆発しそうですねw tableとdlの例は分かりやすいですね。 確かに違いますね。 ありがとうございます。 tableタグ、存在しない時代が会ったんですねД 昔はかなり制限が会ったんですね>< その当時も、SEOがあったりしてたんですかね? あと、構文を気にしていた人がいたのかどうかも気になりますねw 表示できればいいという作り方の人が多かったのかな?w

88suzuran88
質問者

補足

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

  • notnot
  • ベストアンサー率47% (4836/10237)
回答No.5

#3です。 >1次元で表現するのか、2次元で表現するのか。 >見た目の理由だけでタグを決めたくないなとw 表現(見た目)というか、もとのデータの構造が、二次元データなのか、箇条書き項目なのか、と書いたつもりです。 箇条書きでない一次元データは上記どちらにも該当しないですね。ulで代用する事も出来ますが、1カラムのtableで表現するのが良さそうです。 三次元データは適切なタグがない。 あと、二次元データを縦一列の見た目にしたければ、tableを使ってtdをブロック要素にしたりするのかな? 逆に、 関東:東京 埼玉 神奈川 千葉 群馬 栃木 茨城 中部:山梨 静岡 愛知 長野 岐阜 新潟 富山 石川 福井 のようなデータを、一項目ずつ分けた構造で表すのであれば、tableを使わないでリスト系の要素でcssで横書きにするんでしょうね。 #3>tableはかなり足場が曖昧な要素で、本来必要ないが無いと困る要素みたいな感じがします。 そういえば、初期(ブラウザがMosaic Ver1しか無かった頃)のHTMLにはtableタグがなかったです。ul/olはありました。cssも無かったので、見た目を調整するのが不可能。

88suzuran88
質問者

お礼

そうですね、1カラムのtableもありそうですね。 この使い方も納得出来ます。 ありがとうございます。 今、疲れているせいか、 ここまで考えながら作ると思うと、 頭が爆発しそうですねw tableタグ、存在しない時代が会ったんですねД 昔はかなり制限が会ったんですね>< その当時も、SEOがあったりしてたんですかね? あと、構文を気にしていた人がいたのかどうかも気になりますねw 表示できればいいという作り方の人が多かったのかな?w

回答No.4

tableはかなり足場が曖昧な要素で、本来必要ないが無いと困る要素みたいな感じがします。 段と行しかないので関連した情報であることを表現するためではなく、非常に限定的な分類のみに特化しているというか。もしかしたら単純にexcelをhtmlに持っていきやすいという理由なのかもしれません・・・ なので基本はリストで、きっちり表で書けるものは表で書けばいいという感じに落ち着いています。 それとは別に、共通するグループで分類したい場合は、リストでマークアップした後class属性を指定しておくという方法も考えられます。

88suzuran88
質問者

お礼

おー。 求めてた答えに近いかもしれません。 基本、tableは使わないということですね。 確かに曖昧で、無くてもいいけど、、、ん~、、、という感じですねw グループ化は、html5だと、articleタグで囲むというのもありですね。 ただ、今の技術で、 ulだけでtableでつくっていた行列の構造が作れるか心配ですw まぁ修行ですねw ありがとうございます。 参考にします。

関連するQ&A

  • htmlを使って表を作っています

    自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか?わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか? 練習問題と自分が作ったソース載せます。 <html> <h4><b>1問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">~</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 <第一問:幅400、高さ400、上のセルの数が2つ、下のセルの数が2つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。> どうですか?うまく表示されましたか? レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">~</table> ・<tr bgcolor="★">~</tr> ・<td bgcolor="★">~</td> ★には色指定値(例:#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列(一行)に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 <第二問:幅50、高さ50、1つのセルのテーブル全体の背景を赤くしてみましょう。      赤→#ff0000> <第三問:幅150、高さ100、上のセルを3つ、下のセルを3つのテーブルを作り、      上3つのセルの背景を青くしてみましょう。      青→#0000ff> <第四問:幅100、高さ100、上のセルを2つ、下のセルを2つのテーブルを作り、      左上のセルの背景を緑にしてみましょう。      緑→自分で見つけて下さい>

  • <table>タグについて

    以前同じような質問をさせていただいたのですが、以前質問した逆の内容が わからないので質問させていただきます。 以前の質問では<table>タグを使用して表を同じ高さに表示させるという 質問をさせていただきました。 【回答】 <table><tr> <td><table>******</table></td> <td><table>******</table></td> </tr></table> という回答をいただきました。(ありがとうございました。) 今度は逆に表を上下に表示したいと考えたのですが、どうしても 同じ高さに表示してしまいます。(っていうか普通に<table>タグを 書けば上下に表示するとおもうのですが・・・) おそらくタグを閉じたりするタイミングがおかしいかと思われますが、 その他ご存知の事がありましたら宜しくお願いいたします。 <table>タグのclassオプションを同じ名前にすると問題でもあるのでしょうか? ご多忙の中、大変申し訳ありませんが、ご回答宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • リストの高さを揃えたい

    リスト2行を左右に並べて設置したいと思い、テーブルのセルの中にそれぞれ記述しました。 左のセルには5行、右のセルには4行あります。 右側が1行少ないことで、左右で高さが異なってしまいます。(図があります) どうも、右側のリスト全体がセルの中央に配置されている感じがします。 左右で高さを揃えたいのですが、その方法を教えてください。 HTMLとCSSは以下のとおりです (HTML) <table> <tr> <td class="sample"><ul> <li>ABC</li> <li>DEF</li> <li>GHI</li> <li>JKL</li> <li>MNO</li> </ul> </td> <td class="sample"><ul> <li>PQR</li> <li>STU</li> <li>VWX</li> <li>YZA</li> </ul> </td> </tr> </table> (CSS) .sample{ text-align: left; valign: top; padding: 0px; border: none; }

    • ベストアンサー
    • CSS
  • table要素のwidthの解釈

    tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する →つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。

  • tableにul,または,olを入れられますか?

    <table>  <tbody>   <th>くだもの</th>    <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>    …etcとして くだもの ・りんご ・みかん ・すいか としたいのですが、 <table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は HTMLの仕様に反していますでしょうか?

  • ULタグ等を使ってリスト化するのが主流ですか?

    スマホサイトで表を作る際は テーブルタグを使うのではなく、 jQueryMobileを使って ULタグ等を使ってリスト化するのが主流ですか? あまりテーブルタグはスマホサイトでは使われないですか?

    • ベストアンサー
    • HTML
  • HTMLのtableタグでセル毎の幅率を指定したい

    HTMLにtableタグがあると思いますが、 例えば <table> <tr> <td></td> <td></td> </tr> </table> のように左右にセルがあるだけの単純な表を作ったとします。 この場合100ピクセルの幅にして左が70ピクセル、右が30ピクセルみたいに 個々の列で幅の比率を指定したりはできるのでしょうか?

    • ベストアンサー
    • HTML
  • 表(<table>)の直前が、改行されてしまう。

    表(<table>)の直前が、改行されてしまう。 perlでコーディングしています。データベースはmdbファイルです。 <textarea>内を簡単なWebエディタに見立てて、 <textarea>内へhtmlタグなどで書き込んだデータを、 mdbのメモ型フィールに更新し、これをブラウザで表示させています。 このとき、表(<table>)を表示させるために、<textarea>内に<table><tr><td>タグを入力するのですが、mdbファイルに更新する際に、 <table> <tr> <td>   : のように、改行した状態で更新すると、書き込んだ改行分だけ、ブラウザに表示された表の直前が改行されてしまいます。 (mdbファイルに直接書き込んでも同現象となりました。) <table<tr><td>・・・ と改行せずに書き込むと、ブラウザに表示された表の直前は改行されませんでした。 なお、ブラウザに表示させる側のcgiファイルには、改行キー(¥nなど)を改行タグ(<br>)に変換させるために、   $textarea1 =~ s/\r\r/<br>/g;   $textarea1 =~ s/\r/<br>/g;   $textarea1 =~ s/\n/<br>/g; としているため、これと関係していると思われるのですが、 わたくしとしては、  ●<textarea>内で手入力した改行は、ブラウザ表示に反映させるが、  ●<tabel>・・・・</tabel>の部分は、改行して入力されていても、この改行だけは無視する、 と言った、都合のよいことをしたいのですが・・・、行き詰っております。 perlやcgiの問題ではないかも知れませんが、 どなたか、よいアドバイス、ご提案などございませんでしょうか。 ご教授いただければ、大変助かります。 よろしくお願いします。

    • ベストアンサー
    • CGI
  • table要素の使い道

    tableはレイアウトに使ってはいけないのは知っていますが、boxのなかに画像でリンクを作る簡単なメニューの場合は、リストとtableどちらを使ったほうがいいのでしょうか? こんな感じです。リストの場合はcssで同じような感じにします <table> <tr> <td><a href="#"><img src="a.png" alt=""></a></td> <td><a href="#"><img src="b.png" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="c.png" alt=""></a></td> <td><a href="#"><img src="d.png" alt=""></a></td> </tr> </table>

    • ベストアンサー
    • HTML
  • ScriptがTABLEタグの中に表示されません。

    下記の様にScriptを使ってTABLEタグの中に表示させようと思ったのですが、test2.jsの「あれ?」がTABLEタグ欄に表示されません。 何方かご教授してもらえませんか? ↓↓↓↓<HTML File>↓↓↓↓ <HTML><BODY> <script src="./test1.js"></script> </BODY></HTML> ↓↓↓↓<test1.js File>↓↓↓↓ document.open(); document.write("<TABLE border=1><TBODY><TR><TD>1</TD><TD>おや?<script src=\"./test2.js\"></script></TD></TR><TR><TD>1</TD><TD>1</TD></TR></TBODY></TABLE>"); document.close(); ↓↓↓↓<test2.js File>↓↓↓↓ document.open(); document.write("あれ?"); document.close();