しらぎくモバイルシステム VIでのテーブル処理。

テーブルをサポートしない主な端末。

以下の端末はテーブルをサポートしておりません。

ドコモの旧型端末

• ムーヴァ全機種
• フォーマの四桁型番全機種と三桁型番の初期端末

H"

WAP 1.0 端末

特にフォーマ端末は今後も残る事が予想されるため、これからも対応が必要になります。

しらぎくモバイルシステム VIでの処理例。

<table border="1" cellspacing="0" cellpadding="4">
			    <tr>
			        <td></td>
			        <th>出演携帯電話会社</th>
			        <th>出身地</th>
			        <th>身長</th>
			        <th>血液型</th>
			        </tr>

			    <tr>
			        <th>堀北真希</th>
			        <td>NTTドコモ</td>
			        <td>東京都</td>
			        <td>160cm</td>
			        <td>Ｂ型</td>
			        </tr>

			    <tr>
			        <th>仲間由紀恵</th>
			        <td>KDDI/沖縄セルラー</td>
			        <td>沖縄県</td>
			        <td>160cm</td>
			        <td>Ａ型</td>
			        </tr>

			    <tr>
			        <th>上戸彩</th>
			        <td>ソフトバンクモバイル</td>
			        <td>東京都</td>
			        <td>162cm</td>
			        <td>Ｏ型</td>
			        </tr>
			    </table>

<dl>
			    <dt>堀北真希</dt>
			    <dd>
			        <dl>
			            <dt>出演携帯電話会社</dt>
			            <dd>NTTドコモ</dd>
			            <dt>出身地</dt>
			            <dd>東京都</dd>
			            <dt>身長</dt>
			            <dd>160cm</dd>
			            <dt>血液型</dt>
			            <dd>Ｂ型</dd>
			            </dl>
			        </dd>

			    <dt>仲間由紀恵</dt>
			    <dd>
			        <dl>
			            <dt>出演携帯電話会社</dt>
			            <dd>KDDI/沖縄セルラー</dd>
			            <dt>出身地</dt>
			            <dd>沖縄県</dd>
			            <dt>身長</dt>
			            <dd>160cm</dd>
			            <dt>血液型</dt>
			            <dd>Ａ型</dd>
			            </dl>
			        </dd>

			    <dt>上戸彩</dt>
			    <dd>
			        <dl>
			            <dt>出演携帯電話会社</dt>
			            <dd>ソフトバンクモバイル</dd>
			            <dt>出身地</dt>
			            <dd>東京都</dd>
			            <dt>身長</dt>
			            <dd>162cm</dd>
			            <dt>血液型</dt>
			            <dd>Ｏ型</dd>
			            </dl>
			        </dd>
			    </dl>

テーブル処理の詳細。

テーブルを表としてレンダリング出来ない環境に対して、しらぎくモバイルシステム VIでは以下のような考え方でテーブルを処理します。

もう一つの例。

例えば、最も単純なテーブルを以下のように書き直したとします。

• 読み飛ばす

<table border="1" cellspacing="0" cellpadding="4">
		    <caption>平成21年度の携帯電話会社<abbr title="コマーシャル">CM</abbr>出演アイドル女優</caption>
		    <tr>
		        <td></td>
		        <th abbr="携帯会社">出演携帯電話会社</th>
		        <th abbr="出身">出身地</th>
		        <th>身長</th>
		        <th>血液型</th>
		        </tr>

		    <tr>
		        <th>堀北真希</th>
		        <td>NTTドコモ</td>
		        <td>東京都</td>
		        <td rowspan="2">160cm</td>
		        <td>Ｂ型</td>
		        </tr>

		    <tr>
		        <th>仲間由紀恵</th>
		        <td>KDDI/沖縄セルラー</td>
		        <td>沖縄県</td>
		        <td>Ａ型</td>
		        </tr>

		    <tr>
		        <th>上戸彩</th>
		        <td>ソフトバンクモバイル</td>
		        <td>東京都</td>
		        <td>162cm</td>
		        <td>Ｏ型</td>
		        </tr>
		    </table>

しらぎくモバイルシステム VIでは、テーブルを認識しない携帯電話に対して、以下のように出力します。

• 読み飛ばす

HTMLでは以下のようになります。

• 読み飛ばす

<dl>
		    <dt>平成21年度の携帯電話会社CM出演アイドル女優</dt>
		    <dd>
		        <dl>
		            <dt>堀北真希</dt>
		            <dd>
		                <dl>
		                    <dt>出演携帯電話会社</dt>
		                    <dd>NTTドコモ</dd>
		                    <dt>出身地</dt>
		                    <dd>東京都</dd>
		                    <dt>身長</dt>
		                    <dd>160cm</dd>
		                    <dt>血液型</dt>
		                    <dd>Ｂ型</dd>
		                    </dl>
		                </dd>

		            <dt>仲間由紀恵</dt>
		            <dd>
		                <dl>
		                    <dt>携帯会社</dt>
		                    <dd>KDDI/沖縄セルラー</dd>
		                    <dt>出身</dt>
		                    <dd>沖縄県</dd>
		                    <dt>身長</dt>
		                    <dd>160cm</dd>
		                    <dt>血液型</dt>
		                    <dd>Ａ型</dd>
		                    </dl>
		                </dd>

		            <dt>上戸彩</dt>
		            <dd>
		                <dl>
		                    <dt>携帯会社</dt>
		                    <dd>ソフトバンクモバイル</dd>
		                    <dt>出身</dt>
		                    <dd>東京都</dd>
		                    <dt>身長</dt>
		                    <dd>162cm</dd>
		                    <dt>血液型</dt>
		                    <dd>Ｏ型</dd>
		                    </dl>
		                </dd>
		            </dl>
		        </dd>
		    </dl>

