Wikipedia:表の作り方/改定案

この文書は草案です。まだ公式にリリースされていません。内容に関して「ノートページ」で議論を行っています。

この記事ではどのような場合に表にするべきなのかの方針と表の作成方法について説明します。

どんなときに表を作成するべきか？

データが予め行と列で表せる形式になっていれば、大抵の場合は表にするのが最もいいやり方です。例えば以下のようなものがあります。

数学の表
- かけ算九九の表
- 約数の表
- ルックアップ
情報のリスト
- 同じ単語を二つ以上の言語で表記する
- 人、誕生日、居住地リスト
- アーティスト、アルバム、発表年、レーベル

多くの場合、リストはリストとして残すのが一番です。表形式で書くと非常に編集し辛くなりそうな異常に長いリストを含む記事があります。表形式でリストを書き直す前に、行・列を使うことで情報がより明確に伝わるようになるかどうか考えて下さい。もしそうならば、おそらく表で書くのが良い選択なのでしょう。行・列を使うことによる明らかな利点がないならば、表を使うのはおそらく最善の方法ではないのでしょう。

また、表はレイアウトだけのために使うべきではありません。あなたが編集している情報が、表形式で書くべき性質のものでなければ、表形式では書かない方がよいでしょう。写真の下にキャプションを入れたり、リンクのグループを整理したり、その他見栄えを変えるだけのために、表は使わないようにして下さい。他のウィキペディアンにとって記事が編集しにくくなりますし、表の本来の使い方ではありません。

表がふさわしくないのはどんなときか

非常に長いリスト、または非常に短いリスト

リストが非常に長かったり、比較的シンプルな場合には、ウィキペディアの標準的なリスト書式を使って下さい。長いリストは、表の中に書かれると保守が大変になりますし、シンプルなリストは、行・列を使って書く必要もないでしょう。ここに、表の代わりにリストを使う方がよいと思われる例を挙げます。

表での表記（悪い例）

年	アルバム
1993	Janet
1997	Control
1997	The belbet robe
2001	All for you

表を使用しない表記（良い例）

1993年 - Janet
1997年 - Control
1997年 - The belbet robe
2001年 - All for you

単純なテンプレートのレイアウト

単純なテンプレートは表を使わなくてもできます。

例：Template:日本の鉄道史

画像のレイアウト

多くの場合、記事中の画像の位置は、表レンダリングによって勝手に決められてしまいます。表は画面の左右を指定して配置できますので、画面の特定の場所に画像を表示させるために1セルだけの表を使う手法がよく知られています。これは、古いブラウザに対しては必要な回避策です。Cascading Style Sheets を適切に扱えないブラウザでも、きちんと表示できるようになるからです。しかし、現在使われているブラウザの大半は、スタイルシートをきちんと扱えます。ですから、現在は、div 要素を使って画像を配置する手法が推奨されています。

詳しくは、Wikipedia:画像利用の方針と en:Wikipedia:Extended image syntax を参照して下さい。

表を使用した表記（悪い例）

<table align="right" border="0" cellpadding="0"><tr><td>[[画像:Covalent.png]]</td></tr></table>

лорпрп \

表を使用しない表記（良い例）

[[画像:Covalent.png|right]]

見え方

どちらも、結果は本質的には同じです。画像は画面の右側に寄せられ、その周りに文章が配置されます。ここに、あなたのブラウザでどのように見えるかを示します。

共有結合は、どちらの原子も相手の原子から電子を完全に取り除くのに十分なエネルギーがないような、電気陰性度が近い原子同士でよく起こる。イオン結合が二つの金属原子あるいは金属原子と非金属原子間で起こるのに対し、共有結合は非金属原子同士でよく起こります。

共有結合は、イオン結合などの他の結合より強力な傾向があります。また、指向性のないクーロン力でつながれるイオン結合とは違い、共有結合は強い指向性があります。ですから、共有結合分子は、特定の結合角を持ち、比較的少数の特定の形を形成しがちです。

