Help:表の作り方/改定案2

このページでは表の作り方について解説します。どのような場合に表を使うのがふさわしいかについてはWikipedia:表のガイドラインを参照してください。

簡単な例

ごく単純な例を以下に示します。

{| class="wikitable"
|+ 表のタイトル
! 見出し0 !! 列見出しA !! 列見出しB !! 列見出しC
|-
! 行見出し1
| セル1A || セル1B || セル1C
|-
! 行見出し2
| セル2A || セル2B || セル2C
|}

これは、以下のように表示されます。

表のタイトル
見出し0	列見出しA	列見出しB	列見出しC
行見出し1	セル1A	セル1B	セル1C
行見出し2	セル2A	セル2B	セル2C

また、以下のように書いても全く同じように表示されます。

<table class="wikitable">
    <caption>表のタイトル</caption>
    <tr>
        <th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th>
    </tr>
    <tr>
        <th>行見出し1</th><td>セル1A</td><td>セル1B</td><td>セル1C</td>
    </tr>
    <tr>
        <th>行見出し2</th><td>セル2A</td><td>セル2B</td><td>セル2C</td>
    </tr>
</table>

前者の、{| で始まり、パイプ ( | ) を多用するものをパイプ構文と呼びます。後者は XHTML で記述されています。それぞれに利点と欠点がありますが、以降はより簡潔に書けるパイプ構文を中心に解説していきます。

パイプ構文

パイプ構文は、実際にはHTML要素の省略記法に過ぎません。HTMLの知識はそのままパイプ構文にも応用できます。

早見表

記号	意味	備考
{\|	表の記述を開始する
\|+	表のタイトル	（省略可）
\|-	新しい行を開始する	（1行目では省略可）
\|	通常のセルの開始。\|\| で区切って、次のセルを記述可能
!	見出しセルの開始。!! または \|\| で区切って、次の見出しセルを記述可能	（省略可）
\|}	表の記述を終了する

解説

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

重要なルール: 各種の記号は必ずラインの先頭に書かねばならず、空白などを手前に入れてはいけません。

{| で開始し、|} で終了するまでがひとつの表になります。開始記号と表の内容、終了記号はそれぞれ独立したラインに書く必要があります。これは <table></table> に相当します。

{|
    表の内容を記述
|}

|+（パイプとプラス記号）に続けて書いた内容は、表のタイトルになります。これは省略可能です。<caption></caption> に相当します。

{|
|+ タイトルを記述
    表の内容を記述
|}

表は、行をひとつの単位として記述します。|-（パイプとマイナス記号）だけを独立したラインに記述すると、そこから新しい行を開始します。表中最初の行に限って、|- を省略することができます。<tr> に相当します。

{|
|+ 表タイトル
|-  <!-- （これは省略可能） -->
    行の内容を記述
|-
    行の内容を記述
|}

各行は、表の最小構成要素であるセルを1個以上含みます。セルは |（パイプ1個）で開始し、続けて同じラインにセルの内容を記述します。<td> に相当します。

{|
|+ 表タイトル
|-
| セル 1
|-
| セル 2
|}

1行にセルを2個以上含める場合は、新しいラインに記述するか、既存のセルと同じラインに続けて ||（パイプ2個）で区切って次のセルの内容を記述します。以下の2つの行の表示結果は全く同じになります。

{|
|+ 表タイトル
|-
| セル 1
| セル 2
| セル 3
|-
| セル 1 || セル 2 || セル 3
|}

パイプの代わりに !（感嘆符）を使うことで、見出しセルを記述できます。使用するブラウザにもよりますが、大抵はセル内でセンタリングされ、太字で表示されます。! で始まるラインに続けて書いたセルはすべて見出しセルとして扱われるので、通常のセルは新しいラインから書く必要があります。見出しセル同士の区切りは !! でも || でも可能ですが、分かりやすさのために !! を使用した方がいいでしょう。<th> に相当します。

{|
|+ 表タイトル
|-
! 列見出し 1 !! 列見出し 2 !! 列見出し 3
|-
! 行見出し 1
| セル 1-2
| セル 1-3
|-
! 行見出し 2
| セル 2-2 || セル 2-3
|}

最後の例は、以下のように表示されます。

表タイトル
列見出し 1	列見出し 2	列見出し 3
行見出し 1	セル 1-2	セル 1-3
行見出し 2	セル 2-2	セル 2-3

この例は必要最低限の記述しかしていないので、見た目が寂しいかもしれません。次の節で解説するパラメータを指定することにより、罫線など見た目を調整することが可能になります。

パラメータ

表全体、タイトル、各行、各セルにはパラメータを記述することができます。パラメータの記述により罫線や背景色などを変更できます。

表全体・行: 開始記号に続けてパラメータを記述します。
タイトル・セル・見出しセル: 開始記号の後にパラメータを記述し、|（パイプ1個）で区切って内容を記述します。

{| 表全体のパラメータ
|+ タイトルのパラメータ | タイトル
|- 行のパラメータ
! 見出しセルのパラメータ | 見出し
| セルAのパラメータ | セルA || セルBのパラメータ | セルB
|}

パラメータはHTML要素の属性に対応し、例えば表全体に対する指定 {| style="color:red;" ... |} は、<table style="color:red;"> ... </table> として出力されます。

一部を除いて、ほとんどのパラメータは style 属性 にインライン CSS で記述することになります。より詳しい解説は専門書や入門サイトなどに譲り、ここでは単純なものやよく使われるものに限って解説します。

罫線

テーブル全体に罫線を表示するのはとても簡単です。表全体のパラメータに、

{| class="wikitable"

と指定するだけです。先の例に適用すると、以下のように表示されます。

表タイトル
列見出し 1	列見出し 2	列見出し 3
行見出し 1	セル 1-2	セル 1-3
行見出し 2	セル 2-2	セル 2-3

別の方法として、border属性を使用することができます^[1]。

{| border="1"

表タイトル
列見出し 1	列見出し 2	列見出し 3
行見出し 1	セル 1-2	セル 1-3
行見出し 2	セル 2-2	セル 2-3

表の一部にだけ罫線が必要な場合は、個々のセルの境界線を CSS で指定します。#その他の CSS の利用を参照してください。

セルの結合

セルの一部を結合して1つのセルのように扱うには、セルのパラメータにrowspan属性またはcolspan属性を指定します。

Wikiマークアップ

{| class="wikitable" style="text-align:center;"
|-
! 列1 || 列2 || 列3
|-
| rowspan="2" | A
| colspan="2" | B
|-
| C <!-- 列1はセルAに塞がれている -->
| D 
|-
| E
| rowspan="2" colspan="2" | F
|-
| G <!-- 列2と3はセルFに塞がれている -->
|-
| colspan="3" | H
|}

実際の表示

列1	列2	列3
A	B
A	C	D
E	F
G	F
H

幅と高さの調整

表全体の幅を指定するには、表全体のパラメータに CSS の width プロパティを設定します。

Wikiマークアップ

{| class="wikitable" style="width:100%;"
|+ 幅 100% の表
| セル1 || セル2 || セル3
|}
{| class="wikitable" style="width:80%;"
|+ 幅 80% の表
| セル1 || セル2 || セル3
|}
{| class="wikitable" style="width:50%;"
|+ 幅 50% の表
| セル1 || セル2 || セル3
|}

実際の表示

幅 100% の表
セル1	セル2	セル3

幅 80% の表
セル1	セル2	セル3

幅 50% の表
セル1	セル2	セル3

列の幅を個別に指定するには、セルのパラメータにやはり width プロパティを設定します。1箇所で設定すれば、他の行の同じ列にも適用されます。

Wikiマークアップ

{| class="wikitable" style="width:80%;"
|+ 表全体の幅は 80%
| style="width:50%;" | 幅 50% のセル <!-- 表全体の幅に対する割合 -->
| style="width:10em;" | 幅 10em のセル
| 幅を指定しないセル
|}

実際の表示

表全体の幅は 80%
幅 50% のセル	幅 10em のセル	幅を指定しないセル

幅を指定するもうひとつの方法に width 属性がありますが、セルに対する width 属性は非推奨です^[2]。表全体に対する width 属性は非推奨ではない^[1]のですが、混乱を避けるために CSS の width プロパティで置き換えた方が無難でしょう。

表の高さを指定するには CSS の height プロパティを設定します。表全体および行に対する設定が可能ですが、列の幅と違い折り返しの発生などで行や表全体の高さは動的に変化するので、あえて設定することはあまりありません。

幅や高さを指定するのに様々な単位を使用できますが、特別な理由^[3]がない限り %（表示領域に対するパーセンテージ）か em（1em = 1文字分）で指定してください。例えばセルの幅を px（ピクセル単位）で指定した場合、ブラウザの文字サイズを大きく設定してもセルの大きさは変化しないため、たいへん見づらくなるおそれがあります。em であれば基準となる文字サイズに連動してセルのサイズが変化します。

折り返しの禁止

日本語を含むいくつかの言語では、文中のどこでも折り返しが可能であるため、場合によっては見出しセルの短い語が折り返されて表示され非常に見づらくなります。これを防ぐには、CSS の white-space プロパティを設定します。

Wikiマークアップ

{| class="wikitable"
|+ 見出しが折り返されてしまうかもしれない表
! 折り返されそうな見出し
| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
|}
{| class="wikitable"
|+ 見出しの折り返しを禁止した表
! style="white-space:nowrap;" | 折り返されそうな見出し
| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
|}

実際の表示

見出しが折り返されてしまうかもしれない表
折り返されそうな見出し	寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

見出しの折り返しを禁止した表
折り返されそうな見出し	寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

セルのパラメータに nowrap 属性を使用して同じ効果を得られますが、この属性は非推奨です^[2]。

セル内の文字の配置

セル内の文字をセンタリングしたり右寄せにしたりするには、CSS の text-align プロパティを設定します。行のパラメータとして設定すると行の中のセル全てに、表全体のパラメータとして設定すると表に含まれるセル全てに適用されます。

Wikiマークアップ

{| class="wikitable" style="width:100%;"
|+ 文字寄せのサンプル
| style="text-align:left;" | 左寄せのセル
| style="text-align:center;" | 中央寄せのセル
| style="text-align:right;" | 右寄せのセル
|}
{| class="wikitable" style="text-align:right;"
|+ 全部右寄せの表
! × !! 2 !! 3 !! 4 !! 5 <!-- 見出しセルには適用されない -->
|-
! 2
| 4 || 6 || 8 || 10
|-
! 3
| 6 || 9 || 12 || 15
|-
! 4
| 8 || 12 || 16 || 20
|-
! 5
| 10 || 15 || 20 || 25
|}

実際の表示

文字寄せのサンプル
左寄せのセル	中央寄せのセル	右寄せのセル

全部右寄せの表
×	2	3	4	5
2	4	6	8	10
3	6	9	12	15
4	8	12	16	20
5	10	15	20	25

このほかに、セルのパラメータに align 属性を使用し、align="right" などとしても同じ効果が得られます^[1]が、後述するように表に対する align 属性は非推奨なので、混乱を避けるために CSS の text-align プロパティで置き換えた方が無難でしょう。

セル内の文字の垂直方向の配置を指定するには、CSS の vertical-align プロパティを設定します。こちらは text-align プロパティと異なり、行や表全体に指定してもセルには反映されません^[4]。セルのパラメータとして使用してください。

Wikiマークアップ

{| class="wikitable" style="width:100%; height:3em;"
|+ 垂直方向の指定のサンプル
| style="vertical-align:top;" | 上辺で揃えたセル
| style="vertical-align:middle;" | 中央で揃えたセル
| style="vertical-align:bottom;" | 下辺で揃えたセル
|}

実際の表示

垂直方向の指定のサンプル
上辺で揃えたセル	中央で揃えたセル	下辺で揃えたセル

このほかに、セルのパラメータに valign 属性を使用し、valign="top" などとしても同じ効果が得られます^[1]。

表の配置

表を中央に表示するには、表全体のパラメータに以下を指定します。これは、「上下に余白を空けず、左右の余白を自動計算する」という意味で、左右それぞれの端から等しい距離、つまり中央に配置されます。

{| style="margin:0 auto;"

中央に表示した表
見出し0	列見出しA	列見出しB	列見出しC
行見出し1	セル1A	セル1B	セル1C
行見出し2	セル2A	セル2B	セル2C

表を右または左に寄せるには、表全体のパラメータに以下を指定します。後に続くテキストは反対側に回り込み、余白部分に流し込まれる形になります。

{| style="float:right;" <!-- 右寄せ -->

または

{| style="float:left;" <!-- 左寄せ -->

Wikiマークアップ

'''この段落は表の手前に書かれています''':
寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

{| class="wikitable" style="float:right;"
|+ 右寄せした表
! 見出し0 !! 列見出しA !! 列見出しB !! 列見出しC
|-
! 行見出し1
| セル1A || セル1B || セル1C
|-
! 行見出し2
| セル2A || セル2B || セル2C
|}

'''この段落は表の後に書かれています''':
寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

実際の表示

この段落は表の手前に書かれています: 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

右寄せした表
見出し0	列見出しA	列見出しB	列見出しC
行見出し1	セル1A	セル1B	セル1C
行見出し2	セル2A	セル2B	セル2C

この段落は表の後に書かれています: 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助

表の配置を指定するのに align 属性が使われることがありますが、表全体に対する align 属性は非推奨です^[2]。上記の方法を使ってください。

背景色、文字色

背景色を指定するには、CSS の background-color プロパティを設定します。文字色は color プロパティを設定します。

Wikiマークアップ

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

実際の表示

表の色を設定する
見出しセル	見出しセル	背景色を変更した見出し
文字色を変更したセル	セル	セル
セル	背景色と文字色を変更したセル	セル
行全体の	背景色を	変更

背景色の変更は bgcolor 属性でも可能ですが、この属性は非推奨です^[2]。また、文字色を変更するためにセル内の文字を <font> タグで囲む方法がありますが、font 要素も同様に非推奨です。

Wikipedia:色の使用は控えめにも参照してください。

その他の CSS の利用

class="wikitable" を使わずに罫線を表示するには、各セルに罫線を表示する設定を記述しなければなりません（正確には罫線と言うより、各セルの境界線です）。

以下、表全体および各セルで border で始まる記述をしているのが罫線の指定部分です。

Wikiマークアップ

{| style="width:20em; margin-left:1em; border-width:2px 3px 3px 2px; border-color:#a77 #733 #733 #a77; border-style:solid; border-collapse:collapse; background-color:white; text-align:center;"
|+ style="font-weight:bold; font-size:smaller;" | 五十音表
|-
! style="border-bottom:1px solid #733;" | ん
! style="border-bottom:1px solid #733;" | わ
! style="border-bottom:1px solid #733;" | ら
! style="border-bottom:1px solid #733;" | や
! style="border-bottom:1px solid #733;" | ま
! style="border-bottom:1px solid #733;" | は
! style="border-bottom:1px solid #733;" | な
! style="border-bottom:1px solid #733;" | た
! style="border-bottom:1px solid #733;" | さ
! style="border-bottom:1px solid #733;" | か
! style="border:solid #733; border-width:0 0 1px 1px;" | あ
|- style="background-color:#edd;"
| || || り || style="color:#777;" | ゐ || み || ひ || に || ち || し || き
! style="border-left:1px solid #733;" | い
|-
| || || る || ゆ || む || ふ || ぬ || つ || す || く
! style="border-left:1px solid #733;" | う
|- style="background-color:#edd;"
| || || れ || style="color:#777;" | ゑ || め || へ || ね || て || せ || け
! style="border-left:1px solid #733;" | え
|-
| || を || ろ || よ || も || ほ || の || と || そ || こ
! style="border-left:1px solid #733;" | お
|}

実際の表示

五十音表
わ	ら	や	ま	は	な	た	さ	か	あ
	り	ゐ	み	ひ	に	ち	し	き	い
	る	ゆ	む	ふ	ぬ	つ	す	く	う
	れ	ゑ	め	へ	ね	て	せ	け	え
を	ろ	よ	も	ほ	の	と	そ	こ	お

表の入れ子

表の中に、さらに表を表示することができます。以下の例では、セル2の中に青色で表示される別の表が入っています。内側の表であっても、表を開始する記号 ({|) がラインの先頭に来る必要があることに注意してください。

Wikiマークアップ

{| class="wikitable"
| セル1
| セル2
{| class="wikitable" style="background:#aad; margin:.5em;"
| 入れ子になった
|-
| 表
|}
| style="vertical-align:bottom;" | もとの表のセル3
|}

実際の表示

セル1

セル2

入れ子になった
表

もとの表のセル3

XHTML によるマークアップ

条件文を使う場合は、引数の区切りにパイプが使用されるため、表のWikiマークアップに使うパイプと干渉してお互いがうまく動作しなくなってしまいます。このような場合、{{!}} のようなテンプレートを利用して直接パイプを表記しないか、もしくは XHTML で記述します。

Wikiマークアップ

<table class="wikitable">
    <caption>表のタイトル</caption>
    <tr>
        <th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th>
    </tr>
    <tr>
        <th>行見出し1</th><td>セル1A</td><td>セル1B</td><td>セル1C</td>
    </tr>
    <tr>
        <th>行見出し2</th><td>セル2A</td><td>セル2B</td><td>セル2C</td>
    </tr>
</table>

実際の表示

表のタイトル
見出し0	列見出しA	列見出しB	列見出しC
行見出し1	セル1A	セル1B	セル1C
行見出し2	セル2A	セル2B	セル2C

上の例は分かりやすさのために改行やインデントを入れていますが、これらは実際の表示には影響しません。例えば、ちょっと極端ですが、以下のようにしても全く同じように表示されます。

<table class="wikitable"><caption>表のタイトル</caption><tr><th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th></tr><tr><th>行見出し1</th><td>セル1A</td><td>セル1B</td><td>セル1C</td></tr><tr><th>行見出し2</th><td>セル2A</td><td>セル2B</td><td>セル2C</td></tr></table>

以下は、表の一部に条件文を使用した例です。場合によって表示内容を変更するテンプレートを作成する場合などに使います。Help:テンプレートとHelp:条件文も参照してください。

Wikiマークアップ

<table class="wikitable">
{{#if: {{{1|}}} 
| <tr><td>引数が指定されていれば表示する行</td></tr>
| <tr><td>引数が指定されていないときに表示する行</td></tr>
}}
<tr><td>引数に関係なく表示する行</td></tr>
</table>

実際の表示

引数が指定されていないときに表示する行
引数に関係なく表示する行

註

^ ^a ^b ^c ^d これらの属性は XHTML 1.0 Transitional では非推奨とはされていませんが、見た目を規定する属性なのであえて使用する理由はありません。外観の統一のためにも極力スタイルシートを利用すべきです。
^ ^a ^b ^c ^d MediaWiki が最終的に出力する文書形式は XHTML 1.0 Transitional で、いくつかの見た目を直接規定する要素や属性は互換性のために残されているだけで非推奨となっています。スタイルシートによる指定に置き換えるべきです。
^ 画像の幅に合わせてピクセル指定するのは典型的な例です。MediaWikiの制約上、画像サイズはピクセル単位以外で指定できないためやむを得ません。
^ vertical-align プロパティの設定は子要素に継承されないのが正しい動作ですが、Internet Explorer や Firefox では継承されてしまいます。Opera は仕様通りに動作するようです。

簡単な例

パイプ構文

早見表

解説

パラメータ

罫線

セルの結合

幅と高さの調整

折り返しの禁止

セル内の文字の配置

表の配置

背景色、文字色

その他の CSS の利用

表の入れ子

XHTML によるマークアップ

註

関連項目