ヘルプ:表の作り方

ウィキペディアにも「Help:表の作り方」の項目があります。

このページでは表 (テーブル) の作り方について解説します。

表作成の基本

以下のような記号を使ってテーブルは記述されます。この表にある記号はすべて行頭に記述します。

テーブルに使われる記号

記号	解説
{|	テーブルの開始を示す。続けてテーブル全体に適用されるスタイル、クラスなど属性が指定できる。
|+	この記号に続けてテーブルのタイトルを続けて指定する。開始記号の次の行でのみ有効。省略可。
|-	新しい行の開始を示す。つづけてその行に適用される属性を指定できる。最初の行の前でのみ省略可能。
|	これに続けてセル (マス) の内容を入力する。記号と内容の間には半角空白を挿入することを推奨。
!	これに続けて見出しセルの内容を入力する。
|}	テーブルの終了を示す。

簡単な例

簡単な例

見出しA1	見出しB1	見出しC1
見出しA2	セルB2	セルC2
セルA3	セルB3	セルC3
セルA4	セルB4	セルC4
見出しA5	セルB5	セルB6

{| {{bluetable}}
|+ 簡単な例
! 見出しA1
! 見出しB1
! 見出しC1
|-
! 見出しA2
| セルB2
| セルC2
|-
| セルA3
| セルB3
| セルC3
|- style="color:red"
| セルA4
| セルB4
| セルC4
|-
! style="background:red"| 見出しA5
| class="r"| セルB5
| セルB6
|}

個別セルの属性指定

個別セルに属性を適用するには、上の例の見出しA5・セルB5のように内容の前に属性指定を記述し、パイプ記号 (|) で区切って内容を書きます。

セルの結合

セルを結合するにはrowspan属性、colspan属性を使用します。 例えば、縦方向に2マス結合するには

| rowspan="2"| 結合されたセルに表示する内容

横方向に2マス結合するには

| colspan="2"| 結合されたセルに表示する内容

のようにします。

{| class="wikitable"
|+ 結合の例
! rowspan="2"|縦2マス (A1,A2)
! 結合なし (B1)
! 結合なし (C1)
|-
| 結合なし (B2)
| 結合なし (C2)
|-
| 結合なし (A3)
| colspan="2"|横2マス (B3,C3)
|}

結合の例

縦2マス (A1,A2)	結合なし (B1)	結合なし (C1)
	結合なし (B2)	結合なし (C2)
結合なし (A3)	横2マス (B3,C3)

略記法

横に並んだ複数のセルを入力するとき、改行して行頭に記号を入力する代わりに、連続する2つのパイプ記号で区切って同じ行で記述することができます。

{| class="wikitable"
! 見出し1 || 見出し2 || 見出し3
|-
| セル1 || セル2 || セル3
|-
| セル4 || colspan="2" |セル5 (横2マス)
|-
| style="color:red"| セル6 || セル7 || セル8
|}

見出し1	見出し2	見出し3
セル1	セル2	セル3
セル4	セル5 (横2マス)
セル6	セル7	セル8

属性

スタイル属性

インラインCSSを使って表のスタイルを指定できます。スタイル属性の指定は「style= "プロパティ名: 値"」のように、プロパティ名と値をコロンで区切って記述します。複数のスタイルを指定するときは「style = "プロパティ名1: 値1; プロパティ名2: 値2;"」のようにセミコロンで区切って連続で指定します。以下よく使われるスタイルを紹介します。

背景色の指定

backgroundプロパティ

背景色をカラーネームまたはカラーコードで指定します。

書式

style="background:カラーネーム" または style="background:#カラーコード"

例

style="background:red" または style="background:#ff00ff"

文字色の指定

colorプロパティ

backgroundプロパティ同様に文字色をカラーネームまたはカラーコードで指定します。

書式

style="color:カラーネーム" または style="color:#カラーコード"

文字の配置

text-alignプロパティ

横方向の文字の配置を指定できます。値はcenter left right justifyの4種。それぞれ中央揃え、左揃え、右揃え、均等割り付け。

書式

style="text-align:値"

text-alignプロパティ