表を使った場合に考えられる問題

表を正しく使っていても、面倒なことは他にも起こります。記事で表を使いたくなったら、以下の項目に該当しないか検討してみてください。

記事に表があると、自分以外の人には編集しにくくなる可能性があります。特にウィキペディアの初心者にとってはそうです。記事の編集になれていない人が「この記事を編集」をクリックしたとき、表示されるのが（その人にとっては）意味不明のHTMLコードで埋め尽くされたものだったら、編集する気が失せてしまうでしょう。表はできるだけシンプルに、そして表の要素は整頓しておくようにして下さい。編集する人が安心できるように、
```

```
のようなコメント（記事の編集中にしか見えません）を入れることもできます。
HTMLの経験が豊富な人にとっても、表がすべてのウェブブラウザで（或いは自分がチェックしていないウェブブラウザで）きちんと表示できているか確認するのは困難です。要素にちょっとした綴りのミスがあっただけで、表全体の表示が劇的に変わってしまうこともあります。あなた自身がどんなにそういうことを起こさない自信があったとしても、誰が編集するのかわからないのがウィキペディアです。繰り返しますが、表はできるだけシンプルに、要素を整頓しておいて、そういう問題ができるだけ起こらないようにしましょう。
たくさんの情報が詰まった、大きな表は、解像度の低い画面では、右側が切れてしまって表示されない可能性があります。これは見る人があらかじめ警告されていれば、許されるでしょう（例：周期表 (表が巨大なバージョン)）。もし非常に大きな表を作る必要が生じたら、大きな表がうまく利用できない環境の人用に、シンプルで小さい表もつくることも考えられます（例：周期表には、もっと小さい表のバージョンも用意されています）。
表の中に固定幅のテキスト（例えば、HTMLでいうと、code、pre、ttなど）を使う場合、記事の幅が必要以上に横に広げられてしまいます。可能ならば、表の中では固定幅のテキストを使うのは避けましょう。そうすれば、文は自然に詰めて配置されます。同様の問題は、表の中に画像を入れた場合にも起こります（画像は通常固定幅として扱われてしまいます）。
表の各セルに大量の情報が収められていると、ブラウザによっては、表示上の問題が起こることがあります。とりわけ、大きな段落が入っていると、Lynxなどのテキストブラウザではフォーマットが乱れます。表を作る目的によっては、大きな段落を入れるのはやむを得ませんが、可能ならば、表のセルに入れる内容量は少なくするようにしてみてください。

表の書き方

以下にMediaWikiを使用した、表を作成するための文法について解説します。

早見表

{\|	表の始まり
\|+	表のタイトル（省略可）
!	列の見出し（省略可）　!で書き始め、!!で各列の見出しを分けて書きます
\|-	新しい行の始まり（1行目では省略可）
!	行の見出し（省略可）
\|	表のセル　最初に(\|)を書き、その後にセルの内容を記述します。続けて次の列の内容を記述する場合は(\|\|)で各セルを分けます。
\|}	表の終わり

簡単な例

