Help:Table/ja

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search

このページでは、MediaWiki中で、表を作成するためのWiki文法について説明しています。(参照: ja:Wikipedia:表の作り方

ツールバーを使う[edit]

Toolbar2.JPG

編集ツールバーに表編集用のアイコンがあるMediaWikiでは、表用のアイコンで表に必要な基本的コーディングを挿入できます(図ではツールバーの右の最初のボタン)。

デフォルトでは、以下のテキストが含まれます。

{| class="wikitable"
|-
! header 1
! header 2
! header 3
|-
| row 1, cell 1
| row 1, cell 2
| row 1, cell 3
|-
| row 2, cell 1
| row 2, cell 2
| row 2, cell 3
|}

上のコードは以下のように表示されます。

header 1 header 2 header 3
row 1, cell 1 row 1, cell 2 row 1, cell 3
row 2, cell 1 row 2, cell 2 row 2, cell 3


パイプ形式文法の概要[edit]

テーブルのキャプション
列ヘッダ 1 列ヘッダ 2 列ヘッダ 3
行ヘッダ 1 セル 2 セル 3
行ヘッダ A セル B セル C

HTMLの表文法も使えますが、表を生成する簡単な方法としてWiki文法(wikicode)が使えます。パイプコード(「|」、vertical bar)は、HTML tableマークアップと全く同じように使えるので、HTMLの知識はパイプコードの理解に役立つでしょう。ショートカットは以下のようになります:

  • 全てのテーブルは中カッコと縦棒文字(パイプ)によって構成される。そのため、{|を、テーブルの開始に、|}をテーブルの終了に使う。各々はその固有の行にいる必要がある:
{|
  テーブルコードがここに来る
|}
  • オプションのテーブルのキャプションは、行の開始時に垂直バーとプラス記号"|+"を伴って含まれ、その後にキャプションが続く:
{|
|+ キャプション
  テーブルコードがここに来る
|}
  • 新しいテーブルのを開始するためには、その固有の行に縦棒とハイホンを"|-"のように記述する。その行の中のセルのためのコードは次の行から開始する。
{|
|+ テーブルのキャプション
|-
  セルコードがここに来る
|-
  セルコードがここに来る
|}
  • バーで始まる、次の行中に、各々のテーブルcellのためのコードを入力:
{|
|+ テーブルのキャプション
|-
| セルコードがここに来る
|-
| 次の行中のセルがここに来る
| 同じ行のさらなるセルがここに来る
|}
  • セルは改行か、新しいバーのどちらかか、同じ行中の、二重バー"||"で分離することができる。両者の結果は同じである:
{|
|+ テーブルのキャプション
|-
|セル 1 || セル 2 || セル 3
|-
|セル A 
|セル B
|セル C
|}
  • もしもバーを使っているならば、最初のセルと考えているものは、実際、セルに対して適用される形式変更子であり、残りの"セル"は1つに併合される:
{| border="1"
|-
|形式変更子 (非表示)|These all |(including the pipes)|go into |the first cell
|-
|}

これは、おそらく以下のような期待しているものとは違う::

These all |(including the pipes)|go into |the first cell

しかしながら、形式変更子は便利である:

{| border="1"
|-
|セル 1 (no modifier - not aligned)
|-
|align="right" |セル 2 (右寄せ)
|-
|}
セル 1 (変更子なし - not aligned)
セル 2 (右寄せ)

1つの行上に2つ以上の単体のパイプが置けないことを憶えておくこと!

  • column headingsの行は"|"の代りに"!"を、"||"の代りに"!!"を使うことによって識別される。ヘッダセルは、ブラウザによって依存するが、通常通常のセルとは異なって描画される。それらはしばしばボールド体とセンタリングで表示される。
{|
|+ テーブルのキャプション
! 列ヘッダ 1 !! 列ヘッダ 2 !! 列ヘッダ 3
|-
|セル 1 || セル 2 || セル 3
|-
|セル A
|セル B
|セル C
|}
  • 行の最初のセルは"|"の代りに"!"を使って行を開始することによって、 row headingとして識別され、改行の後に引き続いてデータセルが開始される。
{|
|+ テーブルのキャプション
! 列ヘッダ 1 !! 列ヘッダ 2 !! 列ヘッダ 3
|-
! 行ヘッダ 1 
| セル 2 || セル 3
|-
! 行ヘッダ A 
|セル B
|セル C
|}
  • 追加のパラメータはセル、行、テーブル全部の振る舞いを変更できる。
  • Optional parameters can modify the behavior of cells, rows, or the entire table. たとえば、テーブルに対して境界を追加できる:
{| border="1"
|+ テーブルのキャプション
! 列ヘッダ 1 !! 列ヘッダ 2 !! 列ヘッダ 3
|-
! 行ヘッダ 1
| セル 2 || セル 3
|-
! 行ヘッダ A
|セル B
|セル C
|}

最後のテーブルは以下のように表示される:

テーブルのキャプション
列ヘッダ 1 列ヘッダ 2 列ヘッダ 3
行ヘッダ 1 セル 2 セル 3
行ヘッダ A セル B セル C

テーブルパラメータとセルパラメータはHTML中では同じであり、[1]Table (HTML)を参照。しかしながら、 theadtbodytfootcolgroup、とcol要素は現在MediaWikiではサポートされていない

もしも、セルの内容が1つも無いとしても、テーブルは便利に使える。たとえば、セルの背景色はセルパラメータで変更でき、テーブルをm:Template talk:Square 8x8 pentomino exampleのようなダイアグラムにすることができる。テーブルのフォーム中の"画像"はアップロードされたイメージよりもより編集するのに便利である。

各々の行は他の行として同じ数のセルを持たなければならず、そのため、テーブル中の列数は一貫したままである。空白のセルのために、セルが表示されることを確実にする内容として、非ブレークスペース&nbsp;を使う。セル中で見えるパイプを表示するためには、<nowiki>|</nowiki>&#124;を使う。

colspanとrowspanを使うセルはいくつかの列や行に渡ることができ、以下のMéレンジの例を参照。しかしながら、これはsortingがもう正しく動作しないという欠点を持つ。

[edit]

単純な例[edit]

以下の2つは同じ結果となる。おのおののセル中の全部のテキストと各々の行中のセルの数をベースとしたスタイルを選ぶ。

Wiki マークアップ

{| 
| A 
| B
|- 
| C
| D
|}
{| 
| A || B
|- 
| C || D 
|}

ブラウザで見えるもの

A B
C D

乗算表[edit]

Wiki マークアップ

{| class="wikitable" style="text-align:center"
|+乗算表
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

ブラウザで見えるもの (Help:User_styleを参照)

乗算表
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

色の使用;パラメータのスコープ[edit]

1つのセルのためにテキストと背景色の色を指定する2つの方法は以下の通りである。最初の形式:

Wiki マークアップ

{| 
| style="background:red; color:white" | abc
| def
| bgcolor="red" | <font color="white"> ghi </font>
| jkl
|}

ブラウザで見えるもの

abc def ghi jkl

他のパラメータのように、色は行全体又はテーブル全体に指定することもできる。テーブルのための値を行のためのパラメータは上書きし、行のためのものは、セルのためのものが上書きする:

Wiki マークアップ

{| style="background:yellow; color:green"
|- 
| abc || def || ghi
|- style="background:red; color:white"
| jkl || mno || pqr
|-
| stu || style="background:silver" | vwx || yz
|}

ブラウザで見えるもの

abc def ghi
jkl mno pqr
stu vwx yz

テーブルを背景に埋め込ませるためには style="background:none"を使う。 (注意: style="background:inherit"はIE6を含むいくつかのブラウザでは動作しない!)

幅と高さ[edit]

行の高さのように、テーブル全体の幅と高さは指定できる。列の幅を指定するために、それの任意のセルの幅を指定できる。もしも全ての列のための幅が指定されていないか、全ての行のための高さが指定されていないならば、そこには若干の曖昧さがあり、結果はブラウザ依存である。

Wiki マークアップ

{| style="width:75%; height:200px" border="1"
|- 
| abc || def || ghi
|- style="height:100px" 
| jkl || style="width:200px" |mno || pqr
|-
| stu || vwx || yz
|}

ブラウザで見えるもの

abc def ghi
jkl mno pqr
stu vwx yz

style="inline CSS"はいくつかのブラウザでは影響がないことに注意。もしも互換性が重要ならば、より多くのブラウザ上で、width="75%"のようなより古い同等の指定は動く。

列の幅の指定[edit]

もしも列幅を強制的に指定したいならば、と言うよりは、列のセル中で最も幅が広いテキスト要素の幅を受け付けるならば、以下が例である。テキストのラップアラウンドが強制されることに注意。

{| border="1" cellpadding="2"
!width="50"|名前
!width="225"|効果
!width="225"|Games Found In
|-
|Poké Ball || Regular Poké Ball || 全てのバージョン
|-
|Great Ball || Better than a Poké Ball || 全てのバージョン
|}
名前 効果 Games Found In
Poké Ball Regular Poké Ball 全てのバージョン
Great Ball Better than a Poké Ball 全てのバージョン

ヘッダなしにテーブル中で列の幅をセットするために、以下のように、各々の列のための最初のセル中で幅を指定する:

{| border="1" cellpadding="2"
|-
|width="100pt"|この列は100ポイントの幅
|width="200pt"|この列は200ポイントの幅
|width="300pt"|この列は300ポイントの幅
|-
|blah || blah || blah
|}
この列は100ポイントの幅 この列は200ポイントの幅 この列は300ポイントの幅
blah blah blah

縦方向の配置[edit]

既定値ではテーブル中のデータは垂直方向では中央揃えされ、その結果は以下のような変わったレイアウトである:

Row heading A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。
Row heading A longer piece of text.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。

これを修正するために、行に対して valign="top" 属性を適用する(残念なことに、全ての単一の行に対して明示的に適用することは必要に見える)。以下は例である:

{| border="1" cellpadding="2"
|-valign="top"
|width="10%"|'''Row heading'''
|width="70%"|A longer piece of text. Lorem ipsum...
|width="20%"|より短いテキストの断片。
|-valign="top"
|'''Row heading'''
|A longer piece of text. Lorem ipsum... 
|より短いテキストの断片。
|}
Row heading A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。
Row heading A longer piece of text.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. より短いテキストの断片。

ポジショニング[edit]

行中の全てのコンテンツとセル中のコンテンツと、テーブルそれ自身の位置決めをすることができるが、テーブル注で全てのコンテンツのために単一のパラメータは無い。m:Template talk:Table demoを参照。どんな状況でも、テーブルを配置するために"float"を使ってはいけない。これは、大きなフォントサイズの時に、ページの描画を壊す。

Mélange[edit]

ここにはより高度な例があり、テーブルをマークアップするために有効な追加のオプションを示す。しかしながら、それらをcolspanとrowspanと共に使うと、sortingはもう正しく動作しないことに注意。

それらの効果がどのようなものかを見るために固有のテーブル中でそれらの設定を動かしてみることができる。それらの一部のテクニックは、全てのケースにおいて適切かもしれない。たとえば、色の付いた背景を追加できるが、それは全ての場合によい手法であるとは意味しない。テーブル中でマークアップを相対的に単純に保つようにすることを憶えておくこと。その記事を他の人々が編集できるようもする!!この例は何ができるかという例を例示する。

Wiki マークアップ

{| border="1" cellpadding="5" cellspacing="0" align="center"
|+'''テーブルの例'''
|-
! style="background:#efefef;" | 最初のヘッダ
! colspan="2" style="background:#ffdead;" | 2番目のヘッダ
|-
| 左上
| &nbsp;
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
右端
|-
| style="border-bottom:3px solid grey;" | 左下
| style="border-bottom:3px solid grey;" | 下の真ん中
|-
| colspan="3" align="center" |
{| border="0"
|+''テーブル中のテーブル''
|-
| align="center" width="150px" | [[Image:Wiki.png]]
| align="center" width="150px" | [[Image:Wiki.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px
          solid red; border-bottom:2px solid red; border-left:1px solid red;" |
2つのWikimediaロゴ
|}
|}

ブラウザで見えるもの

テーブルの例
最初のヘッダ 2番目のヘッダ
左上  

右端

左下 左の真ん中
テーブル中のテーブル
Wiki.png Wiki.png

2つのWikimediaロゴ

浮動テーブル[edit]

Wiki マークアップ

このパラグラフはテーブルの前にある。 Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation...

{| align="right" border="1"
| 列1、行1 
|rowspan="2"| 列2、行1(と2) 
| 列3、行1 
|- 
| 列1、行2 
| 列3、行2 
|}

浮動テーブルが右にあることに注意。   

このパラグラフはテーブルの後にある。  Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation...

ブラウザで見えるもの

このパラグラフはテーブルの前にある。This paragraph is before the table. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

列1、行1 列2、行1(と2) 列3、行1
列1、行2 列3、行2

浮動テーブルが右にあることに注意。


このパラグラフはテーブルの後にある。 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation...

入れ子になったテーブル[edit]

ここでは、別のテーブルのセル2の内側に入れ子になった(青の)1つのテーブルを表示する。 入れ子になったテーブルは新しい行上で開始されなければならない。

Wiki マークアップ

{| border="1"
| &alpha;
| align="center" | セル2
{| border="2" style="background-color:#ABCDEF;"
| 入れ子の
|-
| テーブル
|}
| valign="bottom" | 元のテーブル
|}

ブラウザで見えるもの

α セル2
入れ子の
テーブル
元のテーブル

COLSPANとROWSPANの使用の組み合わせ[edit]

Wiki マークアップ

{| border="1" cellpadding="5" cellspacing="0"
|-
! 列1 || 列2 || 列3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C <!-- column 1 occupied by cell A -->
| D 
|-
| E
| rowspan="2" colspan="2" align="center"| F
|- 
| G <!-- column 2+3 occupied by cell F -->
|- 
| colspan="3" align="center"| H
|}

ブラウザで見えるもの

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


GFの下に他の行を得るために、セルGに対して rowspan="2"をセルFに対してrowspan="3" と一緒に使うことは動作しない。 なぜならば、全ての(暗黙の)セルは空であるべきだからである。同様に、それら全てのセルが空であれば、完全な列は表示されない。非空と空のセルの間の境界線も同様に表示されない(ブラウザに依存する)ので、ダミーの内容を含んでいる空のセルに埋めるために、&nbsp;を使う。

テーブルのセンタリング[edit]

テーブルのセンタリングは行なえるが、それは"浮動"にはならない;すなわち、テキストはどちらのサイドにも現れない。トリックは{| style="margin: 1em auto 1em auto" である。

Wiki マークアップ

{| class="wikitable" style="margin: 1em auto 1em auto"
|+ '''セルは左寄せで、テーブルはセンタリング'''
! Duis || aute || irure
|-
| dolor  || in reprehenderit || in voluptate velit
|-
| esse cillum dolore || eu fugiat nulla || pariatur.
|}

ブラウザで見えるもの

セルは左寄せで、テーブルはセンタリング
Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.

パラメータの設定[edit]

セルの始めにおいて、1つのパイプが後に続いたパラメータを追加する。例としては、 width="300"| はそのセルを300ピクセルに設定する。1つ以上のパラメータを設定するために、各々の間をスペースで離す。

Wikiマークアップ

{| style="color:white"
|-
| bgcolor="red"|cell1 || width="300" bgcolor="blue"|cell2 || bgcolor="green"|cell3
|}

ブラウザで見えるもの

cell1 cell2 cell3

小数点の位置揃え[edit]

小数点の位置で数字をそろえるためには以下の手順で行なう:

Wikiマークアップ

{| cellpadding="0" cellspacing="0"
|align="right"| 432 || .1
|-
|align="right"| 43 || .21
|-
|align="right"| 4 || .321
|}

ブラウザで見えるもの

432 .1
43 .21
4 .321

もしも、数字の列がセルのパディングか、セルのスペーシングを伴ってテーブル中にあるならば、中央に見苦しい隙間無しで、小数点を引き続き整列することができる。テーブルを各々の数のセル中に埋め込み、その列幅を指定する。埋め込んだテーブルの列幅は列中の各々のセルと同じにする(もしも、この方法を使っても、小数点が引き続きうまく整列されないならば、メインのテーブルの列は狭すぎるだろう。列の幅を増加させるためにパラメータを追加する)。

Wikiマークアップ

{|border="1" cellpadding="4" cellspacing="2"
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 432 ||width="50%"| .1
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 43 ||width="50%"| .21
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 4 ||width="50%"| .321
|}
|}

ブラウザで見えるもの

432 .1
43 .21
4 .321

簡単な場合、テーブル機能を省くことができ、単純に、スペースで行を開始し、数字の位置をスペースで調整する:

432.1
 43.21
  4.321

スタイルクラス[edit]

Help:User styleも参照。

テーブルコードの最初の行の中で、"{|"のあと、スタイルを直接指定する代りに、CSSクラスを指定することもできる。このクラスのためのスタイルは、種々の方法で指定することができる:

  • ソフトウェアそれ自身の中で、スキン毎(例として、整列可能なクラス)
  • MediaWiki:Common.css中の1つのwikiの全ての利用者のための集合的に(例としては、ここといくつかの他のプロジェクトにwikitableクラスがある)
  • MediaWiki:Monobook.css中のような、スキン毎に分割。
  • 1つのwiki上の利用者のサブページ中で個別に
  • 個別に、しかし、利用所のローカルコンピュータ上で、全てのwebページ上にかかわるクラスのテーブルのために共同で。

テーブルパラメータを憶える代りに、{|の後に、適切なスタイルクラスを含められる。これは一貫したテーブル形式を保つのを助け、問題を解決するか、1回だけそれを使う、全てのテーブルの見え方を拡張するためにクラスを1回で変更することができるようになる。たとえば以下のようになる。

{| border="1" cellpadding="2"
|+乗算表
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
 
乗算表
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15
becomes this:
{| class="wikitable"
|+乗算表
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
 
乗算表
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

単に、テーブルのためにインラインCSSを置き換えるには、class="wikitable"である。これは、沢山のtable.wikitable CSSスタイルルールを含むMediaWiki:Common.css 中のwikitableクラスによるものである。クラスと共にテーブルをマークしたとき、それらは全て1回だけ適用される。もしも要求されるならば、追加のスタイルを追加してもよい。それらは、クラススタイルをベースとして使い、その上に構築することを認める、クラスのルールを上書きする。

Wiki マークアップ

{| class="wikitable" style="font-style:italic; font-size:120%; border:3px dashed red;"
|+乗算表
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

ブラウザで見えるもの

乗算表
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

wikitable クラスの灰色の背景がそのテーブルに残っていて、ヘッダが引き続きボールド体でセンタリングされていることに注意。しかし、テキストのフォーマッテイングは、ローカルのスタイル文によって上書きされている。テーブル中の全てのテキストは、イタリックで標準の120%サイズになり、赤い点線の境界線によって、wikitableの境界は置き変わっている。

もちろん、この作業はインラインCSSをサポートしているブラウザのみであり、もしも、それが重要ならば、"font-size:120%"の代りに<big>のようなXHTMLマークアップか、"font-style:italic"の代りに''text''のようなWikiマークアップを使う。

整列[edit]

Help:Sortingを参照。

テーブルの行はテンプレートパラメータに依存する[edit]

テーブルの行のためのWiki文法は、ParserFunctionsを使うことでオプションにすることができる。ParserFunctions中でパイプ文字を使うことと、テーブル文法の一部であることと混同を防ぐために、後者はTemplate:! [ talk edit history links ]という特別な形式を伴う。 Template:Table example with optional row [ talk edit history links ]を参照。

その他のテーブル文法[edit]

その他のタイプの、Mediawikiがサポートするテーブル文法は以下である:

  1. XHTML
  2. HTML と wiki <td> 文法 (使わないこと)

全て、Mediawikiによってサポートされるものと有効なHTML出力を(現在)作成するものがここにあるが、パイプ文法が最もシンプルであり、HTMLに親しんでいる人にとっては特にである。また、HTMLとwikiの<td>文法は近い将来、ブラウザのサポートを残したままであるというわけではない、特にハンドヘルドのインターネットアクセス可能なデバイスにおいては。

Table (HTML)HTML element#Tablesを参照。しかしながら、theadtbodytfootcolgroupcol要素は現在MediaWikiでサポートされていないということに注意。

テーブル文法の比較[edit]

 XHTML HTML & Wiki-td Wiki-pipe
Table <table></table> <table></table>
{|
|}
Caption <caption>caption</caption> <caption>caption</caption>
|+ caption
<tr></tr> <tr>
|-
データセル

<td>セル1</td>
<td>セル2</td>

<td>セル1
<td>セル2

| セル1
| cell2
データセル <td>セル1</td> <td>セル2</td> <td>セル3</td> <td>セル1 <td>セル2 <td>セル3
| セル1 || セル2 || セル3
ヘッダセル <th>ヘッダ部</th> <th>ヘッダ部
! ヘッダ部
テーブルの例
1 2
3 4
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>
{| 
| 1 || 2
|- 
| 3 || 4
|}
テーブルの例
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{| 
| 1 || 2 
|- 
| 3 || 4 
|- 
| 5 || 6 
|}
利点
  • 任意のXHTMLエディタでプレビュー/デバッグ可
  • より可読可能にフォーマット可能
  • 良く知られている
  • 任意のHTMLエディタでプレビュー/デバッグ可
  • より可読可能にフォーマット可能
  • 良く知られている
  • XHTMLより少ない量ですむ
  • 書くのが簡単
  • 読むのが簡単
  • 少ない量ですむ
欠点
  • 退屈である
  • 沢山の量になる
  • 簡単に読むのが難しい
  • 使うべきではない
  • HTMLにあまりなれていない人は特に混乱する
  • 形式が貧弱
  • 区切りが貧弱
  • 一般的に変に見える
  • 今後はブラウザのサポートがないかもしれない
  • 一般的でない文法
  • 厳密な構造
  • インデントできない
  • (HTMLタグ中としての)テキストは、ある種の人には、沢山のパイプ、プラス記号、感嘆符などを読むよりより簡単であるかもしれない。
  • HTMLスタイルタグのためのショートカット以外の何者でもない。HTMLテーブルの概念に不慣れな人には簡単には理解できない。
 XHTML HTML & Wiki-td Wiki-pipe

生成されるHTMLに関するパイプ文法[edit]

Magnus Manskeによって開発されたパイプ文法はHTMLのためにパイプ(|)を代用する。ここ([2])には、htmlテーブルをパイプ文法でのテーブルに変換するオンラインスクリプトがある。

それらのパイプは、コンテンツを分離するパラメータか、1つの行上でセルを分割するための || を使う時を除いて、新しい行の先頭になければならない。パラメータはオプションである。

テーブル[edit]

A table は {| ''パラメータ'' |} のように定義され、 <table ''パラメータ''>フォーマットされていないテキストがここに来る </table> と同じである。

注意: {|パラメータの間に空白必ず含めることをしないと、最初のパラメータは無視される。

[edit]

<tr> タグは最初の行のために自動的に生成される。新しい行を始めるためには、

|-

を使う。その結果は

<tr>

である。パラメータは、以下のように追加できる:

|- params

その結果は

<tr params>

である。

注意:

  • <tr> タグは最初の<td>と同じように、自動的にオープンする。
  • <tr> タグは<tr>と</table>と同じように自動的にクローズする。

セル[edit]

セルは以下のどれ化のように生成される:

|セル1
|セル2
|セル3

あるいは:

|セル1||セル2||セル3

これらは両方とも下記と等しい

<td>セル1</td><td>セル2</td><td>セル3</td>

すなわち "||" は "改行" + "|"と同じである。

セル中のパラメータは以下のように使う:

|パラメータ|セル1||パラメータ|セル2||パラメータ|セル3

これは下記のような結果となる。

<td パラメータ>セル1</td>
<td パラメータ>セル2</td>
<td パラメータ>セル3</td>

ヘッダ[edit]

機能はTDと同じ方法であるが、最初の"|"の代りに"!"が使われるところが違う。"!!"は"||"の代りに使うことができる。パラメータは引き続き"|"である! 例:

!パラメータ|cell1

キャプション[edit]

A <caption> タグは以下によって生成される

|+ キャプション

これは以下を生成する。

<caption>キャプション</caption>

パラメータを使うこともできる:

|+ パラメータ|キャプション

これは以下を生成する。

<caption パラメータ>キャプション</caption>

テーブルを生成するテーブルコードの表示[edit]

コードボックスの内側でテーブルコードの簡単なwikiマークアップは以下で見ることができる。

{| border="5" cellspacing="5" cellpadding="2"
| style="text-align: center;" | [[Image:gnome-system.png]]
|-
! コンピュータ
|-
| プロセッサ処理速度: 1.8 GHz
|}

上記のコードは以下のテーブルを生成/表示する:

Gnome-system.png
コンピュータ
プロセッサ処理速度: 1.8 GHz

以下のコードは、四角い箱の、青に色がつけられた、三次元の、上記のテーブルのコードボックスのコードそれ自身を生成し、webページと画面上に表示する。

 
<pre>
{| border="5" cellspacing="5" cellpadding="2"
| style="text-align: center;" | [[Image:gnome-system.png]]
|-
! コンピュータ
|-
| プロセッサ処理速度: 1.8 GHz
|}
</pre>
 

HTMLタグ<pre>は、上記のコードとコードボックスの表示を成し遂げるために使われた。

テーブルコードを表示するためのその他の代替品[edit]

ほとんどの場合、webブラウザのWindowsの幅よりも、コードの行が長い場合、残りのコードを見るために、ビューワを左右にスライドするために、スクロールバーが最下部に現れる。そのために、そのテキスト行中で、EOL (CR/LF)と言う、隠れた文字に到達するまで、<pre>タグの使用はコード行を手つかずのままにしておくことを引き起こす。しかし、コード全部を見るために左右にスライド又はスクロールすることは、多くの人にとって、しばしば不快である。この問題を解決するためには、 <p><tt><br /> HTMLタグを使い、それは<pre>タグを使うよりは好ましく、それはwebブラウザのウィンドウの幅と同じに、全てのコードをそろえるために、閲覧するためにスクロールバーを左右に動かす必要がない。HTMLタグ<tt>...</tt>の内側にコードを置くことによって、コードはfixed widthなテキスト/フォントで表示され、(<pre> タグを使うように)可読性が向上する。HTMLタグ<br />は次の行のコードを表示(又は持ってくる)ために使われ、次の行から始まる。そのCSSスタイルプロパティと共に、HTMLタグ<p>はコードの周りの、青色の、三次元の四角い箱(Code box)を生成するために使われる(main.cssスタイルシートファイルからそれらのプロパティを取得する、HTMLタグ<pre> のように)。

長い行を持つテーブルコードの例は以下の通りである:

{| border="5" cellspacing="5" cellpadding="2"
| style="text-align: center;" | [[Image:gnome-system.png]]
|-
! Computer
|-
| style="color: yellow; background-color: green;" | Processor Speed: <span style="color: white;"> 1.8 GHz </span>
|}

以下が生成される:

Gnome-system.png
コンピュータ
プロセッサ処理速度: 1.8 GHz

上記のテーブルのコードボックスは、自動wrapping機能が有効になっている。コード中の長い行(上から6行目)はコードボックス内でwrapされる。このコードボックスとコードは、編集ボックス中で以下のコードを使うことで表示できる。

<p style="padding: 1em; border: 1px dashed #2f6fab; color: Black; background-color: #f9f9f9; line-height: 1.1em;"> <tt>
<nowiki>{|</nowiki> border="5" cellspacing="5" cellpadding="2" <br />
| style="text-align: center;" | <nowiki>[[</nowiki>Image:gnome-system.png]] <br />
|- <br />
! コンピュータ<br />
|- <br />
| style="color: yellow; background-color: green;" | プロセッサ処理速度: <nowiki><span style="color: white;"></nowiki> 1.8 GHz <nowiki></span></nowiki> <br />
<nowiki>|}</nowiki> <br />
</tt> </p>

上記のコードを見ると、注意すべき点として、<nowiki>...</nowiki> タグが、テーブルの始め({|)、テーブルの終わり、(|})、イメージ表示の開始、([[)あるいはハイパーリンクなどに、wikiマークアップコードを無効にするために使われているのが分かる。全てのwiki&HTMLマークアップコードは、<nowiki>...</nowiki> タグの内側で、それらを囲むことによって、無効にする必要がある。もしも、それらのコードが他のテーブル中で表示されたならば、それぞれの、| (pipe) & ! (感嘆符)シンボルも <nowiki> タグ内で囲まれる必要がある。長い行はコードボックス内で、ブラウザのウィンドウの幅にあわせて自動的にwrapされることに注意。

代替として、各々の| (パイプシンボル)文字を&#124; (HTML 10進エントリコード)に、各々の! (感嘆符)を&#33; に、{ (beginning curly/second bracket) を&#123; に、} (closing curly/second bracket) を&#125;に置き換えることができる。 同様に、<(小なり記号あるいは左アングルブラケット)は&#60;数字エンティティコードか、&lt;(HTMLシンボルエンティティコード)に置き換えできる。さらなるHTML十進又は16進数字エンティティコードについては、w:Windows Alt codesを参照のこと。 wikiイメージマークアップコードを表示するためには、 &#91;付きの[(左大括弧)と&#91;付きの](右大括弧)に置き換えることができる。文字を数字エンティティコードに置き換えるとき、それらの通常の機能を真に無効にするので、webページ上にそれらを表示することができる。

上記のパラグラフ中で説明された、数字エンティティコードを使うことで、以下のコードはもう一つの別の(よりよい)方法でコードボックスの上に表示することができる。長い行は、下記のコードボックス内で、ブラウザのウィンドウの幅を拡張せず、自動的にwrapされることに注意。   
Gnome-system.png
コンピュータ
プロセッサ処理速度: 1.8 GHz

<p style="padding: 1em; border: 1px dashed #2f6fab; color: Black; background-color: #f9f9f9; line-height: 1.1em;"> <tt>
&#123;&#124; border="5" cellspacing="5" cellpadding="2" <br />
&#124; style="text-align: center;" &#124; &#91;&#91;Image:gnome-system.png]] <br />
&#124;- <br />
&#33; コンピュータ <br />
&#124;- <br />
&#124; style="color: yellow; background-color: green;" &#124; プロセッサ処理速度: &#60;span style="color: red;"> 1.8 GHz &#60;/span> <br />
&#124;&#125; <br />
</tt> </p>

disabling wikitext interpretation and/or reformattingも参照。

参照[edit]

次ページ: 簡易年表 >


Links to other help pages[edit]

Help contents
Meta · Wikinews · Wikipedia · Wikiquote · Wiktionary · Commons: · Wikidata · MediaWiki · Wikibooks · Wikisource · MediaWiki: Manual · Google
Versions of this help page (for other languages see further)
What links here on Meta or from Meta · Wikipedia · MediaWiki
Reading
Go · Search · Stop words · Namespace · Page name · Section · Backlinks · Redirect · Category · Image page · Special pages · Printable version
Tracking changes
Recent changes (enhanced) | Related changes · Watching pages · Diff · Page history · Edit summary · User contributions · Minor edit · Patrolled edit
Logging in and preferences
Logging in · Preferences · User style
Editing
Starting a new page · Advanced editing · Editing FAQ · Edit toolbar · Export · Import · Shortcuts · Edit conflict · Page size
Referencing
Links · URL · Piped links · Interwiki linking · Footnotes
Style and formatting
Wikitext examples · CSS · Reference card · HTML in wikitext · Formula · List · Table · Sorting · Colors · Images and file uploads
Fixing mistakes
Show preview · Testing · Reverting edits
Advanced functioning
Expansion · Template · Advanced templates · Parser function · Parameter default · Variable · System message · Substitution · Array · Calculation · Embed page
Others
Special characters · Renaming (moving) a page · Preparing a page for translation · Talk page · Signatures · Sandbox · Legal issues for editors
言語: English · العربية · български · dansk · Deutsch · Esperanto · español · euskara · suomi · français · galego · italiano · 日本語 · Nederlands · polski · русский · shqip · Tiếng Việt · 中文