Notification:本ブログのテーマをCocoonに変更しました。

【ブログ】テーブル(表)をスライド表示させる方法

ノウハウ
本記事には広告が含まれている場合があります。
カズ

こんにちは、複業ブロガーのカズです。(@kazu20170825)

悩みごと
  • テーブルの作り方
  • テーブルの文字が小さくなり読みにくい

今回はこんな悩みを解決できる記事を書いていきます。

私はいつもテーブルの作成方法で悩みます。

PCのモニターサイズとスマホのディスプレイサイズは違うので、どちらに合わせてテーブルサイズを調整すると良いのか迷うからです。

いろいろと悩んだ結果、スライド表示がベストと言う結論になったので、まとめていきたいと思います。

本記事の内容
  • テーブル作成時の要素と意味
  • テーブルのスライド表示方法

同じようにテーブルサイズで悩んでいる方の参考になればうれしいです。

テーブルの要素と意味

要素意味
table要素
tr要素表の1行
th要素見出し
td要素データ
caption要素表のタイトル
テーブルの要素と意味
テーブル作成例
<table border=”1″>
<caption>テーブル作成例</caption>
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>データ</td><td>データ</td>
</tr>
</table>

例えば、上記のようなテーブルを作ってみると下記作成例のようになります。

見出し見出し
データデータ
テーブル作成例

テーブルのスライド表示方法

テーブルをスライド表示させるにあたって参考にしたのは、サルワカさんのこちらの記事になります。

overflow使い方

要素意味
visible折り返す
hidden隠す
autoスクロール
テーブルの追加要素と意味

今回、私が行いたいのはauto(スクロール)なのでtable要素に1行を追加します。

参考にさせて頂いたのは、helppostationさんのこちらの記事になります。

table(表)要素

追加要素

<div style=”overflow: auto;”>

見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
データ データ データ データ データ データ データ データ

これで、テーブルがスライド表示できるようになりましたが、この時に注意するのがwidthです。

widthを100%に設定するとディスプレイに合わせて変換してしまうので、私のブログの場合はwidthを1280pxに設定しています。

このように設定することで、スマホだとスライド表示、PCだと画面一杯に表示になります。

まとめ

  • 折り返す
  • 隠す
  • スクロール

今回はテーブル作成時の追加要素についてまとめました。但し、テーブル作成時に毎回スクロールさせる訳ではなく、ケースバイケースで設定するのが良いと思います。

個人的には3列以下はスクロール無し、4列以上はスクロール有りが見やすいかなと思います。

読書の方が見やすいブログ作成を心掛けていますので、宜しくお願いします。

タイトルとURLをコピーしました