ヘルプ:表の作り方
このページでは表の作り方について解説します。どのような場合に表を使うのがふさわしいかについてはYourpedia:表のガイドラインを参照してください。
目次
簡単な例[編集]
ごく単純な例を以下に示します。
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"
|+表のタイトル
|-style="background:#f2f2f2"
!見出し0!!列見出しA!!列見出しB!!列見出しC
|-
!style="background:#f2f2f2"|行見出し1
|セル1A||セル1B||セル1C
|-
!style="background:#f2f2f2"|行見出し2
|セル2A||セル2B||セル2C
|}
これは以下のように表示されます。
| 見出し0 | 列見出しA | 列見出しB | 列見出しC |
|---|---|---|---|
| 行見出し1 | セル1A | セル1B | セル1C |
| 行見出し2 | セル2A | セル2B | セル2C |
また、以下のように書いても全く同じように表示されます。
<table border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9">
<caption>表のタイトル</caption>
<tr style="background:#f2f2f2">
<th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th>
</tr>
<tr>
<th style="background:#f2f2f2">行見出し1</th><td>セル1A</td><td>セル1B</td><td>セル1C</td>
</tr>
<tr>
<th style="background:#f2f2f2">行見出し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で記述することになります。より詳しい解説は専門書や入門サイトなどに譲り、ここでは単純なものやよく使われるものに限って解説します。
罫線[編集]
テーブル全体に罫線を表示するのはとても簡単です。表全体のパラメータに、
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"
と指定するだけです。先の例に適用すると、以下のように表示されます。
| 列見出し 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マークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; text-align:center"
|-style="background:#f2f2f2"
!列1!!列2!!列3
|-
|rowspan="2"|A||colspan="2"|B
|-
|C||D
|-
|E||rowspan="2" colspan="2"|F
|-
|G
|-
|colspan="3"|H
|}
実際の表示
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | |
| C | D | |
| E | F | |
| G | ||
| H | ||
さらに複雑な例もあります。
Wikiマークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"
|-style="background:#f2f2f2"
!走行による分類!!colspan="2"|分節!!上皮細胞による分類
|-
!style="background:#f2f2f2" rowspan="2"|近位曲部
|rowspan="2"|近位曲尿細管||rowspan="1"|S1文節
!style="background:#f2f2f2" rowspan="4"|近位尿細管
|-
|rowspan="2"|S2文節
|-
!style="background:#f2f2f2" rowspan="7"|ヘンレループ
|rowspan="2"|近位直尿細管
|-
|rowspan="1"|S3文節
|-
|rowspan="3"|細い下行脚||短ループのもの
!style="background:#f2f2f2" rowspan="4"|中間尿細管
|-
|長ループのもの上部
|-
|長ループのもの下部
|-
|colspan="2"|細い上行脚
|-
|遠位尿細管||太い上行脚
!style="background:#f2f2f2" rowspan="2"|遠位尿細管
|-
!style="background:#f2f2f2" rowspan="2"|遠位曲部
|colspan="2"|遠位曲尿細管
|-
|colspan="2"|結合尿細管
!style="background:#f2f2f2" rowspan="4"|集合管系
|-
!style="background:#f2f2f2" rowspan="3"|集合管
|colspan="2"|皮質集合管
|-
|rowspan="2"|髄質集合管||髄質外層集合管
|-
|髄質内層集合管
|}
実際の表示
| 走行による分類 | 分節 | 上皮細胞による分類 | |
|---|---|---|---|
| 近位曲部 | 近位曲尿細管 | S1文節 | 近位尿細管 |
| S2文節 | |||
| ヘンレループ | 近位直尿細管 | ||
| S3文節 | |||
| 細い下行脚 | 短ループのもの | 中間尿細管 | |
| 長ループのもの上部 | |||
| 長ループのもの下部 | |||
| 細い上行脚 | |||
| 遠位尿細管 | 太い上行脚 | 遠位尿細管 | |
| 遠位曲部 | 遠位曲尿細管 | ||
| 結合尿細管 | 集合管系 | ||
| 集合管 | 皮質集合管 | ||
| 髄質集合管 | 髄質外層集合管 | ||
| 髄質内層集合管 | |||
幅と高さの調整[編集]
表全体の幅を指定するには、表全体のパラメータにCSSのwidthプロパティを設定します。
Wikiマークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; width:100%"
|+幅100%の表
|セル1||セル2||セル3
|}
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; width:80%"
|+幅80%の表
|セル1||セル2||セル3
|}
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; width:50%"
|+幅50%の表
|セル1||セル2||セル3
|}
実際の表示
| セル1 | セル2 | セル3 |
| セル1 | セル2 | セル3 |
| セル1 | セル2 | セル3 |
列の幅を個別に指定するには、セルのパラメータにやはりwidthプロパティを設定します。1箇所で設定すれば、他の行の同じ列にも適用されます。
Wikiマークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; width:80%"
|+表全体の幅は80%
|style="width:50%"|幅50%のセル||style="width:10em"|幅10emのセル||幅を指定しないセル
|}
実際の表示
| 幅50%のセル | 幅10emのセル | 幅を指定しないセル |
幅を指定するもうひとつの方法にwidth 属性がありますが、セルに対するwidth属性は非推奨です[2]。表全体に対するwidth属性は非推奨ではない[1]のですが、混乱を避けるためにCSSのwidthプロパティで置き換えた方が無難でしょう。
表の高さを指定するにはCSSのheightプロパティを設定します。表全体および行に対する設定が可能ですが列の幅と違い折り返しの発生などで行や表全体の高さは動的に変化するので、あえて設定することはあまりありません。
幅や高さを指定するのに様々な単位を使用できますが、特別な理由[3]がない限り%（表示領域に対するパーセンテージ）かem（1em=1文字分）で指定してください。例えばセルの幅を px（ピクセル単位）で指定した場合、ブラウザの文字サイズを大きく設定してもセルの大きさは変化しないため、たいへん見づらくなるおそれがあります。emであれば基準となる文字サイズに連動してセルのサイズが変化します。
折り返しの禁止[編集]
日本語を含むいくつかの言語では文中のどこでも折り返しが可能であるため、場合によっては見出しセルの短い語が折り返されて表示され非常に見づらくなります。これを防ぐには、CSSのwhite-spaceプロパティを設定します。
Wikiマークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"
|+見出しが折り返されてしまうかもしれない表
!style="background:#f2f2f2"|折り返されそうな見出し
|寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
|}
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"
|+見出しの折り返しを禁止した表
!style="background:#f2f2f2; white-space:nowrap"|折り返されそうな見出し
|寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
|}
実際の表示
| 折り返されそうな見出し | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 折り返されそうな見出し | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
セルのパラメータにnowrap属性を使用して同じ効果を得られますが、この属性は非推奨です[2]。
セル内の文字の配置[編集]
セル内の文字をセンタリングしたり右寄せにしたりするには、CSSのtext-alignプロパティを設定します。行のパラメータとして設定すると行の中のセル全てに、表全体のパラメータとして設定すると表に含まれるセル全てに適用されます。
Wikiマークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; width:100%"
|+文字寄せのサンプル
|style="text-align:left"|左寄せのセル||style="text-align:center"|中央寄せのセル||style="text-align:right"|右寄せのセル
|}
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; text-align:right"
|+全部右寄せの表
|-style="background:#f2f2f2"
!×!!2!!3!!4!!5
|-
!style="background:#f2f2f2"|2
|4||6||8||10
|-
!style="background:#f2f2f2"|3
|6||9||12||15
|-
!style="background:#f2f2f2"|4
|8||12||16||20
|-
!style="background:#f2f2f2"|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マークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; 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マークアップ
'''この段落は表の手前に書かれています'''：
寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; float:right"
|+右寄せした表
|-style="background:#f2f2f2"
!見出し0!!列見出しA!!列見出しB!!列見出しC
|-
!style="background:#f2f2f2"|行見出し1
|セル1A||セル1B||セル1C
|-
!style="background:#f2f2f2"|行見出し2
|セル2A||セル2B||セル2C
|}
'''この段落は表の後に書かれています'''：
寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
実際の表示
この段落は表の手前に書かれています： 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
| 見出し0 | 列見出しA | 列見出しB | 列見出しC |
|---|---|---|---|
| 行見出し1 | セル1A | セル1B | セル1C |
| 行見出し2 | セル2A | セル2B | セル2C |
この段落は表の後に書かれています： 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助
表の配置を指定するのにalign属性が使われることがありますが、表全体に対するalign属性は非推奨です[2]。上記の方法を使ってください。
背景色、文字色[編集]
背景色を指定するには、CSSのbackground-colorプロパティを設定します。文字色はcolorプロパティを設定します。
Wikiマークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; background-color:#fdd"
|+表の色を設定する
!見出しセル!!見出しセル!!style="background-color:#dfd"|背景色を変更した見出し
|-
|style="color:#007"|文字色を変更したセル||セル||セル
|-
|セル||style="color:#fff; background-color:#700"|背景色と文字色を変更したセル||セル
|-style="background-color:#ddf"
|行全体の||背景色を||変更
|}
実際の表示
| 見出しセル | 見出しセル | 背景色を変更した見出し |
|---|---|---|
| 文字色を変更したセル | セル | セル |
| セル | 背景色と文字色を変更したセル | セル |
| 行全体の | 背景色を | 変更 |
背景色の変更はbgcolor属性でも可能ですが、この属性は非推奨です[2]。また文字色を変更するためにセル内の文字を<font>タグで囲む方法がありますが、font要素も同様に非推奨です。
Yourpedia:色の使用は控えめにも参照してください。
その他の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マークアップ
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"
|セル1||セル2
{| border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9; background:#aad; margin:.5em"
|入れ子になった
|-
|表
|}
|style="vertical-align:bottom"|もとの表のセル3
|}
実際の表示
| セル1 | セル2
|
もとの表のセル3 |
XHTML によるマークアップ[編集]
条件文を使う場合は引数の区切りにパイプが使用されるため、表のWikiマークアップに使うパイプと干渉してお互いがうまく動作しなくなってしまいます。このような場合、{{!}}のようなテンプレートを利用して直接パイプを表記しないか、もしくはXHTMLで記述します。
Wikiマークアップ
<table border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9">
<caption>表のタイトル</caption>
<tr style="background:#f2f2f2">
<th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th>
</tr>
<tr>
<th style="background:#f2f2f2">行見出し1</th><td>セル1A</td><td>セル1B</td><td>セル1C</td>
</tr>
<tr>
<th style="background:#f2f2f2">行見出し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 border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9"><caption>表のタイトル</caption><tr style="background:#f2f2f2"><th>見出し0</th><th>列見出しA</th><th>列見出しB</th><th>列見出しC</th></tr><tr><th style="background:#f2f2f2">行見出し1</th><td>セル1A</td><td>セル1B</td><td>セル1C</td></tr><tr><th style="background:#f2f2f2">行見出し2</th><td>セル2A</td><td>セル2B</td><td>セル2C</td></tr></table>
以下は、表の一部に条件文を使用した例です。場合によって表示内容を変更するテンプレートを作成する場合などに使います。Help:テンプレートとHelp:条件文も参照してください。
Wikiマークアップ
<table border="1" cellspacing="0" cellpadding="3" style="background:#f9f9f9">
{{#if: {{{1|}}}
|<tr><td>引数が指定されていれば表示する行</td></tr>
|<tr><td>引数が指定されていないときに表示する行</td></tr>
}}
<tr><td>引数に関係なく表示する行</td></tr>
</table>
実際の表示
| 引数が指定されていれば表示する行 |
| 引数が指定されていないときに表示する行 |
| 引数に関係なく表示する行 |
註[編集]
- ↑ 1.0 1.1 1.2 1.3 これらの属性はXHTML 1.0 Transitionalでは非推奨とはされていませんが、見た目を規定する属性なのであえて使用する理由はありません。外観の統一のためにも極力スタイルシートを利用すべきです。
- ↑ 2.0 2.1 2.2 2.3 MediaWikiが最終的に出力する文書形式はXHTML 1.0 Transitionalで、いくつかの見た目を直接規定する要素や属性は互換性のために残されているだけで非推奨となっています。スタイルシートによる指定に置き換えるべきです。
- ↑ 画像の幅に合わせてピクセル指定するのは典型的な例です。MediaWikiの制約上、画像サイズはピクセル単位以外で指定できないためやむを得ません。
- ↑ vertical-alignプロパティの設定は子要素に継承されないのが正しい動作ですが、Internet ExplorerやFirefoxでは継承されてしまいます。Operaは仕様通りに動作するようです。
