前回のｴﾝﾄﾘｰ｢携帯ｻｲﾄ(html)の制作に入る前に確認しておきたいﾁｪｯｸ項目｣では､tableを使わずにできるﾃﾞｻﾞｲﾝでｻﾝﾌﾟﾙﾍﾟｰｼﾞを作成しました｡

今回は｢tableを使用してよい｣という条件のもとで制作した場合､で考えてみます｡

ただ､table非対応機種で見てもそこまでむごい崩れ方をしないように考慮して制作します｡

ﾃﾞｻﾞｲﾝ､条件は前のｴﾝﾄﾘｰと同様です｡

<画像：初期提出ﾃﾞｻﾞｲﾝ>

前提条件は､
･3ｷｬﾘｱ1ｿｰｽ
･html(CSSは使用不可)
･文字ｺｰﾄﾞ：Shift-JIS
･改行ｺｰﾄﾞ：CR LF

対応端末は､
･docomo 901以降
･au WIN端末
･sb 3G
です｡
※table非対応端末が含まれているがtableは使用してよいこととする｡ただし､table非対応機種でもｻｲﾄの閲覧に支障がないようにすること｡

ﾁｪｯｸﾎﾟｲﾝﾄ

tableが使えることによって前よりもﾁｪｯｸすべきﾎﾟｲﾝﾄは減りましたが､tableを使うことによって新たなﾁｪｯｸﾎﾟｲﾝﾄが発生してきます｡

<画像：ﾃﾞｻﾞｲﾝのﾁｪｯｸﾎﾟｲﾝﾄ>

詳細は以下をどうぞ｡
前回とかぶる項目(文字ｻｲｽﾞや太字の項目)は割愛します｡

まずはtableが使えないときにNGとされていた部分について

ﾍﾟｰｼﾞの左右余白

前回NGとしていた｢ﾍﾟｰｼﾞ左右の余白｣を､今回はtableを使うことによって再現しています｡
こうすることによって､各ｾﾙ(td)の内側1つ1つすべてにfont指定をしています...面倒ですがこれをしないとﾃﾞﾌｫﾙﾄのｻｲｽﾞになりますので抜けてしまわないように注意が必要です｡

ﾘｽﾄｱｲｺﾝの下に文字が回り込まない

これもtableを使うことによってﾃﾞｻﾞｲﾝ通りにｺｰﾃﾞｨﾝｸﾞしています｡左寄せにしている画像の右側のﾃｷｽﾄが長くなっても画像の下に回り込まないようにするためには､tableが必要なのです｡

背景色

これもtableを使えばcssを使わずとも再現可能です｡ただ､table非対応機種のことを考慮すると文字色に気をつける必要がでてきます｡

｢ご注意ください｣の部分は背景色のｸﾞﾚｰが表示されなくてもきちんと文字が読めますが､ﾌｯﾀｰのｺﾋﾟｰﾗｲﾄ部分は背景色のｸﾞﾚｰが表示されないと文字が背景と同化してしまって全く読めなくなります｡

枠線内側の左右余白

｢ご注意ください｣の部分の枠線は､tableの背景色をｸﾞﾚｰにし､tdの背景色を極薄い青にして枠線っぽく見せています｡ なので､そのさらに内側の左右に余白をもたせようと思うとまたtableを使う必要がでてきてしまいます｡がしかし､tableを入れ子にしてしまうとauの一部機種で内側のtableの中身が一切表示されなくなります｡よってtableの内側にtableは使えません｡

tableの入れ子ができないとなると枠線の内側の左右余白はあきらめるしかなさそうです｡なので枠線にぴったり文字がくっつく感じになります｡

まとめ

tableを使うことによって､ただのhtmlｻｲﾄでもだいぶ見栄えの良い携帯ｻｲﾄが作れるようにはなります｡ ただ､やはりtableはできれば使いたくないので(使わないほうがいいと思うので)､背景色をいろいろ使いたい!という場合はxhtmlで作ったほうがいいです｡

※tableは絶対NG!というわけではないです｡tableでしか実現できなこともありますし､そういう時は使います｡ただ､cssでそれが実現できるのであればcssを使ったほうがﾍﾞﾀｰという考えです｡今回の背景色もわざわざtableを使わなくてもcssで実現できることなので｡
あとは､tableの入れ子はしないように注意が必要です｡

※追記

[ﾍﾟｰｼﾞ移動: 1 2]