tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」 | サービス | プロエンジニア

    tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」

    • このページをはてなブックマークに追加

    レスポンシブ対応のjQueryプラグインはたくさんありますが、本コラムでは「Basic Table」を使って、テーブルレイアウトをレスポンシブ対応させる方法について解説します。テーブルをレスポンシブ対応させるには、jQueryプラグインだけでなくCSSのみで実現する方法や、jQueryプラグインとCSSを組み合わせた方法があります。
    HTMLとCSSのみでレスポンシブテーブルデザインを作成する方法については、「レスポンシブ対応のtableを作成しよう!」をご参考下さい。
    また、HTMLでテーブルを作成する方法や、CSSでテーブルのスタイルを指定する方法など基本的なコードの記述方法については、以下の関連記事もご参考下さい。

    関連記事:「HTML入門【<table>タグ】~テーブル(表)を作成してみよう~
    関連記事:「CSSでテーブル(表)をデザインする方法【基礎編】
    関連記事:CSSでテーブル(表)をデザインする方法【応用編】
    関連記事:CSSでシンプルなテーブルをデザインする

    最終更新日:2018年1月10日

    目次

    1. 「Basic Table」プラグインをダウンロードする

    1.1. 作者のページからjQueryプラグインをダウンロードする

    まずは、tableのレスポンシブ対応用のプラグイン「Basic Table」を作者のサイトからダウンロードしてみましょう。

    「Basic Table」作者のサイト:http://www.jerrylow.com/basictable/

    ●Basic Table

    ダウンロードサイトの真ん中にある緑色の「View on Github」ボタンをクリックして下さい。

    ●Basic Tableのダウンロード

    Githubのダウンロードサイトに移動しますので、ページ中央右側の「Clone or download」をクリックし、「Download ZIP」を選択します。圧縮ファイル(basictable-master.zip)をPCの任意の場所に保存して下さい。

    ▲ページトップへ戻る

    1.2. jQueryプラグインの使える環境を整える

    1.2.1. 圧縮ファイル(basictable-master.zip)を解凍する

    次に、jQueryプラグインを使う環境をPC上に作成します。まずは、ダウンロードした圧縮ファイル(basictable-master.zip)を解凍して下さい。

    ●圧縮ファイル(basictable-master.zip)の解凍

    ZIPファイルを右クリックして、メニューから「すべて展開」を選択します。「basictable-master」フォルダー内にCSSファイルやJavaScriptファイルなど、レスポンシブ対応用の各種ファイルが展開されます。

    ●「basictable-master」フォルダー

    ▲ページトップへ戻る

    1.2.2. 「demo」フォルダーを確認する

    解凍した「basictable-master」フォルダー直下の「demo」フォルダーの中には、レスポンシブ対応HTMLのサンプルファイルが入っています。
    「index.html」ファイルをダブルクリックして動作を確認してみて下さい。

    ●「Basic Table」のサンプルHTML(index.html)

    通常のテーブルデザインは、見出しの「NAME」、「AGE」、「GENDER」、「HEIGHT」などの項目が1列目に表示され、そのデーターが下のセルに一覧として表示されています。

    ●レスポンシブテーブルデザイン(index.html)

     

    ブラウザーの幅を小さく(568px以下に)してみると、見出しの項目名が左側の列、データーが右側の列に表示されます。サンプルを元に、レスポンシブテーブルを作成してみましょう。

    ▲ページトップへ戻る

    1.2.3. Webサイト用のフォルダーにプラグイン関連ファイルをコピーする

    ローカルPC上に、Webサイト作成用のフォルダーを用意して、HTMLドキュメントを保存するフォルダーに、プラグイン関連ファイルをコピーします。

    ●Webサイト用のwwwフォルダー

    本コラムでは、Webサイト用のファイルを保存する「www」フォルダーの直下に、cssファイルを保存する「css」フォルダーと、jQueryファイルを保存する「js」フォルダーを作成しました。

    ●「basictable-master」フォルダー

    ●「basictable-master\demo\css」フォルダー

    「basictable-master」フォルダー直下にある「jquery.basictable.min.js」ファイルを「www\js」フォルダーにコピーし、「basictable.css」ファイルを、「www\css」フォルダー内にコピーします。また、「basictable-master\demo\css」フォルダーにある「style.css」ファイルを「www\css」フォルダーにコピーします。「www」フォルダー内の構成は以下の通りです。

    ・「www\css\basictable.css」
    ・「www\css\style.css」
    ・「www\js\jquery.basictable.min.js」

    次に、レスポンシブテーブルの元となるテーブルを作成した後に、プラグインを適用していきましょう。

    ▲ページトップへ戻る

    2. レスポンシブ対応用の基本テーブルを作成する

    まずは、レスポンシブ対応前の基本となるテーブルを作成しましょう。「responsive-table1.html」を先程作成したWebサイト用のフォルダーに保存して下さい。ファイルの保存形式は「utf-8」にします。本コラムでは、「www」フォルダーの直下にHTMLファイルを保存しています。

    ●responsive-table1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>レスポンシブテーブル</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>
    
    <table id="table">
    	<thead>
    		<tr>
    			<th>見出し1</th>
    			<th>見出し2</th>
    			<th>見出し3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>データ1-1</td>
    			<td>データ1-2</td>
    			<td>データ1-3</td>
    		</tr>
    		<tr>
    			<td>データ2-1</td>
    			<td>データ2-2</td>
    			<td>データ2-3</td>
    		</tr>
    		<tr>
    			<td>データ3-1</td>
    			<td>データ3-2</td>
    			<td>データ3-3</td>
    		</tr>
    	</tbody>
    </table>
    
    </body>
    </html>
    

    「responsive-table1.html」では、「style.css」でデモ(demo)と同じスタイルのテーブルデザインを作成しています。7行目の<link>タグで、スタイルシートの「style.css」を指定しています。

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    

    テーブルに対して、レスポンシブ対応用の指定はまだしていません。CSSでテーブルの枠線や色、その他テキストの位置や折り返し処理などを設定しています。ブラウザーの幅を小さくすると、テーブルの幅と内容が自動調整されて小さくなる設定です。テーブルの「見出しの項目」が一番上の行に横長に配置されたものになります。このテーブルにCSSとJavaScriptを追加して、レスポンシブ対応用のテーブルを作成します。

    ●「responsive-table1.html」

    HTMLコードの注意点として、「<thead>タグ」や「<th>タグ」、「<tbody>タグ」の構成は基本崩さないようにしましょう。「<th>タグ」は1行目の見出しでのみ使います。「<th>タグ」をその他の行で使うとレスポンシブ対応した際に正しく表示されなくなります。また、<table>タグには「id="table"」を指定して下さい。

    ▲ページトップへ戻る

    3. プラグインを使ってレスポンシブ対応のテーブルを作成する

    それでは、レスポンシブ対応のコードを追加していきましょう。ブラウザーの幅を小さくすると、見出しが左側に配置され、データーが右側に配置されるテーブルになります。「responsive-table1.html」のヘッダーに以下のコードを追加して下さい。

    ●responsive-table1.html

    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>レスポンシブテーブル</title>
    
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/basictable.css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <script type="text/javascript" src="js/jquery.basictable.min.js"></script>
    
    <script type="text/javascript">
    	$(document).ready(function() {
    		$('#table').basictable();
    	});
    </script>
    
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>
    
    <table id="table">
    ・・・省略・・・
    </table>
    
    </body>
    </html>
    

    6行目から11行目のコードでレスポンシブテーブル対応のスタイルシート「css/basictable.css」とjqueryプラグインの「js/jquery.basictable.min.js」を追加しています。また、Googleが提供しているjQueryファイルの「jquery.min.js」も追加します。
    13行目から17行目までの<script>タグでは、HTMLドキュメントの読み込みが完了した後に、「Basic Table」プラグインを実行する処理が記述されています。

    ●レスポンシブ対応後の「responsive-table1.html」のテーブル表示

    「responsive-table1.html」ファイルを保存したら、動作を確認してみましょう。ブラウザーの幅を小さくしてみると、テーブルのスタイルが変わり、先頭の見出し行が1列目(左横)に配置されます。その右側の2列目に内容が表示されるスタイルでテーブルが表示されます。

    ▲ページトップへ戻る

    4. その他のレスポンシブテーブル対応用のjQueryプラグイン

    4.1. resTables

    「resTables」は、ブラウザーの横幅が一定のサイズ以下になると横長のテーブルを縦長に並べる jQuery プラグインです。

    「resTables」ダウンロードサイト:https://codefog.github.io/restables/

    ●resTables

    「resTables」ダウンロードサイトには「Basic demo」と「Advanced demo」の二種類のデモテーブルが表示されていますので、動作を確認してみて下さい。

    ●「resTables」プラグイン - Basic demo

    ●「resTables」プラグイン - Basic demo (レスポンシブ対応後)

    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「resTables」

    ▲ページトップへ戻る

    4.2. Responsive Tables

    「Responsive Tables」プラグインでは、最初の見出しを1列目に固定して、2つ目以降の見出しとデータをスクロールで表示させるテーブルレイアウトを作成できます。

    「Responsive Tables」ダウンロードサイト:https://zurb.com/playground/responsive-tables

    ●Responsive Tables

    「Responsive Tables」デモサイト:https://zurb.com/playground/projects/responsive-tables/index.html

    デモ用のテーブルでは、セル内のコンテンツが短いもの、長いものを表示した時にどのように表示されるか確認できます。

    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「Responsive Tables」

    ▲ページトップへ戻る

    4.3. FooTable

    「FooTable」プラグインは、テーブルのデーターをツリー形式で展開するテーブルを作成する事ができます。

    「FooTable」ダウンロードサイト:http://fooplugins.github.io/FooTable/docs/getting-started.html

    ●FooTable

    「FooTable」デモサイト

    ・[Basic Example1(No Headers)]:

    http://fooplugins.github.io/FooTable/docs/examples/basic/no-header.html

    ・[Basic Example2(Single Headers)]:

    http://fooplugins.github.io/FooTable/docs/examples/basic/single-header.html

    ・[Basic Example3(Row Toggle)]:

    http://fooplugins.github.io/FooTable/docs/examples/basic/row-toggle.html

    ・[Basic Example4(Hiding Columns)]:

    http://fooplugins.github.io/FooTable/docs/examples/basic/hiding-columns.html

    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「FooTable」

    ▲ページトップへ戻る

    関連記事:「HTML入門【<table>タグ】~テーブル(表)を作成してみよう~
    関連記事:「CSSでテーブル(表)をデザインする方法【基礎編】
    関連記事:CSSでテーブル(表)をデザインする方法【応用編】
    関連記事:CSSでシンプルなテーブルをデザインする

    HTML・CSSを活かした最新求人情報をチェック!

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Ruby】サーバーサイドエンジニア★飲食アプリ保守開発

    月額単価 :50万円〜

    飲食アプリのサーバーサイド保守開発を お任せします。

    フリーランス

    【Linux/PostgreSQL】データベースエンジニア★レセプトデータのデータ抽出他

    月額単価 :60万円〜

    自社PostgreSQLで構築している医療情報DBへの データインポート作業及びエクスポート作業、 既存の分...

    フリーランス

    【HTML/CSS/Javascript】コーダー★Webサイトのコーディング

    月額単価 :60万円〜

    BtoB向けのWebサイトをコーディングをお任せします。 主なターゲットは劇場のホームページや 上場企業...

    フリーランス

    【Unity】自社内ゲーム開発エンジニア

    月額単価 :80万円〜

    Unityを用いた自社内ゲーム開発を担当して頂きます。 既存のタイトルではなく、今後リリースを控えて...

    フリーランス

    【C++】組み込みエンジニア★IoT無線通信機器の組込開発

    月額単価 :80万円〜

    IoTなどの無線機器の組込をして頂きます。 複数プロジェクトが動いておりますので 1つのプロジェク...