{|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

パイプ形式文法の概要

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

HTMLテーブル文法も動作するにもかかわらず、特別なwikicodeはテーブルを作成するための簡易な方法として使うことができます。パイプ（バーティカルバー）コード機能は、HTML要素マークアップと正確に同じであり、そのため、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つ以上の単体のパイプが置けないことを憶えておくこと!

列の見出しの行は"|"の代りに"!"を、"||"の代りに"!!"を使うことによって識別されます。ヘッダセルは、ブラウザに依存しますが、通常のセルとは異なって描画されます。それらはしばしばボールド体とセンタリングで表示されます。

{|
|+ テーブルのキャプション
! カラムヘッダ 1 !! カラムヘッダ 2 !! カラムヘッダ 3
|-
|セル 1 || セル 2 || セル 3
|-
|セル A
|セル B
|セル C
|}

行の最初のセルは"|"の代りに"!"を使って行を開始することによって、行ヘッダとして識別され、改行の後に引き続いてデータセルが開始されます。

{|
|+ テーブルのキャプション
! カラムヘッダ 1 !! カラムヘッダ 2 !! カラムヘッダ 3
|-
! 行ヘッダ 1 
| セル 2 || セル 3
|-
! 行ヘッダ A 
|セル B
|セル C
|}

オプションのパラメータはセル、行または全テーブルの作用を変更できます。例えば、テーブルに対して境界を追加できます。

{| border="1"
|+ テーブルのキャプション
! カラムヘッダ 1 !! カラムヘッダ 2 !! カラムヘッダ 3
|-
! 行ヘッダ 1
| セル 2 || セル 3
|-
! 行ヘッダ A
|セル B
|セル C
|}

最後のテーブルは以下のように表示されます。

テーブルのキャプション
カラムヘッダ 1 カラムヘッダ 2 カラムヘッダ 3

行ヘッダ 1 セル 2 セル 3

行ヘッダ A セル B セル C

テーブルパラメータとセルパラメータはHTML中では同じです（[1]とTable (HTML)を参照）。しかし、 thead、tbody、tfoot、colgroup、とcol要素は、現在MediaWikiではサポートされていません。

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

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

colspanとrowspanを使うセルはいくつかのカラムか行に渡ることができ、以下の例を参照。しかし、これはsortingが正しく動作しないという欠点を持ちます。

例

単純な例

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

Wiki マークアップ

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

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

上記コードの表示

A B

C D

乗算表

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
|}

上記コードの表示 （m: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

色の使用

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

Wiki マークアップ

{| 
| style="background:red; color:white" | abc
| def
|}

上記コードの表示

abc def

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

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を含むいくつかのブラウザでは動作しません）

幅と高さ

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

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%"のような、より古い同等の指定は動きます。

カラムの幅の指定

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

{| border="1" cellpadding="2"
!width="50"|名前
!width="225"|効果
!width="225"|ゲームに登場
|-
|[[モンスターボール]] || 普通のモンスターボール || 全てのバージョン
|-
|スーパーボール || モンスターボールより良い || 全てのバージョン
|}

名前効果ゲームに登場

モンスターボール普通のモンスターボール全てのバージョン

スーパーボールモンスターボールより良い全てのバージョン

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

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

このカラムは100ポイントの幅このカラムは200ポイントの幅このカラムは300ポイントの幅

blah blah blah

縦方向の配置

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

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. より短いテキストの断片。

位置決め

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

混合書式

ここにはより高度な例があり、テーブルをマークアップするために有効な追加のオプションを示します。しかし、それらを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番目のヘッダ

左上
右端

左下左の真ん中

テーブル中のテーブル

2つのWikimediaロゴ

浮動テーブル

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...

入れ子になったテーブル

ここでは、別のテーブルのセル2の内側に入れ子になった（青の）1つのテーブルを表示します。 入れ子になったテーブルは新しい行上で開始されなければなりません。

Wiki マークアップ

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

上記コードの表示

α セル2

入れ子の

テーブル
元のテーブル

COLSPANとROWSPANの使用の組み合わせ

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

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

テーブルのセンタリング