以上のように、

• 出演携帯電話会社のコマについていたabbr="携帯会社"の値
• 出身地のコマについていたabbr="出身"の値

がそれぞれ二度目以降に使われており、また、rowspan属性を与えられた160cmのコマも適切に再配置されているのが分かります。

また、列と行を入れ替えたとします。

• 読み飛ばす

<table border="1" cellspacing="0" cellpadding="4">
			<caption>平成21年度の携帯電話会社<abbr title="コマーシャル">CM</abbr>出演アイドル女優</caption>
			<tr>
				<td></td>
				<th abbr="堀北">堀北真希</th>
				<th abbr="仲間">仲間由紀恵</th>
				<th abbr="上戸">上戸彩</th>
				</tr>

			<tr>
				<th abbr="携帯会社">出演携帯電話会社</th>
				<td>NTTドコモ</td>
				<td>KDDI/沖縄セルラー</td>
				<td>ソフトバンクモバイル</td>
				</tr>

			<tr>
				<th abbr="出身">出身地</th>
				<td>東京都</td>
				<td>沖縄県</td>
				<td>東京都</td>
				</tr>

			<tr>
				<th>身長</th>
				<td colspan="2">160cm</td>
				<td>162cm</td>
				</tr>

			<tr>
				<th>血液型</th>
				<td>Ｂ型</td>
				<td>Ａ型</td>
				<td>Ｏ型</td>
				</tr>
			</table>

これをしらぎくモバイルシステム VIを通すと、テーブルを認識しない携帯電話に対して、以下のように出力します。

• 読み飛ばす

ご覧の通り、一番目の見出し行で堀北真希, 仲間由紀恵, 及び上戸彩の見出しコマにそれぞれ abbr="堀北"属性, abbr="仲間"属性, 及び abbr="上戸"属性が附与されている事で出力二行目の出身地以降ではこれらの属性値(略称)に置き換えられているのが分かります。

また、colspan="2"属性を与えられ、堀北真希の列と仲間由紀恵の列に跨って表示される事となっている160cmと言う項目は、関与する堀北及び仲間の見出し(正確には<dt>要素)のあとに移され、それぞれに対応する内容である事を明らかにしております。

テーブルを用いる場合の推奨事項。

文書中にテーブルがある場合、以下のようにする事であらゆる端末の閲覧者にも適切に情報を提供出来るようになります。

特に、以下に挙げる措置はしらぎくモバイルシステム VIを利用しない場合であっても、視覚障害者などが音声または点字出力で情報を得るのに有利な手助けとなります。

• 制作者としては、しらぎくモバイルシステム VIを使う使わないに拘らず、表をHTML文書に記述するのであれば必ずやって欲しいと思っている事です。

モバイル向けにシンプルな表を作る

余り複雑な表を作ると、携帯端末で読めなくなる場合があります。

特に横スクロールを禁じている端末では、桁が増え過ぎると表が崩れるなどして読めない事もあり得ます。

このため、少なくとも桁は少なめにする事をお勧めします。

また、行も長過ぎると途中でページ分割が入ったりして閲覧性を損ねる事もありますので、余り長くならないようにしてください。

見出しコマにはscope属性を与える

見出しコマ(<th>要素)にはscope属性を与える事で、そのコマがどの方向に掛かるかが明確になります。

特にしらぎくモバイルシステム VIでは、scope属性の値に忠実に解析するようにしております。

• 各データコマ(<td>要素)にheaders属性を与えて、対応する見出しコマを指定する事も可能ですが、記述数が少ない分見出しコマ側にscope属性を与える方が簡単かと思われます。

見出しコマや複数行に跨るデータコマにはabbr属性を与える

テーブルに対応していない環境に対して、しらぎくモバイルシステム VIはabbr属性が与えられているコマについて、一回目は当該要素の内容をそのまま出しますが、二回目以降はabbr属性で表される略称を代わりに出力します。

情報の欠落の恐れが無い限り、abbr属性で端折った表現を与えておく事をお勧めします。

以下はしらぎくモバイルシステム VIの処理上の都合に依る推奨事項ですが、それでも他の非視覚系環境への対応を阻害する事はない筈のものです。

クラス名の与え方

WAP 2.0 端末向けには、<tr>要素, <th>要素及び<td>要素のclass属性はそのまま出力されます。

一方、携帯電話向けのHTMLでは行グループ(<tbody>要素など), 列(<col>要素)及び列のグループ化(<colgroup>要素)は定義されておりません。

従って、これらの要素にクラス名を与えても、携帯端末では利用出来ませんし、しらぎくモバイルシステム VIでも当然無視します。

行にクラス名を与える場合には必ず<tr>要素に、列にクラス名を与える場合には対応するコマ全てにそれぞれクラス名を与えてください。

id属性の扱い

WAP 2.0 端末向けには、<tr>要素, <th>要素及び<td>要素のid属性はそのまま出力されます。

• このため、これらの要素であれば、IDセレクタに依るスタイル指定が可能になります。

その他の端末に対しては、これらの要素に与えられたid属性はフラグメントとしてのみ機能します。

• すなわち、行或いはコマに与えたid属性は、そのタグの後の最も近いコマの内容の先頭に<a id="○○"></a>要素または<a name="○○"></a>要素として置き換えられます。

尚、携帯電話向けのHTMLでは行グループ(<tbody>要素など), 列(<col>要素)及び列のグループ化(<colgroup>要素)は定義されておりません。

従って、これらの要素にid属性を与えても、携帯端末では利用出来ませんし、しらぎくモバイルシステム VIでも当然無視します。