マルシェル新規登録で5000円分当たる

初心者です。

<li>と<table>タグについて、どのような基準で使い分けるのでしょうか?

何かのページで表として認識できる場合は<table>とありましたが、実際には<li>で記述されているケースが多いように感じます。それぞれのメリット・デメリットを教えていただけるとありがたいです。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

リストと表の違いで区別するのが良いでしょう。


 ul li は、デフォルトで、頭に " ・ " が付きますから、
HTML(マークアップ)的に考えれば、箇条書きです。

表は、エクセルで作る様な「表」と考えれば良く、
セルの枠線(border)が表示されても表現的に問題ない場合が「表」です。

マークアップを無視して、レタリングだけなら、
CSSで、どちらでも(それ以外の方法でも)同じに表示出来ます。

また、tableの場合、クローラーのセルの読み込み順が変わる場合がありますので注意が必要ですし、旧IEでの差異もあります。
後から、セルの追加で列計算がある場合に修正がちょっと面倒です。
CSSが利用出来る昨今は、tableが嫌われる方向です。
大きなtableは読み込みが遅くなるので、表示が遅くなります。

初心者は、簡単にtableレイアウトで全体を作る事が出来るので、
利用しがちだったり、某簡易ソフトもtableレイアウトが多いですね・・・

良く見掛けるのは、ナビ(グローバル)メニューの部分ですが、
table でも ul でも作れますが、項目リストと考えれば、
ul li が正解でしょう。簡単なのはtableで固定する方法ですが・・・
    • good
    • 0
この回答へのお礼

ありがとうございます!

お礼日時:2010/12/20 00:20

私は基本li要素を使います。


tableを使おうと思うときがあるのは、文章というよりは分類でtableでしか表示できない時(データ・対戦表など)やどっちでも表現できるけれど比較しやすいからというとき(料金プラン・スペック表など)です。

li・table要素どっちでも表現できる場合、li要素のメリットは閲覧者が一つ一つの項目ごとに分けて見やすくなることで、table要素のメリットは前にも挙げましたが項目ごとの比較がしやすくなることではないでしょうか。

どちらもデメリットはあまりない気がしますが、tableを使うとブラウザごとの実装の差でデザインに融通が利き辛いことでしょうか。
たまにカレンダーをli要素でマークアップして実現するのを目にしますがあれもそういう理由からだと思います。(マークアップ的には微妙に思いますが)
    • good
    • 0
この回答へのお礼

ありがとうございます!

お礼日時:2010/12/20 00:19

日本語で「表」というと、「一覧表」といったものもあるので混乱しているのだと思います。



liはリスト、つまり「一覧表」です。
あるいは「箇条書き」と言った方が「表」と区別できるかもしれません。

tableはテーブルです。縦横に広がっているようなものです。
元素の周期「表」とか、テレビ欄の番組「表」とかの「表」です。
「表」計算ソフトのExcelで使っているようなやつです。

こう書けば、それぞれの違いやメリットデメリットもわかるのではないでしょうか。
    • good
    • 0
この回答へのお礼

ありがとうございます!

お礼日時:2010/12/20 00:18

このQ&Aに関連する人気のQ&A

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

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

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

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>

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

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

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

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

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

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

Aベストアンサー

#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> を使いますね。

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

#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=...続きを読む

Qテーブルタグの中に
  1. を入れても正常に数字が表示されません。

テーブルタグの中に<ol><li>を入れても正常に数字が表示されません。
例えばテーブルの外に<ol>を入れて中に<li>を入れても表示される数字が
全部1になってしまいます。またテーブルの中に<ol>を入れても同じようになってしまいます。どなたか解決法をご存知の方がいらっしゃりましたら、
アドバイスお願いいたします。

Aベストアンサー

一応、こんな感じで打ってみました。

<table border="1"><tr><td>
<ol><li>1行<br>
<li>2行<br>
<li>3行</td></tr></table>

こういう意味で良いのでしょうか…
自分のパソコンで確認した際は、テーブルの中に

1.1行
2.2行
3.3行

と表示されました。
違っていましたら済みません。

