こんにちは、複業ブロガーのカズです。(@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>
<caption>テーブル作成例</caption>
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>データ</td><td>データ</td>
</tr>
</table>
例えば、上記のようなテーブルを作ってみると下記作成例のようになります。
見出し | 見出し |
---|---|
データ | データ |
テーブルのスライド表示方法
テーブルをスライド表示させるにあたって参考にしたのは、サルワカさんのこちらの記事になります。
要素 | 意味 |
---|---|
visible | 折り返す |
hidden | 隠す |
auto | スクロール |
今回、私が行いたいのはauto(スクロール)なのでtable要素に1行を追加します。
参考にさせて頂いたのは、helppostationさんのこちらの記事になります。
追加要素
<div style=”overflow: auto;”>
見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し | 見出し |
---|---|---|---|---|---|---|---|
データ | データ | データ | データ | データ | データ | データ | データ |
これで、テーブルがスライド表示できるようになりましたが、この時に注意するのがwidthです。
widthを100%に設定するとディスプレイに合わせて変換してしまうので、私のブログの場合はwidthを1280pxに設定しています。
このように設定することで、スマホだとスライド表示、PCだと画面一杯に表示になります。
まとめ
- 折り返す
- 隠す
- スクロール
今回はテーブル作成時の追加要素についてまとめました。但し、テーブル作成時に毎回スクロールさせる訳ではなく、ケースバイケースで設定するのが良いと思います。
個人的には3列以下はスクロール無し、4列以上はスクロール有りが見やすいかなと思います。
読書の方が見やすいブログ作成を心掛けていますので、宜しくお願いします。