テーブルのセンタリングは行なえますが、それは"浮動"にはなりません。すなわち、テキストはどちらのサイドにも現れません。トリックは{| 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.

パラメータの設定

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

Wikiマークアップ

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

上記コードの表示

cell1 cell2 cell3

小数点の位置揃え

小数点の位置で数字を揃えるためには以下の手順で行ないます。

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

スタイルクラス

meta: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マークアップを使います。

整列

meta:Help:Sortingを参照。

その他のテーブル文法

その他の形式の、Mediawikiがサポートするテーブル文法は以下の様になります。

XHTML
HTML と wiki <td> 文法（使用しない）

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

Table (HTML)とHTML element#Tablesを参照。しかし、thead、tbody、 tfoot、colgroupとcol要素は、現在MediaWikiでサポートされていないことに注意。

テーブル文法の比較

XHTML

HTML & Wiki-td

Wiki-pipe

Table

{|
|}

Caption

<caption>caption</caption>

|+ caption

行

<tr>

|-

データセル

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

| セル1
| cell2

データセル

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

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

ヘッダセル

<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に関するパイプ文法

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

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

テーブル

table は

 {| ''パラメータ''
 |}

のように定義され、

 <table ''パラメータ''>フォーマットされていないテキストがここに来る
 </table>

と同じです。

注意：{| とパラメータの間に空白を挿入しないと、最初のパラメータは無視されます。

行

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

|-

を使います。その結果は

<tr>

となります。パラメータは、以下のように追加できます。

|- params

その結果は

<tr params>

となります。

注意:

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

セル

セルは以下のどれかのように生成されます。

|セル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>

ヘッダ

機能はTDと同じ方法ですが、最初の"|"の代りに"!"が使われるところが異なります。"!!"は"||"の代りに使うことができます。パラメータは"|"に引き続いて記述します。

!パラメータ|cell1

キャプション

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

|+ キャプション

これは以下を生成します。

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

パラメータを使うこともできます。

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

これは以下を生成します。

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

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

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

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

上記のコードは以下のテーブルを生成/表示します。

コンピュータ

プロセッサ処理速度: 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>は、上記のコードとコードボックスを表示するために使われます。

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

ほとんどの場合、webブラウザのWindowsの幅よりもコードの行が長い場合、残りのコードを見るために、ビューワを右端（と左端にも）にスライドするために、スクロールバーが最下部に現れます。そのために、そのテキスト行中で、EOL (CR/LF)と言う、隠れた文字に到達するまで、<pre>タグの使用はコード行を手つかずのままにしておくことを引き起こします。しかし、コード全部を見るために左右にスライド又はスクロールすることは、多くの人にとって、しばしば不快です。この問題を解決するためには、 <p>、<tt>と <br /> HTMLタグを使い、それは<pre>タグを使うよりは好ましく、それはwebブラウザのWindowsの幅と同じに、全てのコードを揃えるために、閲覧するためにスクロールバーを左右に動かす必要がない。HTMLタグ<tt>...</tt>の内側にコードを置くことによって、コードは一定の幅のテキスト/フォントで表示され、（<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> |}

以下が生成されます。

コンピュータ

プロセッサ処理速度: 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されることに注意。

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

上記のパラグラフ中で説明された、数字エンティティコードを使うことで、以下のコードはもう一つの別の（よりよい）方法でコードボックスの上に表示することができます。長い行は、下記のコードボックス内で、ブラウザのWindowsの幅を拡張しないで、自動的にwrapされることに注意。

コンピュータ

プロセッサ処理速度: 1.8 GHz

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

Wikipedia:編集の仕方も参照。

例1

Wikipediaのコード

{| border="1" cellpadding="10" <!--table要素のオプション {|のあとにスペースが必要！-->
|- style="text-align: center;" <!--tr要素のオプション-->
!style="background-color: #cccccc;"|名前 <!--th要素とそのオプション-->
!郵便番号 <!--オプションがない場合-->
!住所!!電話 <!--1行に続けて書くときは!!とします-->
|-
|style="background-color: #cccccc;"|あきら <!--td要素とそのオプション-->
|999-9901
|中町3-2 <!--オプションがない場合-->
|22-2233
|-
|style="background-color: #cccccc;"|いさく
|999-9901
|北町1-2
|33-4422
|-
|style="background-color: #cccccc;"|うたこ||999-9903||南町6-6||55-6633 <!--1行に続けて書くときは||とします-->
|-
|style="background-color: #cccccc;"|えり||999-9904||西町2-4-2||style="background-color: #ff8080;"|66-7236 <!--1行の途中のオプション-->
|}

上記コードの表示

名前	郵便番号	住所	電話
あきら	999-9901	中町3-2	22-2233
いさく	999-9901	北町1-2	33-4422
うたこ	999-9903	南町6-6	55-6633
えり	999-9904	西町2-4-2	66-7236

例2

Wikipediaのコード

{| border="1" cellpadding="5" cellspacing="0" style="margin-left: auto; margin-right: auto;"
|+'''表の例'''
|-
! style="background:#efefef;" | 1つめのヘッダ
! colspan="2" style="background-color: #ffdead;" | 2つめのヘッダ
|-
| 左上
|
| rowspan="2" style="border-bottom:3px solid gray; vertical-align: top;" | 右脇
|-
| style="border-bottom:3px solid gray;" | 左下
| style="border-bottom:3px solid gray;" | 中央下
|-
| colspan="3" style="text-align: center;" |
{| border="0"
|+''表中表''
|-
| style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]]
| style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]]
|-
| colspan="2" style="border-color: red; border-width:1px 1px 2px; border-style: solid; text-align: center;" |
ウィキペディアのロゴ2つ
|}
|}

