レスポンシブ テーブルでPCでもスマホでもきれいに見せれます

ども、中の人です。

ホームページを作る際によくある要望として、テーブルタグをどうしよう?というのがあります。

画像タグでするのか?
テーブルタグでするのか?

またテーブルタグも、横幅を100%として表示させるのか、スクロールさせるのか?

という事もあると思います。

 

これは、適材適所でいいと思っているところではありますが、更新時の利便性でいえば、テーブルタグにしておいて、きれいに見せる為にスクロールさせるという事かなと、現在では思っていたりします。

 

そういった視点で行けば、弊社が制作する際のベースにしているcocoon というテーマは秀逸です。

現在基本として納品するサイトはcocoonをカスタムしている。

このサイトもcocoonをカスタムしています。

 

アフィリエイトサイトではなく、会社のウェブサイトという事であれば、担当者のスキルがピンからキリまであるので、広告ページなどへの誘導についての、本当に細かい調整はアクセスが上がってからで十分かと思います。

それは、効果を出すためにはまずアクセスが発生しないと100%意味がないからです。

また、このcocoonでも十分効果を果たせる機能やシステムがふんだんに盛り込まれているというのも採用している理由です。

 

テーブルをレスポンシブでも対応できるようにしてくれる。

よくあるメニュー表などの比較をおこなったりする場合は、表のような表現がわかりやすかったりします。

ですが、表の表現は、PCで見る分には、あまりきにしなくてもいいのですが、スマートフォンで見ると考えたときに、PCとスマホでは明らかに画面の縦横の比率が逆転していますよね?

 

そこを、絶妙にサポートしてくれているのが素晴らしいと感じます。

 

テーブルタグを実際に表示するとこうなる。

ちょっと佐賀県の人口データを適当に処理してテーブル化しました。

数字や表のデータに意味はありません。

見え方だけに注目していただければと思います。

 

総数 828 388 391 276 437 112 年齢構造係数 年少人口指数 24.1
年少人口 114 298 年少人口 58 440 年少人口 55 858 年少人口 13.8 老年人口指数 49.4
生産年齢人口 475 189 生産年齢人口 233 248 生産年齢人口 241 941 生産年齢人口 57.4 従属人口指数 73.4
老年人口 234 545 老年人口 97 135 老年人口 137 410 老年人口 28.3 老年化指数 205.2