Qliタグの中に

タグやら

を入れるのはあり?

それともなしでしょうか?
たとえば、作品実績みたいなのを羅列するとき

「画像」
「タイトル」
「簡単な説明」

を乗せたいときはどうしますか?
<ul>
<li>
<p>画像</p>
<dl>
<dt>タイトル</dt>
<dd>説明</dd>
</dl>
</li>
</ul>

こんな感じを考えたのですが・・・
<li>(作品)ごとにボーダーボトムで区切りたいかなと考えております。

<li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか?


</ul>

Aベストアンサー

#1 ORUKA1951です。
#1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
★携帯端末では縦に並びます。
 ディスプレイの幅が狭いときもtableのように、はみ出ません

 このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います。リストに何を使うかとなると悩むところですね。
OL ordered list 序列リストは、順番が必要なとき以外は使わないでしょう。
DL definition list 定義リストでも良いかな?
・・・そして、なによりもリストにしておけば、携帯端末や読み上げソフト、あるいは検索エンジン最適化からも良いでしょう。
しかし、「(作品)ごとにボーダーボトムで区切りたいかな」という条件が一つありますね。
だとすると、
【注意】
 ★分かりやすくするため全角スペースでインデントされています。
  利用するときはタブに変換すること
 ★これは、私のページ一部を抜粋したもの。画像は200px×150px
 ★基本的にCSSのためだけのclass,id,divは無いのでHTMLはシンプルです。
 ★セレクタの使い方は調べること。
 ★これはolですがulでもよい。
 ★本来は、
 <div id="photoList">
  <ol>
   <li>本体
    <ul>
     <li><img src="./photo/R0011583.jpg" width="200" height="150"
        alt="ディスプレイを開く"></li>
     <li>本体を正面から撮影したところ、パネルの下がカバー</li>
    </ul>
   </li>
とマークアップしたほうがスマートでしょう。


______________サンプルソース。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
 <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
 <title>ディスプレイの分解:ノートパソコンの分解</title>
 <meta http-equiv="Content-Style-Type" content="text/css">
 <style>
<!--
  @media screen{
   div#photoList{
    display: block;
    border: solid green 1px;
    margin: 1em 10% 1em 10%;
    background-color: rgb(200,200,200);
    padding:0px;
   }
   div#photoList > ol{
    margin: 0px;
    padding: 0px;
   }
   div#photoList > ol>li{
    display:block;
    width: 210px;
    float:left;
    border-style: solid;
    border-color: black gray gray black;
    border-width: 1px 4px 4px 1px;
    padding: 5px;
    height: 240px;
    margin: 5px;
    background-color: white;
   }
   div#photoList > ol>li dl{
    margin:0px;
   }
   div#photoList > ol>li dl dt{
    padding: 5px 10px;
   }
   div#photoList > ol>li dl>dd{
    margin-left: 0px;
    text-align: center;
   }
   div#photoList > ol>li dl dd+dd{
    margin-left: 0px;
    text-indent: 1em;
    font-size: 0.8em;
    line-height: 1.5em;
    text-align: left;
   }
   div#photoList > hr{
    clear: both;
    margin: 0px;
    visibility: hidden;
   }
  }
-->
 </style>
</head>
<body>
 <h1>ノートパソコンの分解</h1>
 <h2>ディスプレイの分解</h2>
 <div id="photoList">
  <ol>
   <li>
    <dl>
     <dt>本体</dt>
     <dd><img src="./photo/R0011583.jpg" width="200" height="150"
         alt="ディスプレイを開く"></dd>
     <dd>本体を正面から撮影したところ、パネルの下がカバー</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>ビスの位置</dt>
     <dd><img src="./photo/R0011587.jpg" width="200" height="150"
         alt="カバーを外す"></dd>
     <dd>電源スイッチカバーを外すとビスがでてくる。</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>パネルを開く</dt>
     <dd><img src="./photo/R0011590.jpg" width="200" height="150
         alt="パネルを180度開く"></dd>
     <dd>ヒンジに負荷がかからないようにパネルを一杯に開く</dd>
    </dl>
   </li>
   <li>
    <dl>
     <dt>パネルを裏返しに</dt>
     <dd><img src="./photo/R0011597.jpg" width="200" height="150"
         alt="パネルを1裏返す"></dd>
     <dd>取り外したパネルを裏返しにする。</dd>
    </dl>
   </li>
  </ol>
  <hr>
 </div>