上記コードの表示

表の例

1つめのヘッダ

2つめのヘッダ

左上

右脇

左下

中央下

*表中表*

ウィキペディアのロゴ2つ

CSSの利用

MediaWiki:Common.cssに、テーブルのCSSクラスが用意されています。テーブルの冒頭、「border="1"」や「cellpadding="2"」などと並列に、「class="wikitable"」とクラスを指定すると、「border-collapse: collapse」など、いくつかのスタイルを直接指定する手間が省け、複数のテーブルの見た目を容易に統一できます。

Wikipediaのコード

{| class="wikitable" border="1" cellpadding="5" cellspacing="0" style="margin: auto;"
|+ class="wikitable"を使った表の例
|-
! style="background-color: #efefef;" | 1つめのヘッダ
! colspan="2" style="background-color: #ffdead;" | 2つめのヘッダ
|-
| 左上
|
| rowspan="2" style="border-bottom:3px solid gray; vertical-align: top;" | 右脇
|-
| style="border-bottom:3px solid gray;" | 左下
| style="border-bottom:3px solid gray;" | 中央下
|-
| colspan="3" style="text-align: center;" |
{| border="0"
|+''表中表''
|-
| style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]]
| style="text-align: center; width: 150px;" | [[画像:Wiki2logo.png]]
|-
| colspan="2" style="border-color: red; border-width: 1px 1px 2px; border-style: solid; text-align: center;" |
ウィキペディアのロゴ2つ
|}
|}

上記コードの表示

class="wikitable"を使った表の例

1つめのヘッダ

2つめのヘッダ

左上

右脇

左下

中央下

*表中表*

ウィキペディアのロゴ2つ

HTMLによる表の書き方

簡単な例

Wikipediaのコード

<table border="1" cellpadding="2">
<caption>かけ算の表</caption>
<tr><th>&times;</th><th>1</th><th>2</th><th>3</th></tr>
<tr><th>1</th><td>1</td><td>2</td><td>3</td></tr>
<tr><th>2</th><td>2</td><td>4</td><td>6</td></tr>
<tr><th>3</th><td>3</td><td>6</td><td>9</td></tr>
<tr><th>4</th><td>4</td><td>8</td><td>12</td></tr>
<tr><th>5</th><td>5</td><td>10</td><td>15</td></tr>
</table>

上記コードの表示

かけ算の表
×	1	2	3
1	1	2	3
2	2	4	6
3	3	6	9
4	4	8	12
5	5	10	15

この例で重要なことは以下の通りです。

表を書くにはまず <table ...> という開始タグではじめ、最後は必ず</table> という終了タグで閉じる必要があります。
Caption （キャプション）とは表のタイトルのことです。表についての説明を簡潔に書き、<caption> と </caption>で挟み、<table> の開始タグの次に書きます。
表の行（或いは横一列と言った方が通じるでしょう）を一括りにして書きます。行は <tr> ではじまり</tr> で閉じる必要があります（"tr"は、Table Rowの略で、行のことです）。
見出しのセル（ます）は中身が見出しの時に用います。<th> で開始し、</th> で閉じます（"th"は、Table Headingの略で、見出しのことです）。
後のセルには、表のデータが入ります。<td> で開始し、</td> で閉じて下さい（"td"は、Table Dataの略で、データのことです）。

