| | |  使用上の注意
| | | |
| | | | この要素は本来はデータを表形式で表示させる目的の要素ですが、デザイン目的でも多用されています。アクセシビリティを考慮するならば、「summary属性」で目的を簡単に説明するのも良い方法ですが、検索サイトなどデータを表示するページが多い場合は余り説明が多いと音声ブラウザなどでは「くどい」場合もあるので、説明の多用は避けるべきです。 | | | |
| | | | 利用不可
この要素は携帯電話用ページでは存在しない要素なので、同一ページで携帯対応にする場合は、「div要素」で記述します。通常は別ページだと思いますので、余り意識する必要はないかも知れません。 | | | |
| | | tableとdivの違い | | | |
| | | | ウェブサイトではデータ表示の有無に関わらず、table要素が多用されています。これはデザイン上圧倒的に有利な要素だからですが、以下で有効属性を比較してみます。 | | | |
| | | | div要素で使用できるＨＴＭＬ属性
class,id,title,style,lang,dir,align
※「align属性」は、transitionalかつ非推奨属性です。 | | | |
| | | | table要素で使用できるＨＴＭＬ属性
summary,width,border,frame,rules,cellspacing,cellpadding
class,id,title,style,lang,dir,align,bgcolor
※「align属性」と「bgcolor属性」は、transitionalかつ非推奨属性です。 | | | |
| | | | 比較結果
上記の利用可能な属性を比較すれば一目瞭然ですが、div要素には空間や幅などを指定できる属性がありません。ＨＴＭＬからこのようなデザイン要素を排除してＣＳＳで設定するのがＷＷＷ標準化ですが、単純なテキストページと単純な構成のページでない限りdiv要素には限界があります。もちろん不可能ではありませんが、一般的には画像を利用するなどの工夫が必要です。一方table要素は幅を指定できるのでデザイン上の対応範囲が広くなります。またサイトの内容が追加された時などにも再現性に優れます。 | | | |
| | | tableの幅の指定 | | | |
| | | | ＷＷＷ標準化ではＨＴＭＬで幅（デザイン）を指定することは非推奨となっているので、ＣＳＳで設定する必要があります。理想を言えば％で指定するべきですが、サイドメニューを使用するサイトでは、メニュー部分を絶対値で指定するのが現実的です。下記リンクよりサンプルページをご参照ください。ブラウザの幅をある程度狭くしても横にスクロールする必要がないことを確認いただけると思います。（メニュー部分は絶対値・右本文部分は幅指定なし） | | | |
| | | 例外事項 | | | |
| | | | border,cellspacing,cellpadding属性もデザインなので、本来はＣＳＳで設定すべきですが現状では不可能です。これはＷＷＷ標準化が過度期なのでＣＳＳの解釈もＯＳやブラウザによって異なる為です。特にtableは大きなボックス構造なので、現在多くのサイトのＨＴＭＬではこれらの属性を「0」指定して、更にＣＳＳの設定にも配慮しています。 | | | |
| | | 表としての使用 | | | |
| | | | 下記サンプルは一般的な表ではないので余り参考になりませんが、
border=4 cellspacing=2 cellpadding=2を指定しています。 | | | |
| 
