検索このページでは表の作り方について解説します。どのような場合に表を使うのがふさわしいかについてはYourpedia:表のガイドラインを参照してください。簡単な例[編集]ごく単純な例を以下に示します。style="background:#f9f9f9"|+表のタイトル|-style="background:#f2f2f2"!見出し0!!列見出しA!!列見出しB!!列見出しC|-!style="background:#f2f2f2"|行見出し1|セル1A||セル1B||セル1C|-!style="background:#f2f2f2"|行見出し2|セル2A||セル2B||セル2C|}これは以下のように表示されます。セル2Cまた、以下のように書いても全く同じように表示されます。</tr></table>前者の{|で始まり、パイプ(|)を多用するものをパイプ構文と呼びます。後者はXHTMLで記述されています。それぞれに利点と欠点がありますが、以降はより簡潔に書けるパイプ構文を中心に解説していきます。パイプ構文[編集]パイプ構文は実際にはHTML要素の省略記法に過ぎません。HTMLの知識はそのままパイプ構文にも応用できます。(1行目では省略可)|通常のセルの開始。||で区切って、次のセルを記述可能!見出しセルの開始。(省略可)|}表の記述を終了する解説[編集]以下、「行」という語は「表の横一列」を、「列」という語は「縦一列」を意味します。構文上の改行記号で区切られる「行」については「ライン」と表記します。混同に気をつけてください。重要なルール各種の記号は必ずラインの先頭に書かねばならず、空白などを手前に入れてはいけません。{|で開始し、|}で終了するまでがひとつの表になります。開始記号と表の内容、終了記号はそれぞれ独立したラインに書く必要があります。これは<table></table>に相当します。表の内容を記述|}|+(パイプとプラス記号)に続けて書いた内容は、表のタイトルになります。<caption></caption>に相当します。表の内容を記述|}表は行をひとつの単位として記述します。|-(パイプとマイナス記号)だけを独立したラインに記述すると、そこから新しい行を開始します。表中最初の行に限って、|-を省略することができます。<tr>に相当します。行の内容を記述|}各行は表の最小構成要素であるセルを1個以上含みます。セルは|(パイプ1個)で開始し、続けて同じラインにセルの内容を記述します。<td>に相当します。2|}1行にセルを2個以上含める場合は、新しいラインに記述するか既存のセルと同じラインに続けて||(パイプ2個)で区切って次のセルの内容を記述します。以下の2つの行の表示結果は全く同じになります。3|}パイプの代わりに!(感嘆符)を使うことで、見出しセルを記述できます。使用するブラウザにもよりますが大抵はセル内でセンタリングされ、太字で表示されます。!で始まるラインに続けて書いたセルはすべて見出しセルとして扱われるので、通常のセルは新しいラインから書く必要があります。使用した方がいいでしょう。<th>に相当します。2-3|}最後の例は、以下のように表示されます。2-3この例は必要最低限の記述しかしていないので、見た目が寂しいかもしれません。次の節で解説するパラメータを指定することにより、罫線など見た目を調整することが可能になります。パラメータ[編集]表全体、タイトル、各行、各セルにはパラメータを記述することができます。続けてパラメータを記述します。タイトル・セル・見出しセル開始記号の後にパラメータを記述し、|(パイプ1個)で区切って内容を記述します。</table>として出力されます。属性にインラインCSSで記述することになります。詳しい解説は専門書や入門サイトなどに譲り、ここでは単純なものやよく使われるものに限って解説します。罫線[編集]テーブル全体に罫線を表示するのはとても簡単です。style="background:#f9f9f9"と指定するだけです。先の例に適用すると、以下のように表示されます。2-3別の方法として、border属性を使用することができます[1]。2-3表の一部にだけ罫線が必要な場合は、個々のセルの境界線をCSSで指定します。利用を参照してください。セルの結合[編集]セルの一部を結合して1つのセルのように扱うには、セルのパラメータにrowspan属性またはcolspan属性を指定します。FGHさらに複雑な例もあります。高さの調整[編集]表全体の幅を指定するには、表全体のパラメータにCSSのwidthプロパティを設定します。セル3列の幅を個別に指定するには、セルのパラメータにやはりwidthプロパティを設定します。1箇所で設定すれば、他の行の同じ列にも適用されます。属性がありますが、セルに対するwidth属性は非推奨です[2]。表全体に対するwidth属性は非推奨ではない[1]のですが、混乱を避けるためにCSSのwidthプロパティで置き換えた方が無難でしょう。表の高さを指定するにはCSSのheightプロパティを設定します。表全体および行に対する設定が可能ですが列の幅と違い折り返しの発生などで行や表全体の高さは動的に変化するので、あえて設定することはあまりありません。幅や高さを指定するのに様々な単位を使用できますが、特別な理由[3]がない限り%(表示領域に対するパーセンテージ)かem(1em=1文字分)で指定してください。px(ピクセル単位)で指定した場合、ブラウザの文字サイズを大きく設定してもセルの大きさは変化しないため、たいへん見づらくなるおそれがあります。emであれば基準となる文字サイズに連動してセルのサイズが変化します。折り返しの禁止[編集]日本語を含むいくつかの言語では文中のどこでも折り返しが可能であるため、場合によっては見出しセルの短い語が折り返されて表示され非常に見づらくなります。これを防ぐには、CSSのwhite-spaceプロパティを設定します。う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助セルのパラメータにnowrap属性を使用して同じ効果を得られますが、この属性は非推奨です[2]。セル内の文字の配置[編集]セル内の文字をセンタリングしたり右寄せにしたりするには、CSSのtext-alignプロパティを設定します。行のパラメータとして設定すると行の中のセル全てに、表全体のパラメータとして設定すると表に含まれるセル全てに適用されます。25このほかにセルのパラメータにalign属性を使用し、align="right"などとしても同じ効果が得られます[1]が、後述するように表に対するalign属性は非推奨なので、混乱を避けるためにCSSのtext-alignプロパティで置き換えた方が無難でしょう。セル内の文字の垂直方向の配置を指定するには、CSSのvertical-alignプロパティを設定します。こちらはtext-alignプロパティと異なり、行や表全体に指定してもセルには反映されません[4]。セルのパラメータとして使用してください。下辺で揃えたセルこのほかにセルのパラメータにvalign属性を使用し、valign="top"などとしても同じ効果が得られます[1]。表の配置[編集]表を中央に表示するには表全体のパラメータに以下を指定します。これは「上下に余白を空けず、左右の余白を自動計算する」という意味で、左右それぞれの端から等しい距離、つまり中央に配置されます。セル2C表を右または左に寄せるには、表全体のパラメータに以下を指定します。後に続くテキストは反対側に回り込み、余白部分に流し込まれる形になります。表の配置を指定するのにalign属性が使われることがありますが、表全体に対するalign属性は非推奨です[2]。上記の方法を使ってください。背景色、文字色[編集]背景色を指定するには、CSSのbackground-colorプロパティを設定します。文字色はcolorプロパティを設定します。背景色の変更はbgcolor属性でも可能ですが、この属性は非推奨です[2]。文字色を変更するためにセル内の文字を<font>タグで囲む方法がありますが、font要素も同様に非推奨です。Yourpedia:色の使用は控えめにも参照してください。利用[編集]class="wikitable"を使わずに罫線を表示するには、各セルに罫線を表示する設定を記述しなければなりません(正確には罫線と言うより、各セルの境界線です)。以下、表全体および各セルでborderで始まる記述をしているのが罫線の指定部分です。こお表の入れ子[編集]表の中に、さらに表を表示することができます。以下の例では、セル2の中に青色で表示される別の表が入っています。内側の表であっても、表を開始する記号({|)がラインの先頭に来る必要があることに注意してください。よるマークアップ[編集]条件文を使う場合は引数の区切りにパイプが使用されるため、表のWikiマークアップに使うパイプと干渉してお互いがうまく動作しなくなってしまいます。このような場合、{{!}}のようなテンプレートを利用して直接パイプを表記しないか、もしくはXHTMLで記述します。セル2C上の例は分かりやすさのために改行やインデントを入れていますが、これらは実際の表示には影響しません。極端ですが、以下のようにしても全く同じように表示されます。style="background:#f2f2f2">行見出し2</th><td>セル2A</td><td>セル2B</td><td>セル2C</td></tr></table>以下は、表の一部に条件文を使用した例です。場合によって表示内容を変更するテンプレートを作成する場合などに使います。Help:テンプレートとHelp:条件文も参照してください。Transitionalでは非推奨とはされていませんが、見た目を規定する属性なのであえて使用する理由はありません。外観の統一のためにも極力スタイルシートを利用すべきです。Transitionalで、いくつかの見た目を直接規定する要素や属性は互換性のために残されているだけで非推奨となっています。スタイルシートによる指定に置き換えるべきです。画像の幅に合わせてピクセル指定するのは典型的な例です。MediaWikiの制約上、画像サイズはピクセル単位以外で指定できないためやむを得ません。ExplorerやFirefoxでは継承されてしまいます。Operaは仕様通りに動作するようです。それ以降のライセンスで利用できます。プライバシー・ポリシーYourpediaについて。