「ヘルプ:表の作り方」を編集中

以下で、「行」は「表の横一列」、「列」は「縦一列」を意味します。
構文上の改行記号で区切られる「行」については「ライン」と表記しますので、混同しないでください。

==基本的な枠組み==
この節の記号はすべて'''行頭'''に書かなくてはいけません。

表の記述は必ず<code>'''{|'''</code>で始まり、<code>'''|}'''</code>で終わります。
表に関する記述は全てこの間に書きます。

 <code>{|
    ''表の中身に関する記述''
 |}</code>

<code>'''|-'''</code>で新しい行の開始となります。
最初の行では省略可能です。
 <code>{|
 |-　　　（←省略可能）
     ''1行目の中身に関する記述''
 |-
     ''2行目の中身に関する記述''
 |}</code>

セルは<code>'''|'''</code>で始まります。セルが1行に複数ある場合、
セルは<code>'''||'''</code>か改行で区切ります。
改行で区切った場合、新しいラインにも<code>'''|'''</code>が必要です。
例えば、以下の1行目と2行目は同じ出力結果になります。
 <code>{|
 |-
 | セル 1
 | セル 2
 | セル 3
 |-
 | セル 1 || セル 2 || セル 3
 |}</code>

<code>'''|'''</code>の代わりに<code>'''!'''</code>で始めると見出しになります。
見出しは自動的にセンタリングされ、太字になります。
見出しのセル区切りは<code>'''||'''</code>でも可能ですが、大抵は区別しやすいように<code>'''!!'''</code>で区切ります。
<code>'''!'''</code>で始まるラインはすべて見出しとして扱われるため、
同じ行に見出しでないセルを書く場合は改行してラインを新しくする必要があります。

 <code>{|
 |-
 ! 列見出し 1 !! 列見出し 2 !! 列見出し 3
 |-
 ! 行見出し 1
 | セル 1-2
 | セル 1-3
 |-
 ! 行見出し 2
 | セル 2-2 || セル 2-3
 |}</code>

上のように記述すると、以下の通りに出力されます。
{|
|-
! 列見出し 1 !! 列見出し 2 !! 列見出し 3
|-
! 行見出し 1
| セル 1-2
| セル 1-3
|-
! 行見出し 2
| セル 2-2 || セル 2-3
|}

==パラメータ==
基本的な枠組みに対して'''パラメータ'''を設定していくことで、表を加工することができます。
例えば、セルを結合する、色をつけるなどです。
パラメータは表全体、各行、各セルのいずれにもつけることができます。

 <code>{| <span style="color:brown">表全体のパラメータ</span>
 |- <span style="color:brown">行のパラメータ</span>
 ! <span style="color:brown">見出しセルのパラメータ</span> | 見出し
 | <span style="color:brown">セルAのパラメータ</span> | セルA || <span style="color:brown">セルBのパラメータ</span> | セルB
 |}</code>

パラメータの多くは'''style属性'''のプロパティとして記述していきます。
同時に複数のプロパティを指定する場合、プロパティの最後に''';'''（セミコロン）を付け、
半角スペースを空けてから次のプロパティを書きます（最後に書くプロパティの後ろには不要です）。

使用できる主なパラメータを以下に記載しておきます。

