仙台のホームページ制作・システム開発・ウェブコンサルティングはアド・エータイプへ。

テーブル要素をレスポンシブ対応でスマホでも見やすくするjQueryプラグイン「Basic Table」

公開日:

jQuery

テーブル要素をレスポンシブ対応でスマホでも見やすくするjQueryプラグイン「Basic Table」

 

WEBサイト制作でテーブルを使って表を作成した際に、スマホやタブレットだと表が閲覧しづらくなってしまうことがあります。

 

今回紹介するjQueryのプラグイン「Basic Table」を使用すると、テーブル要素をレスポンシブで見やすく表示(ブラウザの幅を変更するとテーブルのレイアウトが変更)することが可能です。
ユーザビリティーの向上に繋がるので、レスポンシブでサイト制作をしている場合などにおすすめのプラグインです。

 

下記にjQueryのプラグイン「Basic Table」の使用方法を記載します。

 

 

「Basic Table」の使用方法

下記のページから「Basic Table」をダウンロードします。

 

https://github.com/jerrylow/basictable

 

 

ファイル読込

jQueryとダウンロードした「Basic Table」のjs、cssを読み込みます。

※テーブルのスタイルは別に設定します。

 

 

HTML

テーブルを用意します。

 

 

JS

用意したテーブルに対し「Basic Table」を使用します。

※オプションなしの場合です。

 

 

サンプル

ブラウザの幅を変更するとレイアウトが変わります。

 

「Basic Table」を使用したデモページ

 

 

※他にもオプションがありますのでチェックしてみてください。

 

 

まとめ

レスポンシブでサイトを制作していると、テーブルをどのように表示したら見やすいかなど迷うことがあると思います。
上記の方法を使用するとスマートフォンでも、テーブルを綺麗に見やすく表示することが可能になります。

 

スマートフォンの利用者が増えているので、今後このような対策が必要になってきますよね。
是非チェックしてみてください。

ブログ作成者3
  • このエントリーをはてなブックマークに追加

ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください!

お気軽にご相談ください。
022-716-3883
営業時間 平日9:30~18:00