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>

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/12/10 17:35

それが表ならtableです。

<table summary="Navigation">
　<caption>ナビゲーション</caption>
　<thead>
　　<tr>
　　　<th abbr="サイト名">サイト名</th>
　　　<th abbr="説明">説明</th>
　　　<th abbr="アイコン"></th>
　　</tr>
　</thead>
　<tbody>
　　<tr>
　　　<td>グーグル</td>
　　　<td>世界最大の検索エンジン</td>
　　　<td><a href="https://www.google.co.jp/"><img src="https://www.google.com/images/logos/google_logo_ … width="116" height="41" alt="googleへ"></a>
　　　</td>
　　</tr>
　・・・・でしょう。
もしそれが、ナビゲーションのリストでしたら
<div class="Navigation">
　<h3>ナビゲーション</h3>
　<ul>
　　<li>グーグル
　　　<p>世界最大の検索エンジン
　　　　<a href="https://www.google.co.jp/"><img src="https://www.google.com/images/logos/google_logo_ … width="116" height="41" alt="googleへ"></a>
　　　</p>
　とマークアップされるかもしれません。

　項目の追加など後々のメンテナンスの容易さ、検索エンジン対策、印刷用のスタイルとか、スマホなど小さな画面用のスタイルとか、スクリーンリーダー用の読み方とか・・圧倒的なデザインの自由度などから、リストのほうが好まれますね。
　ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )は、HTMLにデザイン要素はないから自在にデザインできる。

　要は、「HTMLには文書構造しか書かない」プレゼンテーショはスタイルシートに任せる『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』さえ、理解できていれば、悩む問題じゃないですよ。デザイン(プレゼンテーション)目的にHTMLを書こうとするから、余計な悩みを抱えることになる。

　ちなみにHTML5だと、table要素のsummary属性、th要素のabbr属性か必須でなくなるので・・
tbody要素は必須です。

<table class="Navigation">
　<caption>ナビゲーション</caption>
　<thead>
　　<tr>
　　　<th>サイト名</th>
　　　<th>説明</th>
　　　<th></th>
　　</tr>
　</thead>
　<tbody>
　　<tr>
　　　<td>グーグル</td>
　　　<td>世界最大の検索エンジン</td>
　　　<td><a href="https://www.google.co.jp/"><img src="https://www.google.com/images/logos/google_logo_ … width="116" height="41" alt="googleへ"></a>
　　　</td>
　　</tr>
　・・・・
<nav>
　<h3>ナビゲーション</h3>
　<ul>
　　<li>グーグル
　　　<p>世界最大の検索エンジン
　　　　<a href="https://www.google.co.jp/"><img src="https://www.google.com/images/logos/google_logo_ … width="116" height="41" alt="googleへ"></a>
　　　</p>

この回答へのお礼

回答ありがとうございます
やはり、リストなんですね
リストで作ることにします

お礼日時：2013/12/10 19:41