BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

表形式で表示できない環境への配慮

携帯電話環境への配慮

携帯電話環境の場合、table関連要素をサポートしないものが多く存在します。HTMLソースからtable関連タグを除いてもセルの対応関係が崩れないように記述しましょう。

良くない例
主要都市の天気予報
都市名札幌
天気降水気温8021/14
東京名古屋
6021/185025/18
大阪福岡
3027/204026/21

縦と横の関係がはっきりしていません。

良い例
主要都市の天気予報<br />
都市名 天気 降水確率 気温(最高/最低)<br />
札幌 80 21/14<br />
東京 60 21/18<br />
名古屋 50 25/18<br />
大阪 30 27/20<br />
福岡 40 26/21<br />

縦と横の関係がはっきりしています。また、携帯電話環境においても問題なく表示されるよう適宜改行タグを用い、隣り合うセルのデータが混同しないよう、次のように半角スペースを挿入しています。

<td>札幌</td> <td></td> <td>80</td> <td>21/14<br></td>

これらを、table関連要素をサポートしない携帯電話環境で表示すると次のようになると思われます(*1)

良くない例
主要都市の天気予報都市名札幌天気降水気温雨8021/14東京名古屋曇6021/18曇5025/18大阪福岡晴3027/20曇4026/21
良い例
主要都市の天気予報
都市名 天気 降水確率 気温(最高/最低)
札幌 雨 80 21/14
東京 曇 60 21/18
名古屋 曇 50 25/18
大阪 晴 30 27/20
福岡 曇 40 26/21

どちらが見やすいかは一目瞭然ですね。

非視覚系環境への配慮

音声ブラウザや点字ブラウザのような非視覚系ブラウザにおいては、一般的な視覚系ブラウザに比べて情報の抽出が難しいため、これらの環境をサポートするための属性が用意されています。

表の一例
主要都市の天気予報
都市名 天気 降水確率 気温(最高/最低)
札幌 80 21/14
東京 60 21/18
名古屋 50 25/18
大阪 30 27/20
福岡 40 26/21

この表では、「都市名」「天気」「降水確率」「気温(最高/最低)」は見出しなのでth要素を用いています。「札幌」「東京」「名古屋」「大阪」「福岡」は見出し「都市名」のデータなのでtd要素を用いていますが、同時に横方向の見出しも兼ねています。scope属性を指定することで、該当するセルを見出しとして扱った場合のデータの方向を示すことができます。

HTMLソース
<table summary="主要都市の天気、降水確率、最高気温及び最低気温の予報">
<caption>主要都市の天気予報</caption>
<tr><th>都市名</th> <th>天気</th> <th>降水確率</th> <th>気温(最高/最低)</th></tr>
<tr><td scope="row">札幌</td> <td>雨</td> <td>80</td> <td>21/14</td></tr>
<tr><td scope="row">東京</td> <td>曇</td> <td>60</td> <td>21/18</td></tr>
<tr><td scope="row">名古屋</td> <td>曇</td> <td>50</td> <td>25/18</td></tr>
<tr><td scope="row">大阪</td> <td>晴</td> <td>30</td> <td>27/20</td></tr>
<tr><td scope="row">福岡</td> <td>曇</td> <td>40</td> <td>26/21</td></tr>
</table>

データが縦方向の見出しを兼ねる場合には、scope属性の値をcolとします。

単純な表の場合には有効なscope属性ですが、データの位置が見出しに対して縦または横の方向になければ指定できません。見出しの位置が不規則な場合には、代わりにheaders属性を用います。

見出しの位置が不規則な表の一例
主要都市の天気予報
都市名
天気 降水確率 気温(最高/最低)
札幌
80 21/14
東京
60 21/18
名古屋
50 25/18
大阪
30 27/20
福岡
40 26/21

4行目第1列のデータ「雨」の見出しは「天気」及び「札幌」であることを意図しています。これを明白にするには、見出しにid属性を指定して、それぞれのデータに対応する見出しのidをheaders属性で参照します。

HTMLソース
<table summary="主要都市の天気、降水確率、最高気温及び最低気温の予報">
<caption>主要都市の天気予報</caption>
<col span="3" align="center" width="150" /> <tr><th id="a1" colspan="3">都市名</th></tr>
<tr><th id="b1">天気</th> <th id="b2">降水確率</th> <th id="b3">気温(最高/最低)</th></tr>
<tr><td id="c1" headers="a1" colspan="3">札幌</td></tr>
<tr><td headers="b1 c1">雨</td> <td headers="b2 c1">80</td> <td headers="b3 c1">21/14</td></tr>
<tr><td id="e1" headers="a1" colspan="3">東京</td></tr>
<tr><td headers="b1 e1">曇</td> <td headers="b2 e1">60</td> <td headers="b3 e1">21/18</td></tr>
<tr><td id="g1" headers="a1" colspan="3">名古屋</td></tr>
<tr><td headers="b1 g1">曇</td> <td headers="b2 g1">50</td> <td headers="b3 g1">25/18</td></tr>
<tr><td id="i1" headers="a1" colspan="3">大阪</td></tr>
<tr><td headers="b1 i1">晴</td> <td headers="b2 i1">30</td> <td headers="b3 i1">27/20</td></tr>
<tr><td id="k1" headers="a1" colspan="3">福岡</td></tr>
<tr><td headers="b1 k1">曇</td> <td headers="b2 k1">40</td> <td headers="b3 k1">26/21</td></tr>
</table>
(*1)
テーブル関連要素を使わず擬似的に再現しています。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。