編集ガイド/表組みについて

Last-modified: 2022-03-05 (土) 00:00:41

はじめに

既に書かれているものの一部を書き換えたい場合は[基本的なルール]のみ覚えれば大丈夫です。
「表を1から書きたい」「表のテンプレートを書き換えたい」という場合は詳しいルールも覚えたい。
表組みの編集をするときには構文ハイライトをONにすることを強く推奨します。
表の区切り線の色が変わるだけでもかなり見やすくなります。
こちらのページも参考になります。

目次

基本的なルール

1番簡単な表を作る

最もシンプルな表の作り方は、行の最初と最後に|を付けること。これだけです。

  • 例1

    |表1|

  • 結果
    表1

次に、文字列の間にも|を書くと列が増えます。

  • 例2

    |列1|列2|

  • 結果
    列1列2

さらに、次の行にも同じ数だけ|があれば行が増えます。

  • 例3

    |列1行1|列2行1|
    |列1行2|列2行2|

  • 結果
    行1列1行1列2
    行2列1行2列2

隣のセルと結合させる

横方向に結合する場合と縦方向に結合する場合の2パターンがあります。
それぞれ結合できるのは上、右のみです。

  • 例4

    |列1行1|列2行1|
    |>|列1+列2行2|

  • 結果
    行1列1行1列2
    行2列1+列2
  • 例5

    |列1行1+行2|列2行1|
    |~|列2行2|

  • 結果
    行1+行2列1行1列2
    行2列2

波線(~)の後に文字が続いたセルについて

詳細は詳しいルールの項目で解説していますが、[Table Header]と呼ばれるものです。
付けると見た目が変わるので既に付けてあるセルからは消さないようにしましょう。

 

セル内での改行について

改行したい場所に&br;と書きます。
これは通常の文章の中でも使えます。

余談:行と列の覚え方

それぞれの文字の右半分に注目すると
行という文字には横線が2本
列という文字には縦線が2本
あります。
なので行は横方向、列は縦方向と覚えることか出来ると思います。

詳しいルール

ヘッダ行について知ろう

簡単に言えば表組みにおける一番上の行です。
主に、一番上の行を目次のように扱う際に使用します。
使い方は、行の終わりにhを付けるだけです。

  • |列1|列2|h
    |列1行1|列2行1|
    |列1行2|列2行2|

  • 結果
    列1列2
    行1列1行1列2
    行2列1行2列2

ヘッダ(Table Header)について知ろう

先頭に~を付けると背景色が変わり、文字が太字の中央揃えになります。

  • |~|~列1|~列2|h
    |~行1|列1行1|列2行1|
    |~行2|列1行2|列2行2|

  • 結果
    列1列2
    行1行1列1行1列2
    行2行2列1行2列2

書式指定について知ろう

表組みではセルの先頭に決められた文字を書くことで書式(文字の配置や色など)を変更することができます。

  • 例1-文字の配置

    |~表|~左(上)寄せ|~中央寄せ|~右(下)寄せ|h
    |~左右&br;関連|LEFT:左寄せ|CENTER:中央|RIGHT:右寄せ|
    |~上下&br;関連|TOP:上寄せ|MIDDLE:中央|BOTTOM:下寄せ|

  • 結果
    左(上)寄せ中央寄せ右(下)寄せ
    左右
    関連
    左寄せ中央右寄せ
    上下
    関連
    上寄せ中央下寄せ
  • 補足
    デフォルトの配置は左右は左寄せ、上下は中央寄せです。
     
  • 例2-文字色

    |~表|~列1|~列2|h
    |~行1|COLOR(Crimson):赤色|COLOR(RoyalBlue):青色|
    |~行2|COLOR(SeaGreen):緑色|COLOR(Tomato):橙色|

  • 結果
    列1列2
    行1赤色青色
    行2緑色橙色
  • 例2-背景色

    |~表|~列1|~列2|h
    |~行1|BGCOLOR(LightCoral):赤色|BGCOLOR(LightSkyBlue):青色|
    |~行2|BGCOLOR(PaleGreen):緑色|BGCOLOR(Khaki):橙色|

  • 結果
    列1列2
    行1赤色青色
    行2緑色黄色
  • 補足
    色の一覧はこちらのページなどを参考に。
    背景色を変える場合、ここでは結果を分かりやすくするために濃い目の色を使っていますが、実際はもう少し薄い方が見やすいです。

文字色を変える2つの方法と使い分け

セル内では文字の装飾(こちらのページも参照)を使うこともできます。
また、セルの書式設定は下で紹介する[書式指定行]という機能が使えます。

  • |~方法|~使い分け|h
    |~セルの書式設定|COLOR(Crimson):セル内全ての色を変える場合はこちらの方がすっきりする。|
    |~文字の装飾|&color(Crimson){このように};一部のみ色を変える場合はこちらの方法を使う。|

  • 結果
    方法使い分け
    セルの書式設定セル内全ての色を変える場合はこちらの方がすっきりする。
    文字の装飾このようにセル内の一部のみ色を変える場合はこちらの方法を使う。

書式指定行について知ろう

書式指定行は、列ごとに書式をまとめて指定できる機能です。
行の最後にcを付けると書式指定行になります。

  • ||COLOR(RoyalBlue):|RIGHT:|c
    |~表|~色を変更|~配置を変更|h
    |~行1|列1行1|列2行1|
    |~行2|COLOR(Crimson):セル内での設定が優先|列2行2|
    |~行2|列1行3|LEFT:セル内での設定が&br;優先|

  • 結果
    色を変更配置を変更
    行1列1行1列2行1
    行2セル内での設定が優先列2行2
    行3列1行3セル内での設定が
    優先

列幅指定をしよう

書式指定行で各列に数値を書くと列幅を固定できます。
スマートフォン等の横幅が狭い環境では列幅を確保できない場合があります。

  • 列幅が指定されていない列が優先的に縮められ、それでもページ幅をはみ出る場合
  • 全ての列に列幅が指定してあり、その合計がページ幅をはみ出る場合

などがあります。
nobrプラグイン(そのうち説明を書く)を用いることで、ページ幅をはみ出ても列幅を確保することが可能です。

  • ||COLOR(RoyalBlue):64|128|c
    |~表|~列幅128|~列幅256|h
    |~行1|列1行1|列2行1|
    |~行2|列1行2|←文章が列幅未満でも指定した列幅が確保される|
    |~行2|列1行3|文章が列幅以上にある場合は自動で改行される|

  • 結果
    列幅128列幅256
    行1列1行1列2行1
    行2列1行2←文章が列幅未満でも指定した列幅が確保される
    行3列1行3文章が列幅以上にある場合は自動で改行される