HTML学習 第10回：テーブルのデザインとスマホ対応

このページでは、料金表や比較表などで使う table タグを、見やすくデザインする方法を学びます。

あわせて、スマホで横幅が足りないときに、横スクロール で崩れにくくする方法も見ていきましょう。

1. table の基本構造

HTMLの表は、基本的に次のようなタグで構成されています。

第10回では、「料金表」と「比較表」をサンプルとして、見やすい表を作ってみます。

メモ： 細かい見た目は table 本体ではなく、th / td / thead / tbody にCSSで指定していくのがポイントです。

2. 料金表のデザイン例

下の表は、学習コンテンツの「月額プラン」をイメージした簡単な料金表です。

学習プラン別 料金表（サンプル）
プラン名 料金（税込） 内容 おすすめ度
ライトプラン 500円 / 月 基礎学習ページの閲覧 ★☆☆☆☆
スタンダードプラン 1,000円 / 月 基礎＋実践サンプル＋コード解説 ★★★☆☆
プレミアムプラン 2,000円 / 月 すべてのコンテンツ＋個別サポート（仮） ★★★★★

※ この料金表はサンプルです。実際の料金やサービス内容とは関係ありません。

デザインのポイント

3. 比較表のデザイン例

次は、「第1〜10回の内容をざっくり比較する表」をサンプルとして作ってみます。

第1〜10回の学習内容（ざっくり比較）
回 テーマ 主な内容 レイアウトの特徴
第1回 HTMLの基本タグ 見出し・段落・リンク・リスト・表・フォームなど シンプルな1カラム
第4回 おすすめボックスと広告枠 aside を使ったおすすめ枠と広告ボックス 本文＋おすすめ＋広告
第6回 スマホ対応入門 viewport と @media による2カラム→1カラム レスポンシブレイアウト
第8回 カードデザインとボタン カード型レイアウトとCTAボタン カードグリッド
第10回 テーブルのデザイン 料金表・比較表とスマホ向け横スクロール 表＋横スクロール

※ スマホで見たときは、左右にスワイプ（横スクロール）して全体を確認してみてください。

メモ： 幅の狭い画面では、表を無理に縮めるよりも、overflow-x: auto; で「横にスクロールできる」ようにする方が、レイアウトが崩れにくくなります。