用語｜意味
SEM｜Search Engine Marketingの略
SEO｜Search Engine Optimizationの略。
こんな感じのテーブルがあったとして、どうマークアップするかってのがお題です。
（dl dt dd なんかは使わない、あくまでもtableでってのを前提条件として）
CSS Happy lifeのhirasawaさん が書いてた記事で見つけたんですけど、これどうしたらいいんだろう・・・
————————————————————-
table
tr
th 用語 /th
th 意味 /th
/tr
tr
th SEM /th
td Search Engine Marketingの略 /td
/tr
tr
th SEO /th
td Search Engine Optimizationの略。 /td
/tr
/table
————————————————————-
こんな感じのサンプルがあるわけですが、要はSEMやSEOの部分をthでマークアップするのかtdでマークアップするのかって事なんです。
用語という見出しに対してのSEMだからtd。
でも、SEMはSearch Engine Marketingの略に対しての見出しでもあるわけだからth。
ここなんですよね・・・
でも、scope属性を使ってやれば、セルに意味を持たせる事ができるし、セルがどちらの方向に対する見出しなのか関連付ける事ができますよね。
だからこんな感じだろうと思って書き込んでみたんです。
————————————————————-
table
tr
th scope=”col” 用語 /th
th scope=”col” 意味 /th
/tr
tr
th scope=”row” SEM /th
td Search Engine Marketingの略 /td
/tr
tr
th scope=”row” SEO /th
td Search Engine Optimizationの略。 /td
/tr
/table
————————————————————-
これで、SEMやSEOはX軸に対する見出しというふうに意味付けられるし、音声ブラウザ的にも問題なかろうかと思ったんですが。
書き込んだ後、まだ違和感があったのでもう少し考えてみた。
確かにセル同士の関連付けはされたように感じたんだけど、
SEMという見出し（th）に対する、用語という見出し（th）って、どういう意味・・・？
仮にSEMやSEOをtdでマークアップしたらどうなるだろって考えても、結局上と同じように、今度はX軸の方で、なんか妙な主従関係ができあがっちゃう訳ですよね。（SEMはtdなのに見出しなのっていう・・・）
結局、scope属性を使っても、元の問題定義の部分に戻ってきちゃう訳です。
ちょいと調べてみたら、こんなサイトを見つけました。
ここで、見つけたのが下記
——————————————————
年度｜2000年｜2001年｜2002年
売上｜1000億｜1000億｜1000億
利益｜1250億｜1500億｜1850億
”この2000～2002という数字が見出しなのかデータなのかは若干曖昧な部分があり、どちらともいうことができます。こういう場合、HTML4仕様書の11.4.1では、セルをtd要素としてマークアップし、scope属性を加えることが推奨されています。”
——————————————————
とりあえず、答えは出ました。
SEMやSEOはthではなく、tdでマークアップ。
でも・・・
そういうふうに推奨されてるって言われてしまうと、それまでなんですが、なんかこうしっくりこないというか何というかゴニョゴニョ・・・
一つ提案。
結局は、一番左上のセルが邪魔になってるわけなので削除しちゃいましょう！
——————————————————
空白｜意味
SEM｜Search Engine Marketingの略
SEO｜Search Engine Optimizationの略。
——————————————————
こんな感じで書いて、あとはsummaryやcaptionなんかに「Web用語集」とかを入れる。
そして、意味、SEM、SEOはthでマークアップ。
どうでしょう。
——————————————————
年度｜2000年｜2001年｜2002年
売上｜1000億｜1000億｜1000億
利益｜1250億｜1500億｜1850億
——————————————————
この場合だと、左上の年度を消してしまうのはマズい気がするので、下のように書くとか。
——————————————————
空白｜2000年度｜2001年度｜2002年度
売上｜1000億 ｜1000億 ｜1000億
利益｜ 125億 ｜ 150億 ｜ 185億
——————————————————
強引かなー。
あと、イレギュラーなものに対応できなさそうですね・・・。
やっぱり仕様書の通りがベスト、いやベターかな（あくまで反抗）。
