Q&A
いくつかの有名な企業のホームページを見ましたが、テーブル要素ではなくliとdivを用いてサイト作成しているようです。これには保守しやすいからなどの理由があるのでしょうか？
回答7件
0
table要素というのはいわゆる「表」のときに用いるものです。
まれに、「tableタグを使うのは悪！」と思い込んでいる方もいますが、表ならばtableを用いてもかまいません。
レイアウト目的で使用するのがダメだということですね。
内容が「表」であるかどうかが重要です。
ulは順不同リスト、olは番号付きリスト、liはその子要素のリスト1件を表すものです。
表形式ではなくただの羅列されたリストであればそれはliなどを用います。
保守のしやすさは関係ありません。
投稿2016/08/08 09:29
総合スコア1298
0
table要素は「表組みデータ構造」を表現するための要素ですので、
いわゆるページのレイアウト枠として利用することはHTMLの仕様として推奨されません。
CSSの実装が不十分だった15年くらい前までは、table要素をレイアウト枠として利用する
いわゆる「テーブルレイアウト」が主流だった時期もありますが、現在はCSSのみで自由にレイアウトを作れますし、
HTML本来の役割（文書の情報構造を正しく表現・伝達する）を守ってマークアップするのが当たり前となっています。
従って、現在では（少なくともプロは）レイアウトにtableタグを利用することはありません。
投稿2016/08/09 03:56
総合スコア3763
0
セマンティックなHTMLという思想に則った書き方です。
「セマンティック」というキーワードで色々学習してみましょう。
投稿2016/08/08 09:32
総合スコア2037
0
理由としては、
・SEO対策
・テーブルタグは表を作るためのものである。
・読み上げの際におかしくなる
事です。
SEO対策についてとテーブルタグは…である。の説明は省略します。
目に持病があったりして物が見えにくい時、その人はブラウザの読み上げ機能を使うことが多いのです。
その時、テーブルタグを使っていると読む順番がバラバラになったりしてしまいます。
そのようなことを防ぐため、テーブルタグを避けているのです。
投稿2021/05/13 10:54
総合スコア24
0
SEO対策です。
レイアウトはリストタグを使うべきで、表を表現する場合はテーブルタグを使います。
そのほうがSEO上有利です。
投稿2016/08/09 04:45
総合スコア6621
TABLEタグとSEOについてはいろいろな意見がありますし、議論しても答えがでないため、自分のコメントなしにリンクだけ張っていくのは意味がないかと。
レイアウト目的ではテーブルタグで表現するのではなく、テーブルタグ以外を使いましょうということです。
繰り返しとなりますが、表を表現するならテーブルをお使いください。
レイアウトはテーブルタグを避けましょう。
私も貼っておきますね。
内容についての妥当性は誰にもわかりません。
http://w-just.com/blog/table-layout-713.html
0
ＨＴＭＬとは元来ドキュメントを表示するためのものです。
したがって、ソース表示をしてもドキュメントとして成り立つ形式が、優れたＨＴＭＬだと考えます。
（テキストと、タグを見ていくと、文章としての意味合いが成り立つ）
html
1<h1>メインタイトル</h1> 2 3<div> 4<h2>第1章タイトル</h2> 5<p>本文テキスト</p> 6</div> 7 8<div> 9<h2>第2章タイトル</h2> 10<ul> 11<li>項目1</li> 12<li>項目2</li> 13<li>項目3</li> 14</ul> 15</div> 16
これに対し、tableタグを使用したデザインは、ソース表示したときに、ドキュメントとして意味を読み取るのがむつかしくなります。
html
1<h1>メインタイトル</h1> 2 3 4<table> 5<tr> 6<td> 7<table> 8<tr> 9<th>第1章タイトル</th> 10</tr> 11<tr> 12<td>本文テキスト</td> 13</tr> 14</table> 15</td> 16 17<td> 18<table> 19<tr> 20<th>第2章タイトル</th> 21</tr> 22<tr> 23<td>項目1</td> 24</tr> 25<tr> 26<td>項目2</td> 27</tr> 28<tr> 29<td>項目3</td> 30</tr> 31</table> 32</td> 33</tr> 34</table>
ホームページを作成するという意味では、最適な方法をとることが肝要で、tableタグデザインがＨＴＭＬ文法上ＮＧということではありませんが、ＨＴＭＬはドキュメントという目線でとらえると、おのずとtableタグでのレイアウトはおかしいのではないか?
と感じられるのではないかと思いいます。
で、肝要なことは、読みやすい、わかりやすいＨＴＭＬが検索サイトに評価されやすい（無論検索サイトに評価される要素は他にもたくさんあります）側面があり、少しでも良いＨＴＭＬでコーディングすることが、プロのコーダーに求められるかと存じます。
投稿2016/08/09 04:40
編集2016/08/09 05:42
総合スコア440
蛇足ですが、「ドキュメントとして」と言う例であれば、できれば <!-- 第1章 --> とコメントを使って欲しいかな。あと、この場合 div よりは section かな。
https://developer.mozilla.org/ja/docs/Web/HTML/Introduction#Doctype_and_comments
ご指摘ありがとうございます。
プログラミングの癖で、コメントの記述をプログラムコメントにしておりました。
また、sectionタグは、HTML5では正しいですが、実践の場ではまだdivかと。
世の中のすべてのパソコンが100%HTML5に対応しているブラウザであるとは言い切れないため、sectionは、環境が限定条件の場合になるかと思います。
ともあれ、ご指摘感謝いたします。
あくまで「ドキュメントとして」としてなら最新の勧告に沿うのが良いかなと思いまして･･･。section は IE9以降であればどのブラウザも対応していますので、そろそろ問題ないケースのほうが多い気がします。
https://developer.mozilla.org/ja/docs/HTML/Element/section
ちょっと気になった程度なので、だらだらとコメントしてすいません。
コメントありがとうございます。
私どもは、客先のご指定される環境によって限定条件が変わるという意味で申し上げております。
スマホのみを対応としているケースでは、sectionを使用しても不具合にはならないかと思いますが、IE8も対象としているケースでは、sectionは使用できません。
いずれも要求仕様によるかと存じます。
ともわれ、最新のコーディングも大事かと思いますので、ご指摘の意図も十分ご理解申し上げます。
コメントありがとうございました。
あともう一つ、ドキュメントについて勘違いがございますので、ご指摘申し上げます。
HTMLもドキュメントには違いないですが、今回意図とさせていただいているのは、文章としての「ドキュメント」です。
例えば、wordで作成した文書もドキュメントですが、どちらかといえばそういう意味合いで使用しております。
ドキュメントの意味が分かりにくかったかと存じますが、ご容赦いただければ幸いです。
それは理解しているつもりです。返答が悪かったですね。
最初のコメントは「（一般的な文章と言う意味のドキュメント）構造をいうならセクション（章）では？」と言う意味です。
返答については、HTMLの例文として書くのであれば、と言う意味なので、
× あくまで「ドキュメントとして」
○ あくまで例として
ですね。すいません。
ご理解いただけて幸いです。
コメントありがとうございました。
今後ともよろしくどうぞお願い申し上げます。
読んでる流れで見たら、kei344さんの説明は何もおかしなところはないと感じますけどね。
wordもドキュメントだとか言うのであればIE8の客先がどうのってお話しはなんだろうと。
コメントありがとうございます。
kei344様のご指摘は、文法ミスのご指摘かと存じます。
コメントの形式が間違っていたのは、文法ミスですが、章グループとしてdivタグを使用するのは、文法上のミスではないかと存じます。
また、私どもの経験上のことではございますが、sectionタグ等HTML5のタグを使用し、それが原因で客先の環境で正しく表示されず、不具合となったことがございます。
そういったこともあり、sectionタグが必ずしも正しいとはいえないケースがございます。
どうか、その点もご理解いただければ幸いです。
コメントありがとうございました。
正しい正しくないという事ではなく、より適切な記述としての話ですね。
コメントはともかく、divはsectionの方が適切だと私も思います。
コメントありがとうございます。
本質問内容は、tableタグレイアウトと、そうでないレイアウトについての質問かと存じます。記述例も、tableタグの場合と、そうでない場合のソース比較例として記述しております。
本内容では、適切かそうでないかということではないかと存じます。
ただ、文法ミスは文法ミスでよくないと考えます。
しかしながら、kunai様のおっしゃられることも理解申し上げます。
どうかご容赦いただければ幸いです。
コメントありがとうございました。
「HTMLとしては最適な方法を取る事が肝要」と回答されていますが、全く同感なんですよ。
なので、より適切な記述を指摘されている内容について、それを支持するというコメントです。
どちらが正しい、正しくないとか、より適切な方法があるからこちらは不適切だとかそういう事ではなく。
回答が補完されてより洗練された回答になるところが、こういうサイトのいいところですよね。
コメントありがとうございます。
様々な方のご意見や、経験のお話をお伺いできことが大変ありがたいと私も同様に思います。
それに対して、実業務において方法を選択することは確かに難しいことであると実感いたします。
本コメント内だけでも、文法記述ミス以外は、どちらもミスではないですが、事象によって判断する必要があるのだと考えます。
深く向き合っていただきありがとうございました。
またよろしくどうぞお願い申し上げます。
0
プロ意識としてはテーブル（表組み）はレイアウトタグではないからですね。
投稿2016/08/08 09:26
総合スコア610
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。