表の作り方

2018年10月22日2019年8月19日

ネットビジネスD運営者の龍一です！

今回は、表の作り方 の紹介についてです。

あなたもワードプレス（WordPress）でも、投稿記事や
固定ページに、表を挿入したい時があると思います。

いろいろ方法は在るのですが
今回は、WordPressの操作パネルからと、
簡単なHTML（テキスト）の入力で
作成する2種を紹介して行きます。

かんたん！表の作り方↓を動画で見る。

プラグイン入力文字・TinyMCE Advanced

ディフォルトで、テーブル（TinyMCE Advanced）が
ツールバーに在る場合は、インストールは不要です。

1.操作パネルで表を作成する方法

まずは、プラグインから操作パネルに表示される
表の作り方を解説します。

事前にダッシュボードのプラグインから
新規追加で「TinyMCE Advanced」を
インストールして＞有効化します。

そうすると　WordPressの投稿画面の
ビジュアルモードの操作パネルに*マウスオーバーすると
下のように「テーブル」と表示されるマス目のアイコンが出てきます。
*マウスでカーソルを上に重ねる。

その「テーブル」をクリックして
下の「テーブル▶」から展開して行くとマス目が出てきます。

そのマス目を、更にマウスで選択（青）すると
そのマス目（の中1マスをセルと言います。）が
表の区分になります。

上の例だと、下のように横に3縦に3の表が入力スペースに出て来ます。

横幅や縦は角の□をマウスで動かして、表のサイズ変更ができます。
*数字を入力しても変えられますが、マウスの方が楽だと思います。

表の配置方法　

次に、表を左・中央・右に配置する方法です。
テーブルアイコンをクリックして「表のプロパティ」を選択します。

すると上のようなウインドが開きますので
配置のなしをクリックして、左・中央・右を選択して選べます。

表の枠線の太さを変える方法　

表の枠線も、「表のプロパティ」内で
以下の枠線の右の□に数字を入れる事で変えられます。

数字が大きいほど太くなります。

表の行や列を増やす方法　

例えば、毎月1列データを追加したい時に
1から表を作り直すのは大変ですよね？
なので、もう1列・1行を簡単に増やす方法を解説します。

WordPressの場合左右を「列」
上下を「行」というように分けていますので
理解して置きましょう。

縦の列と言うのは、この場合ありません（^^：

テーブルアイコンをクリックすると
下の画像のように、行と列がありますので
増やしたい方向（左右）を選択すると1つ増えます。
2回で2行・2列増えます。

また行や列を消すのは3段目の「消除」を選択すれば1つ減ります。

表のマス（セル）を結合させる方法　

１つのマスとマスは、隣り合っていれば結合
させることができます。

表の方で結合したいセルを選択します。

マウスで左クリックしたままスライドして選択すると
下のように青くセルが変わります。
3マス以上（セル）とかも繋がっていれば可能です。

選択したら以下のようにテーブルアイコンから
セル▶からセルの結合を選択すればOKです。

表（テーブル）の線とセルに色を付ける方法　

まず、下のように表の全て（のセル）を、マウスで
左クリックしたままスライドして選択します。
*選択すると青になります。

次に、ツールバーの「テーブル」をクリックして
「セル」から「セルのプロパティ」をクリック
その中の下の「詳細」をクリックして

スタイルを●から選択して（お好みで選択）
詳細の中の●「枠線の色」の右の□をクリックすると
色パレットが開きますので、好みの色を選択し
「OK」をクリックすると枠線の色が黒以外も選べます。

セルに色を入れたい場合は、例えば一番上に
色を付けるには、まず表の上のセルを選択してから
下のように「セルのプロパティ」の詳細から
●「背景色」で選択すると、以下のように一番上に色が入ります。
*1マス（セル）単位で入れる事も可能です。

表を削除する方法　

表の中のセルのどこでもいいので、クリックします。
本文を書く左下に「table」と出ているところが
あるので、その文字をクリックします。

そうすると、表全体が選択されますので
そのままキーボードの「delete」か
「BackSpace」ボタンを押せば消えます。

またはテーブルの中の「表の消去」で消えます。

2.HTMLで作成する方法

もう1つ、全てのテーマで簡単に自在にカスタム出来る
HTMLを少し使ってみましょう。

難しく思うかもですが、これ位は覚えてしまえば簡単で便利ですので（＾＾：

　1.横2マスの表を作る方法　

<table border=”2″ width=”500″ align=”center”>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
</table>

上を全部コピーして、記事を書く部分にテキストモード●で
貼りつけます＞以上です。

上のコードを貼ったモノが、ビジュアルモード●にすると
下のような表となって表示されます。

*テキストモード●ビジュアルモード●選択は入力スペース右上に在ります。

ＨＴＭＬを貼りつけるのは、かならずテキストモード●で行います。

かならずコピーしたのを貼りつけるのは、上の図「テキスト」●を
クリックしてテキストモードに貼りつけるようにしてください。
確認（表示）は「ビジュアル」をクリックして
ビジュアルモード●で、表示をチェックします。

次に上の表は縦に1行ですが、応用で3行にするのはどうするのか？と言うと
下の赤い部分を3セット（オレンジ・緑）へと、コピペで追加して増やします。*色は部分解釈の為。

<table border=”2″ width=”500″ align=”center”>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
<tbody>
<tr>
<td width=”250″ height=”30″></td>
<td width=”250″ height=”30″></td>
</tr>
</tbody>
</table>

上のＨＴＭＬコードが、下のように3行の表になって表示されます。

もう、解ったと思いますが1行にしたければ
赤い部分を1セットで1行、10行にしたければ
コピペで10セットにすればOKな訳です。　簡単ですよね。（＾＾）

では、次に横幅や縦幅を自分のイメージ通りの幅に変えたいという場合です。

<table border=”2″ width=”100″ align=”center”>
<tbody>
<tr>
<td width=”50″ height=”30″></td>
</tr>
</tbody>
</table>

width=”100″ の100と言う数字が、表全体の横幅の表示数になります。

<td width=”50″ height=”30″></td>の50が1つのマスの横幅（列）になります。

また、height=”30″>の30が、1行のマスの高さになります。

この数字を小さくしたり、大きくしたりと、入力数を変えて行けば
好きなマスで、好きなサイズの表が自在に、あなたも作れます。

●注意

合計の数字がズレても表示はされるのですが
一応、横幅のトータルの合計数が上の（例100）になるように分配しましょう。
　50+50＝100　その方が綺麗に表示され、困った事になりません。

　2.横3マスの表　

次は、横に2マスではなく、横にマスを3～以上に増やしたい場合の例です。

<table border=”2″ width=”500″ align=”center”>
<tbody>
<tr>
<td width=”100″ height=”32″></td>
<td width=”200″ height=”32″></td>
<td width=”200″ height=”32″></td>
</tr>
</tbody>
</table>

<td width=”200″ height=”32″></td>
を、1マスにしたければ1行に、10マスにしたい場合は
コピペで、上の赤文字の部分を10行に増やせばOKです。

簡単な作業ですよね？（＾＾：

上のＨＴＭＬからビジュアルモード●で表示されたものが
下のように横3マスの表の形になります。