<li>と<table>タグについて

質問

初心者です。

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

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

回答No.3

naokita · ベストアンサー

リストと表の違いで区別するのが良いでしょう。
　ul li は、デフォルトで、頭に " ・ " が付きますから、
HTML（マークアップ）的に考えれば、箇条書きです。

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

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

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

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

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

お礼

ありがとうございます！

回答No.2

metametamu

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

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

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

お礼

ありがとうございます！

回答No.1

kmee

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

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

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

こう書けば、それぞれの違いやメリットデメリットもわかるのではないでしょうか。

お礼

ありがとうございます！