===罫線===
表全体のパラメータに、
 <code>{| <span style="color:brown">class="wikitable"</span></code>
と書けば罫線が付くはずなのですが、MTG Wikiでは上手く働いていない気がします。
そのうち改善されるかもしれないので、とりあえず付けておいてもいいでしょう。

'''border属性'''を使用することでも罫線を表示できます。ただし、上記の方法に比べて太い罫線になるようです。
 <code>{| <span style="color:brown">border="1"</span></code>

===セルの結合===
セルのパラメータに'''rowspan属性'''を指定すると下に向かってセルを縦に結合できます。
'''colspan属性'''を指定すると右に向かってセルを横に結合できます。どちらも結合するセル数を指定します。

 <code>{| border="1"
 |-
 ! || 列1 || 列2 || 列3
 |-
 ! 行1
 | rowspan="2" | A || colspan="2" | B
 |-
 ! 行2
 | C <nowiki><!-- 列1はセルAに塞がれている --></nowiki>
 | D 
 |-
 ! 行3
 | E
 | rowspan="2" colspan="2" | F
 |-
 ! 行4
 | G <nowiki><!-- 列2と3はセルFに塞がれている --></nowiki>
 |-
 ! 行5
 | colspan="3" | H
 |}

上のように記述すると、以下の通りに出力されます。
{| border="1"
|-
! || 列1 || 列2 || 列3
|-
! 行1
| rowspan="2" | A || colspan="2" | B
|-
! 行2
| C <!-- 列1はセルAに塞がれている -->
| D 
|-
! 行3
| E
| rowspan="2" colspan="2" | F
|-
! 行4
| G <!-- 列2と3はセルFに塞がれている -->
|-
! 行5
| colspan="3" | H
|}

===表の幅とセルの幅===
表の幅を指定する場合は、表のパラメータに'''widthプロパティ'''を記述します。
セルの幅を指定する場合は、セルのパラメータに'''widthプロパティ'''を記述します。

単位は'''%'''か'''em'''です。%指定は、表の幅の場合には画面全体の幅、セルの場合は表全体の幅に対して
占める割合を意味します。em指定は、それが文字幾つ分の大きさなのか指定します。

セルの幅を指定した場合、それは同じ列の全てのセルに適用されます。

 <code>{| border="1" style="width:80%"
 | style="width:50%" | 幅 50% のセル
 | style="width:10em" | 幅 10em のセル
 | 幅を指定しないセル
 |}</code>

{| border="1" style="width:80%"
| style="width:50%" | 幅 50% のセル
| style="width:10em" | 幅 10em のセル
| 幅を指定しないセル
|}

===セル内の文字配置===
センタリングや右寄せは、'''text-alignプロパティ'''で指定できます。
これは表全体、各行、各セルのいずれにも使用可能で、
使用した範囲に含まれる全てのセルが影響を受けます。

 <code>{| border="1" style="width:80%"
 | style="text-align:left" | 左寄せ
 | style="text-align:center" | 中央寄せ
 | style="text-align:right" | 右寄せ
 |}</code>

{| border="1" style="width:80%"
| style="text-align:left" | 左寄せ
| style="text-align:center" | 中央寄せ
| style="text-align:right" | 右寄せ
|}

===表の配置===
表は通常は左寄せで配置されますが、表全体のパラメータで指定すると中央寄せや右寄せもできます。

中央寄せの場合
 <code>{| <span style="color:brown">style="margin:0 auto"</span></code>

右寄せの場合
 <code>{| <span style="color:brown">style="float:right"</span></code>

===色===
背景色の指定には'''background-colorプロパティ'''、文字色の指定には'''colorプロパティ'''を使います。
これは表全体、各行、各セルのいずれにも使用可能で、使用した範囲に含まれる全てのセルが影響を受けます。

 <code>{| class="wikitable" style="background-color:#fdd" <nowiki><!-- 表全体の背景色をピンクに --></nowiki>
 |+ 表の色を設定する
 ! 見出しセル <nowiki><!-- wikitable で見出しセルへの指定が上書きされる…はずが、そうなっていない --></nowiki>
 ! 見出しセル
 ! style="background-color:#dfd" | 背景色を変更した見出し <!-- セルに直接指定すれば変更可能 -->
 |-
 | style="color:#007" | 文字色を変更したセル
 | セル
 | セル
 |-
 | セル
 | style="color:#fff; background-color:#700" | 背景色と文字色を変更したセル
 | セル
 |- style="background-color:#ddf"
 | 行全体の || 背景色を || 変更
 |}</code>

{| class="wikitable" style="background-color:#fdd" <!-- 表全体の背景色をピンクに -->
|+ 表の色を設定する
! 見出しセル <!-- wikitable で見出しセルへの指定が上書きされる…はずが、そうなっていない -->
! 見出しセル
! style="background-color:#dfd" | 背景色を変更した見出し <!-- セルに直接指定すれば変更可能 -->
|-
| style="color:#007" | 文字色を変更したセル
| セル
| セル
|-
| セル
| style="color:#fff; background-color:#700" | 背景色と文字色を変更したセル
| セル
|- style="background-color:#ddf"
| 行全体の || 背景色を || 変更
|}
@@ 115行： / 115行： @@
   ! 行5
   | colspan="3" | H
-  |}</code>
+  |}
 上のように記述すると、以下の通りに出力されます。
@@ 190行： / 190行： @@
 背景色の指定には'''background-colorプロパティ'''、文字色の指定には'''colorプロパティ'''を使います。
 これは表全体、各行、各セルのいずれにも使用可能で、使用した範囲に含まれる全てのセルが影響を受けます。
-色はRGBの16進数で指定しますが、名前（カラーネーム）で直接指定できる色もあります。カラーネームが付けられている色は全部で147色あり、下記の表はその中でも最も基本的な16色です。
-{| border="1"
-! 名前 !! style="width:5em"|色
-! 名前 !! style="width:5em"|色
-! 名前 !! style="width:5em"|色
-! 名前 !! style="width:5em"|色
-|-
-| Black || style="background-color:Black"|
-| Green || style="background-color:Green"|
-| Silver || style="background-color:Silver"|
-| Lime || style="background-color:Lime"|
-|-
-| Gray || style="background-color:Gray"|
-| Olive || style="background-color:Olive"|
-| White || style="background-color:White"|
-| Yellow || style="background-color:Yellow"|
-|-
-| Maroon || style="background-color:Maroon"|
-| Navy || style="background-color:Navy"|
-| Red || style="background-color:Red"|
-| Blue || style="background-color:Blue"|
-|-
-| Teal || style="background-color:Teal"|
-| Purple || style="background-color:Purple"|
-| Fuchsia || style="background-color:Fuchsia"|
-| Aqua || style="background-color:Aqua"|
-|}
   <code>{| class="wikitable" style="background-color:#fdd" <nowiki><!-- 表全体の背景色をピンクに --></nowiki>
+ |+ 表の色を設定する
   ! 見出しセル <nowiki><!-- wikitable で見出しセルへの指定が上書きされる…はずが、そうなっていない --></nowiki>
   ! 見出しセル
   ! style="background-color:#dfd" | 背景色を変更した見出し <!-- セルに直接指定すれば変更可能 -->
   |-
-  | style="color:blue" | 文字色を変更したセル
+  | style="color:#007" | 文字色を変更したセル
   | セル
   | セル
   |-
   | セル
-  | style="color:white; background-color:red" | 背景色と文字色を変更したセル
+  | style="color:#fff; background-color:#700" | 背景色と文字色を変更したセル
   | セル
   |- style="background-color:#ddf"
@@ 237行： / 209行： @@
 {| class="wikitable" style="background-color:#fdd" <!-- 表全体の背景色をピンクに -->
+|+ 表の色を設定する
 ! 見出しセル <!-- wikitable で見出しセルへの指定が上書きされる…はずが、そうなっていない -->
 ! 見出しセル
 ! style="background-color:#dfd" | 背景色を変更した見出し <!-- セルに直接指定すれば変更可能 -->
 |-
-| style="color:blue" | 文字色を変更したセル
+| style="color:#007" | 文字色を変更したセル
 | セル
 | セル
 |-
 | セル
-| style="color:white; background-color:red" | 背景色と文字色を変更したセル
+| style="color:#fff; background-color:#700" | 背景色と文字色を変更したセル
 | セル
 |- style="background-color:#ddf"
 | 行全体の || 背景色を || 変更
 |}