スマホ時代のWeb制作 「 表＜table＞の使い方 」

ホームページで表を使うのもとても有効です。
ページのレイアウトに表を使うのは、おすすめできません。（レイアウトはCSSファイルで設定するのがよろしいです。）

表形式で表現した方が、見る人がわかりやすい情報は表を使うのがよろしいと思います。
例えば、会社案内、価格表、製品仕様、性能表示、時間割、カレンダーなどは表を使うと、訪問者もわかりやすいと思います。

最近では、スマートフォンを使ってホームページを見るユーザーも増えてきました。
そこで、スマートフォンでも見やすい表を作るコツがあります。

表の幅を決めない（幅を数値で指定しない）

表の幅、列の幅はなりゆきで表示させる

折り返しをさせたくない場合はCSS（white-space: nowrap;）で指定します。
参考HP→ http://www.htmq.com/style/white-space.shtml

シンプルな構造の表にします

セルを結合しない表がおすすです。（スマホで画面内に表示されます）

見出し行を設定します

見出しの行は<th>タグ（table header cell）を使います。

参考HP→ http://www.htmq.com/html5/td.shtml

行数が多い場合は、行の背景に色を付ける

CSSで設定します。
事例ページ→ コンピュータリブ社 沿革ページ
参考HP→ http://www.tagindex.com/hp_guide/table/04.html

WordPressを使って表を作る場合

表の挿入

ツールバーのボタンをクリックして簡単に表が作れます。

見出し行の設定

見出し行をマウスで選択して、表ボタンから「セルのプロパティ」－「セルの種類」でヘッダーセルを選択します。

ビジュアルモードで見た場合

なるべくシンプルな表にする。

テキストモードで表示

表の幅を指定しない。

項目は<th>タグを使う。

パソコンで見たところ

スマートフォンで見たところ

パソコンでは２列だった表が、スマートフォンでは１列にレイアウトが変わって表示されます。
ホームページを見るディバイスの画面の大きさによってレイアウトが変わるように設計されています。（レスポンシブデザイン）

表を上手に使用しているサイト（スマートフォンでもご確認下さい）

西研究所さま

イベントカレンダーをシンプルな表で作成しています。
表の行数が多い場合は、行の背景色を着け見やすくしています。

３M経営

イベントカレンダーをシンプルな表で作成しています。

クローバ経営研究所さま

イベントをシンプルな表で作成しています。

ウィズアクトさま

イベントをシンプルな表で作成しています。