SANGOで表を挿入する方法：レスポンシブ対応させるには？

スマホ、タブレット、パソコンと様々なサイズの端末でWebページが見られるようになった今、表を使うときには注意が必要です。パソコンでは、うまく表示されていても「スマホで見ると、1つ1つのセルが狭くなりすぎてしまっている…」なんていうことがよくあるからです。

WordPressで表を使うには

WordPressで表を挿入する方法はいくつかあります。

ビジュアルエディタから

WordPressで表を挿入するときには、TinyMCE Advancedというプラグインを使うと簡単です。

このプラグインを使うと上の画像のように、HTMLの知識がなくても、好きな行✕列の表を直感的に挿入できます。挿入時につまづいたときには、下の記事を参考にすると良いでしょう。

参考
WordPress の投稿に表を挿入する方法バズ部

HTMLから

テキストエディタなどでHTMLで記事を書いている場合の表の作り方は、下の記事が参考になるはずです。

HTML/CSSでの表（table）の作り方

よく使う行・列の表のコードをプラグイン「AddQuickTag」などに登録しておいて、すぐに呼び出せるようにすると良いでしょう。

表をレスポンシブ対応させるには

表のレスポンシブ対応（スマホでもタブレットでもPCでも見やすいように最適化すること）を考えるために、いくつかの例を紹介します。

通常の表示を挿入した場合

まず、普通に表を挿入した場合です。パソコンだと以下のように見えるとします。

スマホの場合には以下のような表示になります。問題ないですね。

文章が長くなるとスマホ表示が崩れる

しかし、以下のような長文の含まれる表をスマホで見たらどうなるのでしょうか。

↓スマホの横幅では収まりきらないため、1行目と2行目が崩れてしまっているのが分かるかと思います。

SANGOで表をレスポンシブ対応させる方法

そんなとき（スマホだと表が崩れるとき）のためにSANGOでは表を簡単にレスポンシブ対応させる方法を用意しています。

ビジュアルエディタの場合

ビジュアルを使っている場合は次の手順でレスポンシブ対応させます。はじめに表の1ばん左上のセルにカーソルを置きます。

次に「フォーマット」⇒「スタイル」⇒「表をレスポンシブに変える」を選びます。

これでレスポンシブ対応の設定は完了です。画面サイズが767px以下になると、表を右へとスクロールができるようになります。

HTMLの場合

HTMLの場合、以下のようにtableタグにtb-responsiveというクラスを追加します。

<table class=" tb-responsive">
   <tbody>
    ~略~
   </tbody>
</table>

これで一定以上サイズが小さくなると表はスクロールできるようになります。