表の作り方

2018年10月31日

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

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

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

拡張プラグインを設定して使う方法も在るのですが
全てのテーマで、簡単に自在にカスタム出来る
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」と言うのは、表の線の太さです。
線を太くしたい場合は、大きい数字を入力しましょう。

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

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