</body>
</html>

#1 ORUKA1951です。
#1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
★携帯端末では縦に並びます。
 ディスプレイの幅が狭いときもtableのように、はみ出ません

 このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います...続きを読む

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

QDLタグ と TABLEタグ

dl・dt・ddタグは、本来1行ほどずれて表示されるタグだと思うのですが、

tableタグのように1行に並べて表示できることを知りました。 (TRやTDのように)

例)
ユーザー名:テキストボックス
パスワード :テキストボックス
⇒tableでもDL一式でも可能だと思っております。

ただ、DLとかDTタグを横に並べて使用するぐらいなら
tableタグでやったほうが早いと思ってしまうのです。

たぶん何かメリットがあると思うのですが
そのメリットがわかりません。

tableタグ一式で、横並びの表を作成するより
DLタグ一式でやったほうがいいメリットを
教えて頂けないでしょうか。

ご教授よろしくお願いします。

以上です。

Aベストアンサー

 疑問に感じたら仕様書を読んでみると良いです。すべて書かれています。

 定義リストdlは、HTML4.01では用語(dt)とその記述(dd)をマークアップするためのものと誤解されている方がいますが、仕様書にはどこにもそう書かれていません。
「用語はDT要素から与えられ、インラインの内容に制限されます。その記述は、ブロック・レベル内容を含んでいるDD要素で与えられます。」
「The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.」

 仕様書でも会話に使う使い方が実例として挙げられていました。
『DL要素の応用として、例えば対話のマーク付けがある。 DT要素が話者を示し、DD要素が話の内容を示す、というものである。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.3 )』
(原文)
 Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

したがって
ユーザー名:テキストボックス
パスワード :テキストボックス
などの使い方も誤りではありません。

 HTML5では定義以外に使われるように明記され、一方で会話に使うことは否定されます。
『The dl element is inappropriate for marking up dialogue. Examples of how to mark up dialogue are shown below. ( http://www.w3.org/TR/html5/grouping-content.html#the-dl-element )』

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

 そして、tableでのマークアップは煩雑になります。たとえば、
ユーザー名:テキストボックス
パスワード :テキストボックス
は、仕様書に従い厳密にマークアップすると最低限
<table summary="form">
 <tbody>
  <tr>
   <th abbr="名前">名前</th><td><input ・・・略・・・></td>
  </tr>
  <tr>
   <th abbr="パスワード">パスワード</th><td><input ・・・略・・・></td>
  </tr>
・・・・・ですが、dlでマークアップすると
<dl class="form">
 <dt>名前</dt>
 <dd><input ・・略・・</dd>
 <dt>パスワード</dt>
 <dd><input ・・略・・</dd>
・・・・・・と8行→5行と単純になりますし、スタイルシートも簡単になります。実例は
「テーブルタグを使ってフォームを作成してるのですが… - Webデザイン・CSS - 教えて!goo ( http://oshiete.goo.ne.jp/qa/7314941.html#a4 )」に書きました。

 疑問に感じたら仕様書を読んでみると良いです。すべて書かれています。

 定義リストdlは、HTML4.01では用語(dt)とその記述(dd)をマークアップするためのものと誤解されている方がいますが、仕様書にはどこにもそう書かれていません。
「用語はDT要素から与えられ、インラインの内容に制限されます。その記述は、ブロック・レベル内容を含んでいるDD要素で与えられます。」
「The term is given by the DT element and is restricted to inline content. The description is given with a DD element that cont...続きを読む

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

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

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

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

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

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q「CSS」リストの2段組どのように組まれていますか?(同一カテゴリの場合)

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)

どうぞ宜しくお願いいたします。

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ...続きを読む

Aベストアンサー

確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。


.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}


人気Q&Aランキング