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

しらぎくモバイルシステムFULLでのテーブル(表)処理について。特にテーブルの表示が出来ない端末への対応について解説します。

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

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

ドコモの旧型端末

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

H"

WAP 1.0 端末

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

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

最も基本的なテーブル。

例えば、以下のテーブルがあったとします。

読み飛ばす

<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>

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

読み飛ばす

堀北真希

出演携帯電話会社: NTTドコモ
出身地: 東京都
身長: 160cm
血液型: Ｂ型

仲間由紀恵

出演携帯電話会社: KDDI/沖縄セルラー
出身地: 沖縄県
身長: 160cm
血液型: Ａ型

上戸彩

出演携帯電話会社: ソフトバンクモバイル
出身地: 東京都
身長: 162cm
血液型: Ｏ型

HTMLとしては、以下のようになります。

実際には要素の包含関係に合わせた字下げはされません。

読み飛ばす

<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>

この事から、テーブルが処理出来ない環境でもテーブルの内容を適切にリスト化している事がお分かり頂けるかと思います。

テーブル処理の詳細。

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

1. 先ず、テーブルのヘッダを取り出す。

先ず、テーブルからヘッダとなる部分を分離します。

通常、テーブルのヘッダは<thead>要素としてマークアップする事とされておりますが、そのようなマークアップが行われていない場合であっても、以下のルールでヘッダと見なせる部分を取り出します。

テーブルの冒頭から空でないデータコマ(<td>要素)が含まれない連続する行(<tr>要素)をヘッダと見なす。

最も単純なテーブルで言えば、一行目のみがこれに該当するため、この部分をヘッダとして処理しております。

尚、テーブルを認識する環境に対しては、同様にフッタも取り出しますが、テーブルに対応していない環境では利用しようがないため、単純に削除または無視されます。

フッタは<tfoot>要素としてマークアップされていれば当該箇所をフッタとして分離しますが、そうでない場合には末尾から連続する見出しから成る行の集まりをフッタとして分離します。

2. 続いて、見出しの扱いを決める。

続いて、見出しコマ(<th>要素)の扱いを決めますが、これは特に指定がない限り、以下のように処理されます。

尚、scope属性が与えられたデータコマ(<td>要素)も、便宜上見出しコマと見なします。

通常の見出しコマの扱い。

scope属性で見出しの方向を指定しておらず、またデータコマからheaders属性で参照もされていない場合には、以下のように処理します。

ヘッダ部にある見出し

ヘッダ部にある見出しは、その見出しを含む列に掛かる見出しとして処理します。

ヘッダ部以外にある見出し

ヘッダ部以外にある見出しは、

左端にあればその行に掛かる見出しとして扱い、
何らかのデータコマ(<td>要素)より右にある場合はそれより右の行内のデータコマ全てに掛かる見出しとして扱います。

scope属性のある見出しコマの扱い。

一方、見出しコマ(<th>要素)またはデータコマ(<td>要素)にscope属性が与えられている場合には、以下のように処理します。

scope="col"属性またはscope="colgroup"属性が与えられている見出しコマに関しては、当該コマのある列に掛かる見出しとして扱います。
scope="row"属性またはscope="rowgroup"属性が与えられている見出しコマに関しては、当該コマのある行に掛かる見出しとして扱います。但しそのコマが他のデータコマ(<td>要素)より右にある場合には、それより右の行内の各データコマに掛かる見出しとして扱います。
その他のscope属性値は無効(エラー)であり、従って通常のコマと同様に扱われる事となります。

headers属性で参照されている表の見出しコマ。

また、他のデータコマからheaders属性で参照されている場合、以下のように扱います。

行内の全てのデータコマから参照されている見出し: その行全体に掛かる見出しと見なします。
その他の見出し: その他のheaders属性で参照されている見出しは、各コマに掛かる見出しと見なします。

複数行または複数列に跨る見出しコマの扱い。

尚、複数行或いは複数列に掛かる見出しについては以下のように扱います。

列見出しとして扱う見出しがcolspan属性で複数列に掛かる場合: 該当する列全てに掛かる見出しとして扱います。
行見出しとして扱う見出しがrowspan属性で複数行に掛かる場合: 該当する行全てに掛かる見出しとして扱うものとします。

3. 最後にデータコマを処理する。

最後にデータコマ(<td>要素)の扱いを決めますが、これは以下のように処理されます。

複数行に跨るデータコマ: rowspan属性で複数行に掛かるデータコマについては、該当する各行にデータがコピーされます。
複数列に跨るデータコマ: colspan属性で複数行に掛かるデータコマについては、内容表示の都合上跨るコマの一番右端にデータが移されます。

この他の便利な要素・属性の扱い。

しらぎくモバイルシステムFULLでは、テーブルに関連する以下の論理要素・論理属性をサポートします。

<caption>要素

テーブルの冒頭に出力されます。

