ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

表の特定の列だけを抜粋して表示できるようにする方法

ウェブ上に掲載している表組み(テーブル)でも、閲覧者が列の「表示・非表示」を切り替えられるようにしてみましょう。不要な列を非表示にできると、列数の多い表でも列幅が狭くなりすぎるのを防げ、見やすさを維持できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

項目数の多い表を見るのは大変

列数が多い表は読むのが大変

列数が多い表は読むのが大変

項目数の多い表を見る際は、自分の目がどこを見ているのかを把握し続けるのが大変です。油断すると、異なる行を見てしまっていたりします。そのような大きな表では、自分が必要としている(見たい)情報は一部分だけのこともあります。もし、その表が表計算ソフト上に表示されているなら、不要な列を非表示にして、見やすく調整するでしょう。

そのような「列の非表示」機能を、ウェブ上に掲載した表(テーブル)でも簡単に実現するスクリプトがあります。

ウェブ上の表でも、見たい(必要な)列だけを抜粋して表示できると便利

列数の多い表を、横幅の狭いウインドウで閲覧すると、列の横幅が狭くなって読みにくくなる。

列数の多い表を、横幅の狭いウインドウで閲覧すると、列の横幅が狭くなって読みにくくなる。

例えば、「列数の多い表」が掲載されているウェブページを、「横幅の狭いウインドウ」で閲覧すると、右図のように各列の幅が狭くなってしまい、読みにくくなります。

そこで便利なのが、「表示する列数」を制限するスクリプトです。このようなスクリプトを使うと、描画領域の幅に合わせて列数を(重要でない項目から順に)自動的に削減してくれます。また、下図の右端にあるように「列名を列挙したチェックボックス」を提供し、「どの列を表示するか」を閲覧者が選択できるようにもなります。

一部の列を非表示にすることで、表が読みにくくなるのを防ぐ。

一部の列を非表示にすることで、表が読みにくくなるのを防ぐ。


上図は、列の非表示機能を提供するスクリプト「MediaTable」を使って表を表示した例です。このスクリプトを使うことで、描画領域の幅や閲覧者の希望に応じて「表示する列数」が減らせ、必要な情報だけを抜粋した小さな表にできます。JavaScriptで動作するため、ページの遷移なく、その場で表示が切り替わるので、待ち時間のストレスは一切ありません。

情報が探しやすくなる上に、狭い画面での閲覧時にも有用

このスクリプトを使って、「表示する列」を閲覧者自身が選択できるようにしておくことは、大きな表を掲載する際にとても便利です。しかし、それほど大きくない表であっても、画面幅の狭い環境で閲覧される際には便利です。単一のHTMLで様々な画面サイズに対応させる「レスポンシブ・ウェブデザイン」を採用したページに表を掲載する際にも、便利に活用できます。

表を展開することで読みやすさを確保する方法もある。

表を展開することで読みやすさを確保する方法もある。

前回の記事「幅が狭い画面では表を展開! stacktable.jsの使い方」は、「表が見にくくならないように展開する」方法でした。それに対して今回ご紹介するスクリプトの場合は、「表が見にくくならないように列数を減らす」方法です。

これら両方のアプローチを知っておくと、表の目的に応じて表示方法を選択できて便利でしょう。ぜひ、両方の表示方法を、必要に応じて活用してみて下さい。


 
【本記事の目次】
1. 「MediaTable」を入手して設置する方法 (p.2)
2. 「MediaTable」をページ上のテーブルに対して使うための記述方法 (p.3)
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます