HOME  /WordPress(応用)
 /TinyMCEで綺麗な表を作る
2017年10月27日

TinyMCEで綺麗な表を作る

PCで表を作成し、それをタブレットやスマホで表示すると表が綺麗に収まりません。

また基本機能だけでは表の枠線や色を綺麗に表示できません。

よってここではこれらを解決する為にBootstrapの表機能も併用して綺麗な表を作成する方法を解説していきます。

1. TinyMCE の表作成機能のおさらい

1-1.my_editor-style.css に下記を設定して下さい。

/*****************************************************************************/
/* table設定 */
/*****************************************************************************/
table {
  min-width:100px;    /* 表作成の際のデフォルト幅 */
  max-width:97%;     /* スマホ表示を考慮した最大横幅 */
  width:auto;      /* 横幅は可変 */
  margin-bottom:7px;   /* 表の下を少し開ける */
  word-break:break-all;  /* 半角英小文字もサイズ変更を可 */
  font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}

1-2.css\editor-style.css に上記と同じ内容を設定する。

/****************************************
tableの設定 
*****************************************/
.contents table {
  min-width:100px;
  max-width:97%;
  width:auto;
  margin-bottom:5px;
  word-break:break-all;
  font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}

1-3.表のボタンから表を作成します。

3×3の表を作成します。

・表示された点線はビジュアルエディタ特有の線で、HTTP表示では表示されません。

・また行数は、Tabキーで簡単に増やせるので少ない行で作成する方が楽です。

1-4.表に文字を入力します。

 メモ

セルに文字を入れると隣のセルがつぶれる場合があります。
ここで無理に次のセルをクリックしようとすると表やセルの「幅」に数値が入りますので、表操作は必ず下記のキーを使って入力します。

絶対にマウス操作で表をコントロールしないでください。

項番 キー 動作
Tab 次のセルに移動。
最終セルの場合は行を下に追加します
Shit+Tab 前のセルに移動
文字列末の場合は次のセルに移動。
文字列先頭の名合は前のセルに移動。
上のセルに移動
下のセルに移動。

※1.基本はTabキーです。これを使いこなすと行の追加も楽にできます。

※2.表から出る場合はを挿入します。(表から出た後で、これを削除して下さい)

以上の結果、作成した表は下記の様に表示されます。

1-5.セルの表示位置は下記アイコンで操作します。

以上で表は完成したので、あとは体裁を整えていきます。

2.bootstrapの表機能の取り込み

表の体裁を整える為に、Bootstrapの表機能をクラスを追加する事により、ビジュアルエディタのスタイルで使える様にします。

2-1.my_editor-style.cssに下記を追加します。

下記はcss¥editor-style.cssへの追加不要です。

/**** BootStrapの表クラス ***********************************/
table.table{margin-bottom:7px;width:auto;} /*横線のみ実線の表*/
table.table-bordered.table{}        /*縦横線付きの表*/
table.table-striped.table{}         /*ストライプ柄の表*/
table.table-condensed{}           /*セル内表の余白を半分にする*/
table.table-hover{}             /*表をホバーさせる*/
tr.danger{}    /*Table Rowに付く色クラス*/
tr.warning{}
tr.info{}
tr.success{}
tr.active{}
td.danger{}    /*Table Dataに付く色クラス*/
td.warning{}
td.info{}
td.success{}
td.active{}

※1.Bootstrapクラスをビジュアルエディタで指定すると幾つか仕様と異なる現象が発生する。
この対策としてmargin-bottom:7px;とwidth:auto;を入れている。
これにより表の下が詰まる問題と、画面一杯に拡大される問題を解決している。

3.Bootstrapの表機能の使い方

3-1.表の枠線の種類の選択

表を選択してから枠線種類を選択します。

table.table

table.table-bordered.table

table.table-striped.table

①table.table→横線のみが実線になった表になります。

縦線は表示されません。

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

②table.table-bordered.table→実線の表になります。

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

③table.table-striped.table→交互に色がついた表になります。

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

2-2.テーブルの圧縮&ホーバ

表の枠線に加えて指定できるクラスは

table.table-condensed

table.table-hover

があります。

ここでは、実線枠に加える形で説明します。

①table.table-condensed→セルが詰まったテーブルになります。

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

②table.table-hover→カーソルが来た時に行がホーバします。

  列1 列2
行1 行1列1  行1列2
行2 行2列1 行2列2
行3 行3列1 行3列2

2-3.表のセルに色を付ける

表の行TR(Table Row)やセルTD(Table Data)に背景色を付ける事ができます。

①表の行に背景色を付けたサンプルです。※表の枠線設定は必須です。

スタイル カラーコード   
tr.danger #f2dede  
tr.warning #fcf8e3  
tr.info #d9edf7  
tr.success #dff0d8  
tr.active #f5f5f5  

②表のセルに背景色を付けたサンプルです。※表の枠線設定は必須です。

スタイル カラーコード   
td.danger #f2dede  
td.warning #f2dede  
td.info #d9edf7  
td.success #dff0d8  
td.active #f5f5f5  

4.幅を指定した表の作り方

表は横幅が画面一杯になるまでは表の横幅を拡大してくれます。一杯になるとセル幅を自動で縮小し始めます。

しかし表を画面に対して何%かを指定すると、画面幅に対応した表になります。

4-1.表の幅を%で指定する方法

テーブル→表のプロパティを選択すると下記画面が表示されます。

ここで幅を%で指定すると、画面幅に応じたサイズになります。

4-2.セル幅を固定したい場合

画面が小さくなると自動でセル幅を縮小していきますが、どの画面でもこの列は固定幅に指定ケースがあります。

この場合は表の列を選択してからセル→セルのプロパティで幅を固定にします。

 

5.単純な表のインデント操作

単純な表とは画面枠の中に留まる表で、インデントでも画面からはみ出さない表です。

①表の何処かをクリックする。

するとビジュアルエディタの下の方に下記がガイドが表示されます。

②上記のtableを選択する。

③下記のインデントボタンを挿入してインデント操作をする。

6.幅を指定した表のインデント操作

表の幅を%で指定すると画面幅に対応した表になりますが、この表をインデントすると画面枠からはみだす事が起こります。

理由は表の幅が固定になった為で、これを回避して画面幅に達すると表を縮小したい場合は下記の方法を取ります。

6-1.my_editor-style.css のtableの下に下記を追加して下さい。

div.table_indent{} /* tableを選択してこのクラスを入れると、縮小inndenntができる */

※1.div.table_indentは、tableをdiv要素で囲むスタイルです。

6-2.css¥style.css に上記と同じ内容を設定する。

.contents div.table_indent{}

6-3.表のインデント操作

①表の何処かをクリックするとビジュアルエディタの左下に下記が表示されます。

そこで、上記のtableを選択します。

②スタイルから登録したdiv.table_indentを選択します。

そうすると、tableの表示が下記に変わります。

③上記のdivを選択する。

④下記のインデントボタンを挿入してインデント操作をする。

この方法を取るとインデントで表が画面幅に達した時点で表を自動で縮小してくれます。

7.特殊な表の使い方①

表は文字列や画像を枠内に収めてくれる、大変便利なツールです。

よって下記の様なファイル構造を表すのにも使えます。

上表は5列1行の表です。

7-1.my_editor-style.css のtableの下に下記を追加して下さい。

div.table_waku{} /* 外枠付きtable */
div.table_waku table{
  border-collapse:separate;       /* table属性をseparateに変更 */
  border-spacing:0;           /* separateの幅を0に設定 */
  border:1px solid #8b8682;}       /* tableの外枠を作成 */
div.table_waku td {vertical-align:top;} /* セル文字を上寄せに設定 */

※1.div.table_wakuは、テーブルに外枠を付けるスタイルです。
border-collapseプロパティは、隣接するセルのボーダーを重ねて表示するか(collapse)、間隔をあけて表示するか(separate)で、枠線を引く為にはこれをセパレートにする必要があります。更にその間隔をborder-spacingで0にしています。

7-2.css¥editor-style.css に上記と同じ内容を設定する。

.contents div.table_waku{}
.contents div.table_waku table{border-collapse:separate;border-spacing:0;border:solid 1px #8b8682;}
.contents div.table_waku td {vertical-align:top;}

7-3.作成方法

①表を作成する。
画像と文字等を入れます。

②上表をクリックして、下に表示されるガイドでtableを選択しスタイルからdiv.table_wakuを選択する。

③更新してプレビューすると下図の様な表が作成されます。

8.特殊な表の使い方②

1つのセルだけの場合はBootstrapの枠線だけで十分です。

文章を枠線で囲みました

上記は1セルの表に、Bootstrapの枠線を付けた物です。