<thead>要素

ヘッダとなる見出し行を明確にする事で、しらぎくモバイルシステムFULLが誤認する事を避けられるようになります。また、rowspan="0"属性を与えられたコマに関して、適切な処理が可能になります。

<tfoot>要素

フッタとなる見出し行を明確にします。また、rowspan="0"属性を与えられたコマに関して、適切な処理が可能になります。

<tbody>要素

現在のところ、複数の行グループに関して明確な区別を付ける事はしておりませんが、rowspan="0"属性を与えられたコマに関して、適切な処理が可能になります。

<colgroup>要素

列をグループ化する事で、colspan="0"属性を与えられたコマに関して、適切な処理が可能になります。

また、モバイルでは非表示扱いとするクラス名を予め決めておいて、それをclass属性として与えておく事で、当該列に関して非表示の指定を行う事が可能になります。

<col>要素

モバイルでは非表示扱いとするクラス名を予め決めておいて、それをclass属性として与えておく事で、当該列に関して非表示の指定を行う事が可能になります。

abbr属性

当該コマが繰返し現れる場合、二度目からはabbr属性があればその内容に置き換えられます。

尚、見出しコマでなくてもこの扱いは有効です。

axis属性

当該コマの内容の前に補助情報として附加されます。

現在のヴァージョンでは<table>要素に与えられたsummary属性は処理対象としておらず、これが唯一テーブル関連でサポート対象外となっている論理属性です。

もう一つの例。

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

読み飛ばす

<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>

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

読み飛ばす

平成21年度の携帯電話会社CM出演アイドル女優

堀北真希

出演携帯電話会社: NTTドコモ
出身地: 東京都
身長: 160cm
血液型: Ｂ型

仲間由紀恵

携帯会社: KDDI/沖縄セルラー
出身: 沖縄県
身長: 160cm
血液型: Ａ型

上戸彩

携帯会社: ソフトバンクモバイル
出身: 東京都
身長: 162cm
血液型: Ｏ型

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>

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

読み飛ばす

平成21年度の携帯電話会社CM出演アイドル女優

出演携帯電話会社

堀北真希: NTTドコモ
仲間由紀恵: KDDI/沖縄セルラー
上戸彩: ソフトバンクモバイル

出身地

堀北: 東京都
仲間: 沖縄県
上戸: 東京都

身長

堀北
仲間: 160cm
上戸: 162cm

血液型

堀北: Ｂ型
仲間: Ａ型
上戸: Ｏ型

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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダ部分は<thead>要素としてマークアップする

しらぎくモバイルシステムFULLは<thead>要素としてマークアップされていない場合、空でない<td>要素が含まれている行はヘッダの外にあるものと認識します。

このような誤認を避けるためにも、テーブルのヘッダについては<thead>要素としてマークアップしましょう。

<colgroup>要素で列グループを適切に指定する

列グループを適切に指定する事で、colspan="0"属性を与えられたコマに対して、適切な措置が可能になります。

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

モバイルにとって冗長な項目は非表示指定を行う

テーブルの内容は必ずしも全てを伝える必要がない場合が多いと思われます。

モバイル端末での可読性を考慮するのであれば、非表示扱いとする行や列を指定しておく事で余計なデータを送らないで済むようになります。

具体的な方法は以下のようになります。

列を非表示にする場合: 対応する列の<colgroup>要素または<col>要素に予め決めておいた非表示扱いとするクラス名をclass属性で与える事で、当該列を処理対象から外します。
行を非表示にする場合: 非表示にしたい行(<tr>要素)または行グループ(<tbody>要素など)に予め決めておいた非表示扱いとするクラス名をclass属性で与える事で、当該行或いは行グループを処理対象から外します。

クラス名の与え方

携帯端末のブラウザは、複数のクラス名を認識出来ないものが多いようです。

このため、クラス名に関しては、以下のように取扱っております。

行に与えたクラス名

以下の優先順位となります。

行(<tr>要素)に与えたクラス名
行グループ(<tbody>要素など)に与えたクラス名

上位になるクラス名が存在している場合、下位にあるクラス名は捨てられます。

列に与えたクラス名

以下の優先順位となります。

コマ(<td>要素など)に与えたクラス名
<col>要素に与えたクラス名
<colgroup>要素に与えたクラス名

上位になるクラス名が存在している場合、下位にあるクラス名は捨てられます。

以上の点から、スタイルを与えるためにクラス名を与える際には充分注意してください。

id属性の扱い

テーブル関連要素に与えられたid属性はフラグメントとしてのみ機能します。

従って特定の行グループ, 行, 列グループ, 列或いはコマに対して与えたid属性は、そのタグの後の最も近いコマの内容の先頭に<a id="○○"></a>要素として置き換えられます。

以上の点から、スタイルを与えるためにIDを与える事は出来ないと言う点に注意してください。