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

ブログのこと

WordPress でセルの結合する方法について。

それとテーブルを結合する方法も思い付いたのでついでに書きました。

スプレッドシートを勉強しているのですがWordpressでも扱いが似ているなあと思ったのでブログに書いてみたくなりました。

セルの結合

テーブルアイコン横の▲から「セルの結合」が出てきます。

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

お手本はこれ。

色々試行錯誤してやってみましたが縦横の1番大きい数字で初めにテーブルを作っておくと効率が良いです。

1番多い所で13行と4列 。

 

こうして出来たテーブルを間違えないように結合していくだけです。

4×13テーブル

・・・なのですがWorepress のテーブルは一度に「10行×10列 」までしか作れないので取り敢えず「10行×4列」の表を作る。

 

これに「3行」追加する。セルに何も入っていなければ上でも下でもどっちでも良い。

Wordpressセルの結合

WordPressセルの結合

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

   
   
   
   
   
   
   
   
   
10   
11   
12   
13   

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

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

「 13行×4列の表」完成

    
 
 
 
 
 
 
   
 
 
 
  
 

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

枠線上にカーソルを合わせると出てくる 。アイコンで枠線が移動できて、一見お手本とそっくりさんが出来上がるのですがコレじゃマズイんですって。

体裁が整って見た目上お手本そっくりになったテーブル↓

    
 
 
 
 
 
 
   
 
 
 
   
 

スマホで見ると本当にがっかりなことになっていた。こうならないためにやらなくてはいけないこととは。。。

テーブルスマホ表示

「表のプロパティ画面」で幅や高さの欄を空欄に戻すことなのだそうです。

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

テーブルスマホ表示

めんか
めんか

 レスポンシブ表示 になったというわけですね。

https://junichi-manga.com/wordpress-table-responsible/

テーブルの結合

そしてついでに思い付いてしまったのが「テーブルの結合」。

テキストモードで表と表の間にある余計なコードを削除するだけで良くないか?

結合するテーブルはコレ↓

テーブルの結合

テキストモードで見たテーブルのコードなのですが、何やら規則性があるのが分かります。

テーブルの結合

テーブルとテーブルの間にあるこの余計なコードを削除してみた。

テーブルの結合

テーブルの結合

めんき
めんき

よくよく考えたら当たり前なんだけどビックリ!

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