レスポンシブ対応テーブルの効果的な使い方

author photo

Byinfobloger

レスポンシブ対応テーブル

何かとお世話になるのが表組み。

いわゆるHTML風に言ううと「table」ですが、これがレスポンシブに対応させるのが思った以上に難しかったりします。

しかし、今回のテーマはレスポンシブ対応のテーブルですから、難しいからと言ってギブアップも出来ません。

そこで試行錯誤しながら使えるレスポンシブ対応テーブルを作成してみました。

スポンサーリンク

シンプルなレスポンシブ対応テーブル

とてもシンプルなのですが、レスポンシブに対応させるとなると簡単にはいきません。
見出し1 ここにコンテンツを記入。
見出し2 ここにコンテンツを記入。
見出し3 ここにコンテンツを記入。ここにコンテンツを記入。ここにコンテンツを記入。
見出し4 ここにコンテンツを記入。ここにコンテンツを記入。ここにコンテンツを記入。ここにコンテンツを記入。
見出し5 ここにコンテンツを記入。ここにコンテンツを記入。ここにコンテンツを記入。ここにコンテンツを記入。ここにコンテンツを記入。
<table class="Table02">
  <tr>
    <th><!-- 見出し1 --></th>
    <td><!-- ここにコンテンツを記入 --></td>
  </tr>
  <tr>
    <th><!-- 見出し2 --></th>
    <td><!-- ここにコンテンツを記入 --></td>
  </tr>
  <tr>
    <th><!-- 見出し3 --></th>
    <td><!-- ここにコンテンツを記入 --></td>
  </tr>
  <tr>
    <th><!-- 見出し4 --></th>
    <td><!-- ここにコンテンツを記入 --></td>
  </tr>
  <tr>
    <th><!-- 見出し5 --></th>
    <td><!-- ここにコンテンツを記入 --></td>
  </tr>
</table>

ちょっと複雑なレスポンシブ対応テーブル

今度はもう少し複雑なテーブルを作成してみましょう。

文字数に関係なく均等幅をキープするように設定しています。

ヘッダー1 ヘッダー2 ヘッダー3
項目1

各項目の幅は均等に配分されます。

項目2の内容

項目3の内容

項目2

項目2の内容

内容が長い場合は改行されて表示します。

項目2の内容

項目3

項目3の内容

項目3の内容

項目3の内容

<table class="Table01">
<thead>
<tr>
<th></th>
<th><!-- ヘッダー1 --></th>
<th><!-- ヘッダー2 --></th>
 <th><!-- ヘッダー3 --></th>
</tr>
</thead>
<tbody>
<tr>
<th><!-- 項目1 --></th>
<td label="<!-- ヘッダー1 -->"><p><!-- 項目1の内容 --></p></td>
<td label="<!-- ヘッダー2 -->"><p><!-- 項目1の内容 --></p></td>
<td label="<!-- ヘッダー3 -->"><p><!-- 項目1の内容 --></p></td>
</tr>
<tr>
<th><!-- 項目2 --></th>
<td label="<!-- ヘッダー1 -->"><p><!-- 項目2の内容 --></p></td>
<td label="<!-- ヘッダー2 -->"><p><!-- 項目2の内容 --></p></td>
<td label="<!-- ヘッダー3 -->"><p><!-- 項目2の内容 --></p></td>
</tr>
<tr>
<th><!--  -->項目3</th>
<td label="<!-- ヘッダー1 -->"><p><!-- 項目3の内容 --></p></td>
<td label="<!-- ヘッダー2 -->"><p><!-- 項目3の内容 --></p></td>
<td label="<!-- ヘッダー3 -->"><p><!-- 項目3の内容 --></p></td>
</tr>
</tbody>
<tr></tr>
</table>

同じレイアウトで項目数を増やしてみよう

先程のテーブルにヘッダー項目を1つ加えてみました。

ヘッダーの項目数が増えても幅は均等に保たれていますね。

ヘッダー1 ヘッダー2 ヘッダー3 ヘッダー4
項目1

各項目の幅は均等に配分されます。

項目1の内容

項目1の内容

項目4の内容

項目2

項目2の内容

内容が長い場合は改行されて表示します。

項目2の内容

項目4の内容

項目3

項目3の内容

項目3の内容

項目3の内容

項目4の内容

<table class="Table01">
<thead>
<tr>
<th></th>
<th><!-- ヘッダー1 --></th>
<th><!-- ヘッダー2 --></th>
 <th><!-- ヘッダー3 --></th>
<th><!-- ヘッダー4 --></th>
</tr>
</thead>
<tbody>
<tr>
<th><!-- 項目1 --></th>
<td label="<!-- ヘッダー1 -->"><p><!-- 項目1の内容 --></p></td>
<td label="<!-- ヘッダー2 -->"><p><!-- 項目1の内容 --></p></td>
<td label="<!-- ヘッダー3 -->"><p><!-- 項目1の内容 --></p></td>
<td label="<!-- ヘッダー4 -->"><p><!-- 項目1の内容 --></p></td>
</tr>
<tr>
<th><!-- 項目2 --></th>
<td label="<!-- ヘッダー1 -->"><p><!-- 項目2の内容 --></p></td>
<td label="<!-- ヘッダー2 -->"><p><!-- 項目2の内容 --></p></td>
<td label="<!-- ヘッダー3 -->"><p><!-- 項目2の内容 --></p></td>
<td label="<!-- ヘッダー4 -->"><p><!-- 項目2の内容 --></p></td>
</tr>
<tr>
<th><!-- 項目3 --></th>
<td label="<!-- ヘッダー1 -->"><p><!-- 項目3の内容 --></p></td>
<td label="<!-- ヘッダー2 -->"><p><!-- 項目3の内容 --></p></td>
<td label="<!-- ヘッダー3 -->"><p><!-- 項目3の内容 --></p></td>
<td label="<!-- ヘッダー4 -->"><p><!-- 項目4の内容 --></p></td>
</tr>
<tr>
</tbody>
<tr></tr>
</table>

レスポンシブ対応テーブルまとめ

どんな配色にもマッチするように背景色は薄めのグレーで統一しました。

最初に紹介したテーブルはシンプルですが、アイディア次第で色々な用途に使えると思います。

2つ目に紹介したテーブルはデータなどを見やすく紹介できるのではないでしょうか。

あれば何かと便利なテーブルレイアウトです。

今はスマホの時代。
テーブルもレスポンシブ対応は必須ですね。

それでは今回はこれで終了です!

関連記事
Share

Comments 0

Leave a reply