ウィキペディア日本語版のヘルプページです。
表の作り方について解説します。複雑な表の記述法も取り上げます。ウィキペディアではHTMLを使わなくても、#パイプ構文という簡易的な表記法によって表が記述できます。つまり、<table>というタグから始めなくても、{|から始められます。表には様々な#パラメータが使え、他の記事との表の外観の統一性を保つためにclass="wikitable" という外観の指定が推奨されています。class="wikitable sortable"を使うと、#再整列可能な表のように表に機能を持たせることもできます。
表を使うのがふさわしい場面については、表のスタイルマニュアルを参照してください。
デスクトップ版とモバイルビューでは、表示が異なる場合があります。
ごく単純な例を以下に示します。以下のように記述します。
{|class="wikitable"|+ 表のタイトル! 見出し0!! 列見出しA!! 列見出しB!! 列見出しC|-! 行見出し1| セル1A|| セル1B|| セル1C|-! 行見出し2| セル2A|| セル2B|| セル2C|}これは、以下のような表が表示されます。罫線は #a2a9b1（■）、見出し背景は #eaecf0（■）、セル背景は #f8f9fa（■）で表示されます。
表のタイトル| 見出し0 | 列見出しA | 列見出しB | 列見出しC |
|---|
| 行見出し1 | セル1A | セル1B | セル1C |
|---|
| 行見出し2 | セル2A | セル2B | セル2C |
|---|
Template:Table2を用いて、以下のように書いても全く同じように表示されます。
{{Table2| cols= 4| caption= 表のタイトル| th1= 見出し0| th2= 列見出しA| th3= 列見出しB| th4= 列見出しC| 行見出し1| セル1A| セル1B| セル1C| 行見出し2| セル2A| セル2B| セル2C| cell1-1= background:#eaecf0; font-weight:bold;| cell2-1= background:#eaecf0; font-weight:bold;}}また、以下のように書いても全く同じように表示されます。
<tableclass="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>
前者の{| で始まり、パイプ (|) を多用するものをパイプ構文と呼びます。後者はHTML5 で記述されています。それぞれに利点と欠点がありますが、以降はより簡潔に書けるパイプ構文を中心に解説していきます。
テーブルエンド（|}）を除く各マークは、オプションで1つ以上の属性を受け付けます。属性はマークと同じ行記述します。
- ヘッダーセル（
! または!!）、データセル（| または||）とキャプション（|+）は内容を持つので、
（! scope="row" | 見出し）のように、属性と内容をシングルパイプ（|）で区切って記述します。
- 表（
{|）および行（|-）は内容を直接保持しないので、属性の後にパイプ（|）は必要ありません（例：|-）。
テーブルによく含まれる属性は以下の通りです。
class- 例）
class="wikitable sortable" id- 例）
id="table-1" style- CSSのスタイル設定
scope- ヘッダセルによる見出しの対象となるデータセルの範囲を示す
rowspan- セルを行方向に拡張する
colspan- セルを列方向に拡張する
改良型編集ツールバーの2018年版。編集ツールバーによって表の枠組みの簡易作成ができます。「 > 上級」を展開し、表アイコン
を押すことで、表の枠組みのフォーマットが挿入されます。
ただし、複雑な表を作るには以降のパイプ構文に通じている必要があるでしょう。
パイプ構文は、実際にはHTML要素の省略記法に過ぎません。HTMLの知識はそのままパイプ構文にも応用できます。
| 記号 | 意味 | 備考 | HTML（参考） |
|---|
| {| | 表の記述を開始する。 | | <table> |
|---|
| |+ | 表のタイトル。 | （省略可） | <caption> |
|---|
| |- | 新しい行を開始する。 | （1行目では省略可） | <tr> |
|---|
| | | 通常のセルの開始。|| で区切って、同じラインに次の列のセルを記述することができる。 | | <td> |
|---|
| ! | 見出しセルの開始。!! または || で区切って、
同じラインに次の列の見出しセルを記述することができる。 | （省略可） | <th> |
|---|
| |} | 表の記述を終了する。 | | </table> |
|---|
以下、「行」という語は表の横一列を、「列」という語は縦一列を意味します。構文上の改行記号で区切られる「行」については「ライン」と表記します。混同に気をつけてください。
- 重要なルール
- 各種の記号は必ずラインの先頭に書かねばならず、空白などを手前に入れてはいけません。
{| で開始し、|} で終了するまでがひとつの表になります。開始記号と表の内容、終了記号はそれぞれ独立したラインに書く必要があります。これは<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要素の属性に対応し、例えば表全体に対する指定{| ... |} は<tablestyle="color:red;"> ...</table> として出力されます。
一部を除いて、ほとんどのパラメータはセルの結合（後述）とstyle 属性にインラインCSS で記述することになります。より詳しい解説は専門書や入門サイトなどに譲り、ここでは単純なものやよく使われるものに限って解説します。
テーブル全体に罫線を表示するのはとても簡単です。表全体のパラメータに、
{|class="wikitable"
と指定するだけです。先の例に適用すると、以下のように表示されます。
表タイトル| 列見出し 1 | 列見出し 2 | 列見出し 3 |
|---|
| 行見出し 1 | セル 1-2 | セル 1-3 |
|---|
| 行見出し 2 | セル 2-2 | セル 2-3 |
|---|
別の方法としてborder 属性を使用することができます。これはスタイルシートを理解しないブラウザで罫線を表示するための方法です。ただし、日本語版ウィキペディアでは、スタイルシートを理解しないブラウザに対応するためのガイドラインはありません。原則としては上記指定を用いて外観を統一してください[注 1][注 2]。
| ウィキマークアップ | 実際の表示 |
|---|
{|border="1"
| 表タイトル| 列見出し 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 |
|---|
|
表の一部にだけ罫線が必要な場合は、上記のように罫線を非表示にし、個々のセルの境界線をCSS で指定します。本ページ「#その他の CSS の利用」の節を参照してください。
セルの一部を結合して1つのセルのように扱うには、セルのパラメータにrowspan 属性またはcolspan 属性を指定します。
| ウィキマークアップ | 実際の表示 |
|---|
{|class="wikitable"style="text-align:center;"|-!||列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|} | | 列1 | 列2 | 列3 |
|---|
| 行 1 | A | B | | 行 2 | C | D | | 行 3 | E | F | | 行 4 | G | | 行 5 | H |
|
rowspan 属性を指定するとセルを縦に結合します。 colspan 属性を指定するとセルを横に結合します。
rowspan 属性、 colspan 属性ともに属性値を指定する事により指定された個数のセルを結合します。
表全体の幅を指定するには、表全体のパラメータに CSS のwidth プロパティを設定します。100%を超える数値を指定するとコンテンツ幅よりも大きな表が作成できます。
- ウィキマークアップ
{||+ 幅 100% の表| セル1 || セル2 || セル3|}{||+ 幅 80% の表| セル1 || セル2 || セル3|}{||+ 幅 50% の表| セル1 || セル2 || セル3|}{||+ 幅 150% の表| セル1 || セル2 || セル3|}- 実際の表示
列の幅を個別に指定するには、セルのパラメータにやはり width プロパティを設定します。1箇所で設定すれば、他の行の同じ列にも適用されます。
- ウィキマークアップ
{||+ 表全体の幅は 80%| | 幅 50% のセル <!-- 表全体の幅に対する割合 -->| | 幅 10em のセル| 幅を指定しないセル|}- 実際の表示
表全体の幅は 80%| 幅 50% のセル | 幅 10em のセル | 幅を指定しないセル |
幅を指定するもうひとつの方法にwidth 属性がありましたが、セルに対する width 属性は廃止されました[注 3]。インライン CSS の width プロパティで置き換える必要があります。
表の左右の余白の幅を指定することで間接的に表の幅を指定する方法もあります。その場合は、div 要素を用います。表の幅とは関係なく単に余白を設けたい場合や、左右に空けたスペースに記事などを入れたい場合は#表の配置を参照してください。
- ウィキマークアップ
←元のテキストエリアの左端<div> <!-- または <div> -->{||+ 左に 4em 、右に 2em の余白を設け、残り全部が表全体の幅| | 幅 50% のセル <!-- 表全体の幅に対する割合 -->| | 幅 10em のセル| 幅を指定しないセル|}</div><div>元のテキストエリアの右端→</div>- 実際の表示
←元のテキストエリアの左端
左に 4em 、右に 2em の余白を設け、残り全部が表全体の幅| 幅 50% のセル | 幅 10em のセル | 幅を指定しないセル |
元のテキストエリアの右端→
表の高さを指定するには CSS のheight プロパティ（line-height プロパティ）を設定します。表全体および行に対する設定が可能ですが列の幅と違い折り返しの発生などで行や表全体の高さは動的に変化するので、あえて設定することはあまりありません。
幅や高さを指定するのに様々な単位を使用できますが、特別な理由[注 4]がない限り% （表示領域に対するパーセンテージ）かem （1em = 日本語表示環境で漢字1文字分）で指定してください。例えばセルの幅を px （ピクセル単位）で指定した場合、ブラウザの文字サイズを大きく設定してもセルの大きさは変化しないためたいへん見づらくなるおそれがあります。 em であれば基準となる文字サイズに連動してセルのサイズが変化します。
日本語を含むいくつかの言語では文中のどこでも折り返しが可能であるため、場合によっては、見出しセルや本文セルの語が折り返されて表示され非常に見づらくなります。これを防ぐには、 CSS のwhite-space プロパティを設定します。
セルのパラメータにnowrap 属性を使用して同じ効果を得られましたが、この属性は廃止されました[注 3]。
参考：寿限無
- ウィキマークアップ
{||+ 見出しが折り返されてしまうかもしれない表! 折り返されそうな見出し| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助|}{||+ 見出しの折り返しを禁止した表! | 折り返されそうな見出し| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助|}- 実際の表示
見出しが折り返されてしまうかもしれない表| 折り返されそうな見出し | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
見出しの折り返しを禁止した表| 折り返されそうな見出し | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
- class="nowraplinks wikitable" と
{||+|[[フロクシノーシナイヒリピリフィケイション]] [[スーパーカリフラジリスティックエクスピアリドーシャス]]|}{||+|[[フロクシノーシナイヒリピリフィケイション]] [[スーパーカリフラジリスティックエクスピアリドーシャス]]|}セル内の文字をセンタリングしたり右寄せにしたりするには、 CSS のtext-align プロパティを設定します。行のパラメータとして設定すると行の中のセル全てに、表全体のパラメータとして設定すると表に含まれるセル全てに適用されます。
- ウィキマークアップ
{||+ 文字寄せのサンプル| | 左寄せのセル| | 中央寄せのセル| | 右寄せのセル|}{||+ 全部右寄せの表! × !! 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" としていましたが、HTML5 で廃止されました[注 1]。
数値の桁を揃えたいときなどには、テンプレートの{{0}}も使用できます。
セル内の文字の垂直方向の配置を指定するには、 CSS のvertical-align プロパティを設定します。こちらは text-align プロパティと異なり、行や表全体に指定してもセルには反映されません[注 5]。セルのパラメータとして使用してください。
- ウィキマークアップ
{||+ 垂直方向の指定のサンプル| | 上辺で揃えたセル| | 中央で揃えたセル| | 下辺で揃えたセル|}- 実際の表示
垂直方向の指定のサンプル| 上辺で揃えたセル | 中央で揃えたセル | 下辺で揃えたセル |
かつてこの用途にvalign 属性を使用しvalign="top" としていましたが、HTML5 で廃止されました[注 1]。
表を中央に表示するには、表全体のパラメータに以下を指定します。これは「上下に余白を空けず、左右の余白を自動計算する」という意味で、左右それぞれの端から等しい距離つまり中央に配置されます。
{|style="margin:0 auto;"
中央に表示した表| 見出し0 | 列見出しA | 列見出しB | 列見出しC |
|---|
| 行見出し1 | セル1A | セル1B | セル1C |
|---|
| 行見出し2 | セル2A | セル2B | セル2C |
|---|
表を右または左に寄せるには、表全体のパラメータに以下を指定します。後に続くテキストは反対側に回り込み、余白部分に流し込まれる形になります。
{|class="floatright" <!-- 右寄せ -->
または
{|class="floatleft" <!-- 左寄せ -->
- ウィキマークアップ
'''この段落は表の手前に書かれています'''：寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助{||+ 右寄せした表! 見出し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="top" としていましたが、HTML5 で廃止されました[注 1]。
この項目では
色を扱っています。閲覧環境によっては、色が適切に表示されていない場合があります。
背景色を指定するには、CSS のbackground-color プロパティを設定します。文字色はcolor プロパティを設定します。
※背景色と、文字（リンクや脚注を含む）の色の差が少ないと、文章が読みにくくなることがあります。
- ウィキマークアップ
{| <!-- 表全体の背景色をピンクに -->|+ 表の色を設定する! 見出しセル <!-- wikitable で見出しセルへの指定が上書きされるので、ピンクにならない -->! 見出しセル! | 背景色を変更した見出し <!-- セルに直接指定すれば変更可能 -->|-| | 文字色を変更したセル| | 背景色を変更したセル| セル|-| セル| | 背景色と文字色を変更したセル| セル|-| 行全体の || 背景色を || 変更|}- 実際の表示
表の色を設定する| 見出しセル | 見出しセル | 背景色を変更した見出し |
|---|
| 文字色を変更したセル | 背景色を変更したセル | セル |
| セル | 背景色と文字色を変更したセル | セル |
| 行全体の | 背景色を | 変更 |
かつてこの用途にbgcolor 属性を使用していましたが、HTML5 で廃止されました。[注 1]また文字色を変更するためにセル内の文字を<font> タグで囲む方法がありましたが、font 要素も同様に廃止されました[注 3]。
Wikipedia:アクセシビリティ#色も参照してください。
文字の大きさを指定するにはstyle="font-size:smaller;"などを表全体やセルに適用します。
- ウィキマークアップ（一部省略）
{|! |font-size !! 文字の大きさ|-! smaller|| 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助|-! 50%|| 寿限無寿限無（略）|-! 8px|| 寿限無寿限無（略）|}- 実際の表示
| font-size | 文字の大きさ |
|---|
| x-large | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| larger | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| large | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 指定なし | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| smaller | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| small | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| x-small | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 150% | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 100% | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 50% | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 20% | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 16px | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
| 8px | 寿限無寿限無五劫の擦り切れ海砂利水魚の水行末雲来末風来末食う寝る処に住む処やぶら小路の藪柑子パイポパイポパイポのシューリンガンシューリンガンのグーリンダイグーリンダイのポンポコピーのポンポコナーの長久命の長助 |
|---|
class="sortable"を使用することによって、Javascriptで表の各列を昇順（小さいほうから）または降順（その反対）にソート（整列）できるようになります。列見出しをクリックすると、指定なし
から、→昇順▲→降順▼→指定なしと切り替わります。
- ウィキマークアップ
{||+ 昇順・降順に並べ替えできるwikitable! 見出し0 !! 列見出しA !! 列見出しB !! 列見出しC !! 列見出しD !! 列見出しC/D !! | 列見出しE|-! 行見出し1| a || ウ {{表計算%|10|60}} || あえて|-! 行見出し2| b || ア {{表計算%|20|40}} || 整列ボタン|-! 行見出し3| c || イ {{表計算%|30|80}} || 付けない列|-! 合計| － || － {{表計算%|60|180}} || 最下部に固定|}
- 実際の表示
昇順・降順に並べ替えできるwikitable| 見出し0 | 列見出しA | 列見出しB | 列見出しC | 列見出しD | 列見出しC/D | 列見出しE |
|---|
| 行見出し1 | a | ウ | 10 | 60 | 16.67% | あえて |
|---|
| 行見出し2 | b | ア | 20 | 40 | 50% | 整列ボタン |
|---|
| 行見出し3 | c | イ | 30 | 80 | 37.5% | 付けない列 |
|---|
| 合計 | － | － | 60 | 180 | 33.33% | 最下部に固定 |
|---|
並べ替えをしたくない列には |をつけます。また、並べ替え時に、特定の行を最下部に固定したい場合は|-をつけます。
見た目の文字列（例：優勝）と見えない非表示の文字列（例：1位）を設定する（ソート順や整列する内容を変える）場合は、<span>1位</span>優勝と入力する。また、見えない文字列だけでなく、音声読み上げを行わない文字列を入力したい場合についての詳細は「Template:Display none」なども参照してください。
- 二行を一緒にソートしたい場合
二行のソートキー（セル内の文字列）を文字列のマークアップ部分まで含めて一致させた上で、<span>表示させない文字列</span>のマークアップを使い表示させる範囲だけを変えるという方法によって、ソート時に二行分が一緒に移動する表を作ることもできます。
- 二行を一緒にソートする表（ウィキマークアップ）
{||-! | !! | 名前 !! | 出身地 !! | 生年月日 !! 記録|-! | <span>1位</span>優勝| A | 神奈川 | 1950/5/5 | 2:26:18<div>Aについての備考、Aについての備考、Aについての備考</div>|-! | <span>1位優勝</span>| | <span>A</span> | | <span>神奈川</span> | | <span>1950/5/5</span> | | <span>2:26:18</span><div>Aについての備考、Aについての備考、Aについての備考</div>|-（2位から5位は中略）|}
- 二行を一緒にソートする表（実際の表示）
| | 名前 | 出身地 | 生年月日 | 記録 |
|---|
| 1位優勝 | A | 神奈川 | 1950/5/5 | 2:26:18 Aについての備考、Aについての備考、Aについての備考 |
|---|
| 1位優勝 | A | 神奈川 | 1950/5/5 | 2:26:18 Aについての備考、Aについての備考、Aについての備考 |
|---|
| 2位 | B | 東京 | 1980/11/23 | 2:32:46 Bについての備考、Bについての備考、Bについての備考 |
|---|
| 2位 | B | 東京 | 1980/11/23 | 2:32:46 Bについての備考、Bについての備考、Bについての備考 |
|---|
| 3位 | C | 大阪 | 1968/5/3 | 2:45:22 Cについての備考、Cについての備考、Cについての備考 |
|---|
| 3位 | C | 大阪 | 1968/5/3 | 2:45:22 Cについての備考、Cについての備考、Cについての備考 |
|---|
| 4位 | D | 東京 | 2000/11/3 | 2:58:10 Dについての備考、Dについての備考、Dについての備考 |
|---|
| 4位 | D | 東京 | 2000/11/3 | 2:58:10 Dについての備考、Dについての備考、Dについての備考 |
|---|
| 5位 | E | 神奈川 | 1995/2/11 | 3:05:31 Eについての備考、Eについての備考、Eについての備考 |
|---|
| 5位 | E | 神奈川 | 1995/2/11 | 3:05:31 Eについての備考、Eについての備考、Eについての備考 |
|---|
Javascriptを使用して、表を非表示にし(mw-collapsed)、「表示」をクリックなどすると表示されます(mw-collapsible)。モバイルビューでは折りたたまれません。
ウィキマークアップ
{||+可読性を損なうかもしれない長い表|-! 表示を !! 押すと !! 開きます|-| 長いよ || 長いよ || 長いよ|-| ・<br>・<br>・ || ・<br>・<br>・ || ・<br>・<br>・|-| 長いよ || 長いよ || 長いよ|}実際の表示
可読性を損なうかもしれない長い表| 表示を | 押すと | 開きます |
|---|
| 長いよ | 長いよ | 長いよ |
・
・
・ | ・
・
・ | ・
・
・ |
| 長いよ | 長いよ | 長いよ |
class="wikitable" を使わずに罫線を表示するには、各セルに罫線を表示する設定を記述しなければなりません（正確には罫線と言うより、各セルの境界線（border、ボーダーライン）です）。
以下、表全体および各セルでborder で始まる記述をしているのが罫線の指定部分です。
右から左へ進むかな文字の五十音表の例
- ウィキマークアップ
{||+ | 五十音表|-! | ん! | わ! | ら! | や! | ま! | は! | な! | た! | さ! | か! | あ|-| || | ゐ || り || || み || ひ || に || ち || し || き! | い|-| || || る || ゆ || む || ふ || ぬ || つ || す || く! | う|-| || | ゑ || れ || || め || へ || ね || て || せ || け! | え|-| || を || ろ || よ || も || ほ || の || と || そ || こ! | お|}- 実際の表示
五十音表| ん | わ | ら | や | ま | は | な | た | さ | か | あ |
|---|
| ゐ | り | | み | ひ | に | ち | し | き | い |
|---|
| | る | ゆ | む | ふ | ぬ | つ | す | く | う |
|---|
| ゑ | れ | | め | へ | ね | て | せ | け | え |
|---|
| を | ろ | よ | も | ほ | の | と | そ | こ | お |
|---|
class="wikitable" を使いつつ、一部の罫線を非表示にする例です。
- ウィキマークアップ
{|!colspan="3"|期間|-|style="border-right:none;"|1962年4月2日<br/>A|style="border-width:1px 0;" |-|style="border-left:none;"| 1966年4月2日<br/>B|}- 実際の表示
表の中に、さらに表を表示することができます。以下の例では、セル2の中に青色で表示される別の表が入っています。内側の表であっても、表を開始する記号 ({|) がラインの先頭に来る必要があることに注意してください。
| ウィキマークアップ | 実際の表示 |
|---|
{|class="wikitable"|セル1|セル2{|class="wikitable"style="background:#aad;margin:.5em;"|入れ子になった|-|表|}|style="vertical-align:bottom;"|もとの表のセル3|} | |
条件文を使う場合は引数の区切りにパイプが使用されるため、表のウィキマークアップに使うパイプと干渉してお互いがうまく動作しなくなってしまいます。このような場合、マジックワード{{!}} を利用して直接パイプを表記しないか、もしくはHTML で記述します。
以下は、表の一部に条件文を使用した例です。場合によって表示する内容を変更するテンプレートを作成する場合などに使います。Help:テンプレートとHelp:条件文も参照してください。
| ウィキマークアップ | HTML |
|---|
{|class="wikitable"{{#if:{{{1|}}}|{{!}}引数が指定されていれば表示する行|{{!}}引数が指定されていないときに表示する行}}|-|引数に関係なく表示する行|} | <tableclass="wikitable">{{#if:{{{1|}}}|<tr><td>引数が指定されていれば表示する行</td></tr>|<tr><td>引数が指定されていないときに表示する行</td></tr>}}<tr><td>引数に関係なく表示する行</td></tr></table> |
- 実際の表示
| 引数が指定されていないときに表示する行 |
| 引数に関係なく表示する行 |
- ^abcdeHTML 4.01以降、外観の装飾に関する要素と属性は非推奨とされていましたが、 HTML5 では廃止されました。少数の例外として、TABLE 要素の border 属性の様に意味が変わり存続したものもあります。
- ^TABLE 要素の border 属性は「境界線の太さ」を意味していましたが、 HTML5 では「境界線の表示・非表示」を意味し "1"（境界線を表示する）・””（境界線を表示しない：既定値）の2つの値だけが有効です。このため、表の境界線の外観の統一はスタイルシートの border 系プロパティを利用して行います。
- ^abcMediaWikiが最終的に出力する文書形式は2018年4月17日現在HTML5です。HTTML5からは、ほとんどの外観を直接規定する要素や属性は廃止となり、スタイルシートによる指定に置き換える必要があります。
- ^画像の幅に合わせてピクセル指定するのは典型的な例です。MediaWikiの制約上、画像サイズはピクセル単位以外で指定できないためやむを得ません。
- ^（以下、2007年時点の情報です）vertical-align プロパティの設定は子要素に継承されないのが正しい動作ですが、 Internet Explorer や Firefox では継承されてしまいます。 Opera は仕様通りに動作するようです。
|
|---|
|
| 読者向け | |
|---|
| 編集者向け | | 編集する | |
|---|
| 参照する | |
|---|
| 体裁を整える | |
|---|
| 構成を整える | |
|---|
| ミスの修正 | |
|---|
| 手の抜き方 | |
|---|
| コミュニケーション | |
|---|
| その他 | |
|---|
|
|---|
| 管理者向け | |
|---|
| Category:ヘルプ |