横方向の文字の配置を指定できます。値はtop middle bottomの3種。それぞれ上端え、中央揃え、下端揃え。

書式

style="vertical-align:値"

クラス属性

このWikiでは簡単に見栄えのよいテーブルを作成できるように共通のCSSの中にいくつかクラスが用意されています。

クラスを適用するにはclass="クラス名"のように記述します。複数のクラスを適用するときはclass="クラス1 クラス2"のように半角空白で区切って記述します。

見出しの背景色・枠線を指定する

bluetable

bluetableの表の例

見出し	見出し
見出し	セル

枠線・見出しの背景色が青いテーブルを作るクラスです。見出しとその他のセルをはっきり区別できます。

また、便利なテンプレート:Bluetableが用意されており、

{| class="bluetable"

の代わりに

 {| {{bluetable}}

と省略して書くことができます。

graytable

graytableの表の例

見出し	見出し
見出し	セル

bluetableと使い方はほぼ同じです。見出しの背景色が濃いのでやはり見出しを強調することができますが、グレーは文字色と同じ無彩色で、明度の差が小さいので人によっては見づらいと感じるかもしれません。

bluetable同様にTemplate:Graytableが用意されています。

wikitable

wikitableの表の例

見出し	見出し
見出し	セル

上の二つに比べると見出しが目立ちにくいクラスです。背景色が薄いので背景色のスタイルを上書きして使うのには向いています。

文字の配置を指定する

左揃えにするlクラス、右揃えにするrクラス、中央揃えにするcクラスが用意されています。見出しのセルにはこれらのクラスは適用できないこともあります。

並び替えられる表を作る

sortableクラスを指定すると縦に並んだデータを文字順に並べ替えられる表が作れます。{{bluetable}}などを利用の場合は、引数1に「sortable」と入力して"{{bluetable|sortable}}"のようにします。

アルファベット	数字
A	1
B	2
C	3
a	10
b	20
c	30
Ab	-1
ab	-2
AB	-10

rowspanを使ったマスは並べ替えると分裂します。

見出し1	見出し2
A (縦2マス)	3
	1
B	2

なお、colspanを使った表を並べ替えようとするとうまく働きません。(並べ替え対象にならない最上部のセルにcolspanを含むだけなら問題ありません)

ソートキーの指定

文字コード順ではなく別のキーによってソートしたいときはソートキーをdata-sort-value属性に指定します。以下の例ではカタカナの読みをソートキーに指定しています。

ソートキー未指定

カード名	レベル	枚数
サンド	12	4
サンドパン	33	3
ワンリキー	20	4
ゴーリキー	40	3
サワムラー	23	2
エビワラー	33	1
サイホーン	18	2
ガルーラ	40	1
エネルギー回収	-	2
エネルギー転送	-	1
エネルギー・リムーブ	-	2
オーキドはかせ	-	1
きずぐすり	-	2
突風	-	2
ポケモンいれかえ	-	2
ポケモン回収	-	1
マサキ	-	2

ソートキー指定済

カード名	レベル	枚数
サンド	12	4
サンドパン	33	3
ワンリキー	20	4
ゴーリキー	40	3
サワムラー	23	2
エビワラー	33	1
サイホーン	18	2
ガルーラ	40	1
エネルギー回収	-	2
エネルギー転送	-	1
エネルギー・リムーブ	-	2
オーキドはかせ	-	1
きずぐすり	-	2
突風	-	2
ポケモンいれかえ	-	2
ポケモン回収	-	1
マサキ	-	2

{| {{bluetable|sortable}}
! カード名
! レベル
! 枚数
(中略)
|-
| data-sort-value="エネルキイカイシユウ"|[[エネルギー回収]]
| -
| 2
|-
| data-sort-value="エネルキイテンソウ"|[[エネルギー転送]]
| -
| 1
|-
| data-sort-value="エネルキイリムウフ"|[[エネルギー・リムーブ]]
| -
| 2
(後略)

HTMLによるマークアップ

HTMLで表を作ることもできなくはありませんが、メンテナンスしにくいため基本的に使用しないでください。条件文の中でパイプ記号(|)が必要な場合は、{{!}}が使用できます。