<td> と </td>、または <th> と </th> で挟まれた要素のことを表計算ソフト等と同じく"セル"、と呼びます。2行分に跨るセルを作らない時には、すべての行に、他の行と同じ数のセルを作らなければなりません。何も書かないセルを作りたいときにはそのセルの中に   と書いて中身を埋めてください。これは HTML の用語で non-breaking-space と呼ばれている空欄を書くための記号です。これを埋め込まないと、一部のウェブブラウザではおかしな表示がされてしまいます。

表の表示がうまくいかないときは、すべてのHTMLの要素で開始タグと終了タグがきちんと対応しているかどうか確認してみてください。実際、すべてのタグをきちんと閉じなくても表示してしまうウェブブラウザもあります。きちんとできているかどうかは W3CのHTML確認サービスを利用するといいでしょう。確認ボックスに URI を貼付けると、テーブルのどこが悪いのかを表示してくれます（訳注：日本語ではWikipediaのHTMLのコードエラーがいろいろ表示されます）。このサービスは、表が大きくて複雑なとき、表をチェックするのに非常に役に立ちます。なおWikipedia (XHTML) では、すべての開始・終了タグは省略を許されません。

HTML に詳しいのであれば、thead、tbody、tfoot、colgroup といった要素もご存知かもしれませんが、これらはまだ Wikipediaでは使用することができません。

HTMLでの少し複雑な例

表を作るのに少しオプションを加えて、もう少し複雑な例を示します。これらをマスターすれば設定をいろいろ変えることで様々な表を作ることができるようになるでしょう。ただし、いつでもこれらのテクニックが適切、というわけではありません。例えば、背景の色を指定したりするのは、必ずしもいいアイデアとはいえません。表を作るときにはできるだけそのコードがシンプルに保てるよう注意を払ってください。他の人がその表を編集する可能性があることを忘れないでください。この例は、どんなことが可能なのかを示すものです。

Wikipediaのコード

<table border="1" cellpadding="5" cellspacing="0" style="margin-left: auto; margin-right: auto;">
<caption>'''表の例'''</caption>
<tr>
<th style="background-color: #efefef;">ヘッダ1</th>
<th colspan="2" style="background-color: #ffdead;">ヘッダ2</th>
</tr>
<tr>
<td>左上</td>
<td> </td>
<td rowspan="2" style="border-bottom:3px solid gray; vertical-align: top;">右上</td>
</tr>
<tr>
<td style="border-bottom:3px solid gray;">左下</td>
<td style="border-bottom:3px solid gray;">下中央</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<table border="0">
<caption>''表内の表''</caption>
<tr>
<td style="text-align: center; width: 150px;">[[画像:Wiki2logo.png]]</td>
<td style="text-align: center; width: 150px;">[[画像:Wiki2logo.png]]</td>
</tr>
<tr>
<td colspan="2" style="border-color: red; border-width: 1px 1px 2px;border-style: solid; text-align: center;">
Wikipediaのロゴ2つ</td>
</tr>
</table>
</td>
</tr>
</table>

あなたの環境ではどう見えますか？

表の例

ヘッダ1

ヘッダ2

左上

右上

左下

下中央

*表内の表*

Wikipediaのロゴ2つ

表の具体例

シリーズもの

プロジェクト:テンプレート集
en:Wikipedia:Infobox - 英語版ウィキペディアのテンプレート集

個別記事

シンプルな表：

戸籍、モールス信号

少し複雑な表：

九星、ラテン語の文法、日本海海戦、年表

複雑な表：

参照

外部リンク

The Table Sampler - 表の様々な例

このカラムは100ポイントの幅	このカラムは200ポイントの幅	このカラムは300ポイントの幅
blah	blah	blah