【ブログ運営】ワードプレスのtable(表)についてまとめ記事

2020年3月6日カスタマイズwordpress

スポンサーリンク

[baloon-line-left img="https://kazu2017.com/wp-content/uploads/2018/03/IMG_20171209_072150_252.jpg" caption="カズ"]こんにちは、副業ブロガーのカズです。(@kazu20170825)[/baloon-line-left]

私は、スマホでブログを書いているのですが、「table(表)」の作り方でいつも悩みます。

スマホのディスプレイに合わせて文字サイズなどを調整するので、PCのモニターだと文字が小さくないかなと。

どのような「table(表)」作成が良いのか悩んだ結果、スライド表示がベストと言う結論になったので、まとめていきたいと思います。

同じように、table(表)作成で悩んでいる方の参考になればと思います。

スポンサーリンク

table(表)の基本構成

要素意味
table要素
tr要素表の1行
th要素見出し
td要素データ
caption要素表のタイトル

テーブルの基本的な構成は表のようになります。

<table border="1″>
<caption>テスト</caption>
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>データ</td><td>データ</td>
</tr>
</table>

例えば、上記のようなtable(表)を作ってみると下記例のようになります。

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

タイトルがどうして下に表示されるのか分かっていませんが、table(表)作成のイメージは出来るかと思います。

table(表)のスライド表示

参考にさせて頂いたのは、「サルワカ」さんのこちらの記事になります。

要素意味
visible折り返す
hidden隠す
autoスクロール

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

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

追加要素
<div style="overflow: auto;">
見出し 見出し 見出し 見出し 見出し 見出し 見出し 見出し
データ データ データ データ データ データ データ データ

これで、table(表)がスライド出来るようになりました。

この時に注意するのが「width」です。

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

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

table(表)のまとめ

個人的な感覚になってしまいますが、tableに関しては横は2列~3列くらいまでがベストな気がします。(データ(数字)のみだと4列位ですかね。)

4列以下なら1ページに納めて、それ以上になるならスクロール表示がお勧めです。

また、スマホが縦スクロールするのに対して、table(表)が横スクロールすると見にくいかも知れませんが、しばらくは横スクロールで進めていこうと思います。

読書の方にとって見やすいブログ作成を心掛けていきたいので、また、何かあったら更新します。

スポンサーリンク