https://palulog.com/luxeritas-ga

表の作り方

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つ減ります。

表のマス(セル)を結合させる方法 

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>

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

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

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

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

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

次に上の表は縦に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>

上のHTMLコードが、下のように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>の501つのマスの横幅(列)になります。

また、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です。

簡単な作業ですよね?(^^:

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

因みに、TOPにある <table border=”2″

の「2」と言うのは、表の線の太さです。
線を太くしたい場合は、大きい数字を入力しましょう。

以上の応用で、表全体のサイズのカスタマイズ
横の列のセル(マス)の数、行数も好きな数での
あなたにも簡単に、作成出来ると思いますので

それぞれの記事にマッチしたサイズとセル(マス)の
表を作成してみてください。