綺麗な表の作り方が分からない!!
どうしてみんな綺麗な表が作れるの?おしえて!!

ワードプレスで表(テーブル)を綺麗に作りレスポンシブにする。

・これは実は私も悩みました。出来ない!!と出来たとしてもスマホで見ると右半分どっか消えてるよ?
みたいな感じでPCで見ると出来てもスマホで見ると半分だけ、
なんとも言えないので使うのをやめていました。

・色々調べて順番にやってみると意外と簡単に出来るもんなんだとあくまでも基本ですが、
それを少しまとめてみました、

どうしてかというと、

    上手くいかなかった理由と解決方法が違うサイトになっていた為、その項目
レスポンシブ対応の方法 解決は意外に簡単です
テーブルにラインを入れる 解決は簡単です
色を付けたい それも簡単です

 

最初に一番上の項目で悩んでそれを探し、見つけて解決、その次に2番目をと順番に調べて
解決していったのでとても時間が掛かりました。なので初心者でまだ分からないという方の為に
ここで3つ同時に解決してもらえれば悩みも早く解消できるのではと思いました。

あくまでも基本的な所です。さらに上級的なことはまだまだですがこれだけでも十分今は使えます。

レスポンシブ対応にしたい

・まず最初に設定でTinyMCE Advancedのプラグインが入っているか確認してください。なければ
プラグインからインストールの有効化で使えるようになります。その時の設定がこれ

ここで四角いマス(テーブル)のようなものをしたからドラックして持っていってください。
これが無いとテーブルが使えません。

では最初にテーブルをクリックするとこのようになります、そこからテーブルにカーソルを
合わせるとマスが出ます。そのマスに合わせて縦横で好きな数埋めるとその数のテーブルが
出来ます。

これでテーブルが出来ました。そしてこの状態はレスポンシブ対応になっています。
ここでよくやるのが文字を入力して中央のラインが動くのでそれをカーソルを使って
動かすことでレスポンシブ対応でなくなり、幅が決まってしまいます。

このように表のプロパティを見てみると幅に数字がでています。これで幅が決められたと言う事
なのでスマホで見ると右が見えない状態、
これを回避するためにはこの数字を消せばいいのです。

これでレスポンシブ対応になりました。

たったこれだけです。あとは%を入れてやる事も出来ます。テーブルが全体表示の何%で表示する
可を決めるため100%であれば数字無しと一緒、50%は表示の半分の大きさで表示となります。

最初はラインを動かして、プロパティで幅の数字を消すだけでOkです。

テーブルにラインを入れたい(枠に線を入れたい)

・これは最初やってても全くわかりませんでした。なので出来上がったテーブルは上下にうっすらと
ラインがあるかな?程度しかなく縦ラインが引けません、なにをやっても引けないのでそのままで
投稿している記事がいくらでもあると思います。見てもらうとわかりますが品祖なテーブルです。

それでも最初は満足していました、がやはり枠をラインを入れたい!!ということでやり方を
探してきました。

まずは簡単でした、表のプロパティを出して枠線に数字を入れるだけです。
この数字が大きくなれば枠の太さが変わります段々と太くなりますのでお好みで
決めてください。

これだけですと枠だけです。中のラインは引けてません。そこで今度は

テーブルを全体範囲指定して(テーブルにカーソルを合わせて範囲をドラッグ)
今度はセルのプロパティをクリック、そして詳細、枠線の色を決めてOKです。

右の背景色というのはセルの中の色を決めることが出来ます。

セルとは・・・表の中にある1つの枠横なら列として縦なら行として扱われる枠だと
そう判断してもいいと思います。

セルの結合はドラッグして横2つを結合すると枠が1つにまとまります。そして色を塗れば

          ここはセルの結合で列を結合して2つを1つの枠に変更
全体の枠(ライン)は表のプロパティで テーブルの中の枠(ライン)は全体を範囲指定してセルのプロパティで

このようになります。
これは表のプロパティで縦横2マスを選んで
上のセルを結合(この時指定範囲をドラッグして決めます)
表のプロパティで枠を数字の2 詳細で枠の色をクロ
表全体を範囲指定してセルのプロパティで詳細枠の色黒
上の結合したセルを範囲指定してセルのプロパティから詳細で背景の色を選んで終わり。

中央のラインをクリックで移動して好きな位置に持っていったら表のプロパティから
幅の数字を消す。

これでスマホでもPCでもいい感じで見れると思います。

まとめ

テーブルもやり方が分かれば記事作製にも色々な幅が広がると思います。
今回は自分で悩んで、探して試して一番簡単な方法を色々試して見ました。

これを参考に初心者でも綺麗に出来るという自身をもっていただけると嬉しいです。

 

関連記事