制作会社が現場で使う、CSSで作るテーブルのレスポンシブ対応のデモページ

参考例①

会社概要

見やすい例

480pxでデザインが変わります

社名 UNIONNET Inc.（株式会社ユニオンネット）
連絡先 フリーダイヤル　0120-44-2960
TEL 06-6941-2388
FAX 06-6941-2377
設立 2004年9月
代表取締役 丸山 享伸
所在地 〒540-0031 大阪市中央区北浜東1-22 北浜東野村ビル4F
アクセス 大阪メトロ 谷町線・京阪電車「天満橋」駅、2番出口より徒歩6分

NGな例

480pxでデザインが変わります

社名 UNIONNET Inc.（株式会社ユニオンネット）
連絡先 フリーダイヤル　0120-44-2960
TEL 06-6941-2388
FAX 06-6941-2377
設立 2004年9月
代表取締役 丸山 享伸
所在地 〒540-0031 大阪市中央区北浜東1-22 北浜東野村ビル4F
アクセス 大阪メトロ 谷町線・京阪電車「天満橋」駅、2番出口より徒歩6分

NGな理由

  • 中央寄席、段落センター
  • 変なところでの改行
  • 情報が整理されておらず、雑多な印象を与える
参考例②

3列以上の比較表

見やすい例

768pxでデザインが変わります

おすすめ！
プランA		 プランB プランC プランD
HTML ◎ ◎ ○ ○
CSS ◎ ○ ○ ×
JavaScript ◎ ○ × ×
WebGL ◎ ◎ × ×

NGな例

768pxでデザインが変わります

おすすめ！
プランA		 プランB プランC プランD
HTML ◎ ◎ ○ ○
CSS ◎ ○ ○ ×
JavaScript ◎ ○ × ×
WebGL ◎ ◎ × ×

NGな理由

  • thの段落ち
  • 行が多くなればなるほど、tdが狭くなる
  • 文章が細かくなり見にくい
参考例③

行が多い表

見やすい例

768pxでデザインが変わります

機能 X01プラン X02プラン X03プラン
月額費用 100円 1,000円 2,000円
初期費用 0円 5,000円 7,000円
SSL対応 ○ ○ ○
データベース管理 無料 無料 有料
メールサポート × × ○
サーバー保守 ○ ○ ×
バナー変更 × ○ ○
SNS代行 6,000円 5,000円 3,500円
転送料課金 × ○ ○
WAF ○ ○ ○
お問い合わせ × × ○

NGな例

768pxでデザインが変わります

機能 X01プラン X02プラン X03プラン
月額費用 100円 1,000円 2,000円
初期費用 0円 5,000円 7,000円
SSL対応 ○ ○ ○
データベース管理 無料 無料 有料
メールサポート × × ○
サーバー保守 ○ ○ ×
バナー変更 × ○ ○
SNS代行 6,000円 5,000円 3,500円
転送料課金 × ○ ○
WAF ○ ○ ○
お問い合わせ × × ○

NGな理由

  • 横スクロールはできるけど、ヘッダーが固定できていないとなんの項目かが分かりづらい
  • 内容を見て固定するorしないを選定する
おまけ

tableタグを使用しない表

flexbox

480pxでデザインが変わります

社名
UNIONNET Inc.（株式会社ユニオンネット）
連絡先
フリーダイヤル　0120-44-2960
TEL 06-6941-2388
FAX 06-6941-2377
設立
2004年9月
代表取締役
丸山 享伸
所在地
〒540-0031 大阪市中央区北浜東1-22 北浜東野村ビル4F
アクセス
大阪メトロ 谷町線・京阪電車「天満橋」駅、2番出口より徒歩6分