WordPress でセルやテーブルを結合する方法

覚書

 

こんにちは!めんか( @menkakaka )です。

 

WordPress でセルやテーブルを結合する方法について書きました。

 

「セルの結合」は、

 

テーブルで結合させたいセルをドラッグして選択

テーブルアイコン横の▲

セル

セルの結合

 

とクリックしていきます。

 

複雑なテーブルを真似するときは、この「セルの結合」を繰り返すことで簡単にできました。

 

画面を縮小するとお手本と見比べられて便利。

 

「表の結合」はテキストモードで操作します。

 

表と表の間にある余計なコードを削除するだけです。

 

 

セルの結合

 

ドラッグしてセルを選択→テーブルアイコン横の▲→セル→セルの結合 とクリックしていきます。

 

セルの結合

 

結合Wordpressテーブルのセル

 

セルの結合を使って複雑なテーブルの真似っこに挑戦!

 

 

お手本はこれ。

 

 

縦横一番大きい数字で作る

 

お手本を見ると「行」の一番多い所で13行、「列」の一番多い所で4列 。

 

 

 

 

なので13×4のテーブルをまず作る。コレを間違えないように結合していくだけです。

 

4×13テーブル

 

ですが、Worepress のテーブルは最初「10行×10列 」までしか作れない模様。

 

なのでとりあえず「10行」×「4列」の表を作る。

 

テーブル

 

これに「3行」上か下に追加すれば「13行×4列の表 」の出来上がり。

 

3行分選択するのはどこの部分でも良い。

 

 

 

「 13行×4列の表」ができました。

 

     
     
     
     
     
     
     
     
     
10      
11      
12      
13      

 

 

画面を縮小して、お手本のキャプチャを並べて表示するとやりやすい。

 

表縮小してお手本と見比べながら作る (1)

 

 

「 13行×4列の表」完成

 

       
 
 
 
 
 
 
     
 
 
 
   
 

 

スマホで見たときの表示の崩れを防ぐ

 

枠線上にカーソルを合わせると出てくる アイコンで枠線が移動して良いのですが、

 

 

 

体裁が整って、見た目上お手本そっくりになるのですが、

 

       
 
 
 
 
 
 
     
 
 
 
     
 

 

 

こうして、とりあえず体裁を整えながら作ったテーブルですが、もう一つやらなくてはいけないことがあるとのこと。

 

 

「表のプロパティ」画面で幅や高さの欄を空欄に戻す。

 

 

⇔ で 表をいじると「 幅 」「 高さ 」に  数字が入ってしまうのだそう。

 

 

「表のプロパティ」で数値を無効にするとデバイスが変わってもテーブルが崩れないんですって。

 

スマホで見てみると、

 

表のプロパティで数字が入っている方のテーブル

 

テーブルスマホ表示

 

空欄にしてある方のテーブル

 

テーブルスマホ表示

 

めんか
めんか

た~しかに~‼

アドセンス広告でもいうところの「 レスポンシブ表示 」になったというわけですね。

 

 

関連記事

 

追記メモ・・・・スマホ表示では注意が必要な件。

 

テーブルの結合

 

「テーブルの結合」はテキストモードで見て、表と表の間にある余計なコードを削除するだけです。

 

2つのテーブルを結合させてみます。

 

テーブルの結合

 

 

テキストモードで見たテーブルのコード。規則性がありますね。

 

テーブルの結合

 

 

テーブルとテーブルの間にある余計なコードを削除するだけで表の結合が完了。

 

テーブルの結合

テーブルの結合

 

めんき
めんき

な~んだ!そういうことか!

コメント

タイトルとURLをコピーしました