|
>HOME >ホームページ
20091204 last update:20091206 ◆狙い ・アクセスブルな表（テーブル）作成。 ◆参考文献 20097/10/26 『Webアクセシビリティ――標準準拠でアクセシブルなサイトを構築／管理するための考え方と実践』』 毎日コミュニケーションズ 今までの生存学ホームページにおける表は http://www.arsvi.com/2000/0803ky06.htm などのように「レイアウトテーブル」というものを使用していた。 ■レイアウトテーブル ◆１．通常の場合
Cell 1 1→Cell 1 2→Cell 2 1→Cell 2 2 となる。 ◆２．ちょっと複雑なレイアウトテーブルの場合 ちょっと複雑なレイアウトテーブルになってくると本文がわかりにくくなる。
このように結合された表では、メインとなるコンテンツを見つけられるのが難しくなるため、レイアウトにはテーブル（表）を用いないのが良いだろう。 生存学ホームページではレイアウトとしてテーブルを使うことは少ないとしても、ではデータを扱うときはどうしたらよいだろう？ ■データテーブル ◆１．単純なデータテーブルの場合 「単純なデータテーブル」とは次の二点の条件を満たすもの ・データセルの列見出しが同じセルの列にあって、すべての列見出しが同じ行に並んでいる ・データセルの行見出しが同じセルの行にあって、すべての行見出しが同じ列に並んでいる つまり、データを扱った一般的な表のこと その際に気をつけたいのが次の二点 Ａ．データテーブルでは、行と列の見出しがわかるようにする Ｂ．行あるいは列の見出しが２階層異常あるデータテーブルでは、マークアップを用いてデータセルと見出しセルを関連付ける つまり、見出しがわかるようにすることが大事らしい ではそれぞれやってみる ◇Ａの場合（[付記：櫻井悟史]音声認識ソフトで読めること確認済み） 見出しの付け方は、行の場合は、scope="row"を、列の場合はscope="col"。 また行はtdで囲むことが一般的だが、よりわかりやすくするためにthで囲む。 こんな感じになる（全部、打ち込むのは手間だったので数値は同じです）
◇Ｂの場合（付記[櫻井悟史]：こちらは下記の通りしても音声認識ソフトで読むのは困難なようである。このぐらい複雑な表になるとエクセルでアップした方が読みやすいとの意見もあった） ２つの（論理的な）レベルの列見出しが付けられている場合（階層化テーブル）
どの見出しセルがどのデータセルに対応しているかを示すのは、headers/idマークアップと呼ばれる（らしい）。 このテクニックは手作業で間違いやすいが、基本的な考え方は解りやすい。それぞれの見出しセルにidを与えて、各データセルでは見出しにあるid文字列を指定する。その文字列はデータセルのheaders属性値というもので指定する。このページのタグを御覧いただけばわかるとおり、idで指定された文字列をスペース区切りで複数指定する。 ＊作成：岡田 清鷹 UP：20091204 REV:20091206 ◇ホームページ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||