ごく単純な例を以下に示します。{| 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
また、以下のように書いても全く同じように表示されます。<table class="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>
前者の、{| で始まり、パイプ ( | ) を多用するものをパイプ構文と呼びます。後者は 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 で記述することになります。より詳しい解説は専門書や入門サイトなどに譲り、ここでは単純なものやよく使われるものに限って解説します。
テーブル全体に罫線を表示するのはとても簡単です。表全体のパラメータに、{| class="wikitable"
と指定するだけです。先の例に適用すると、以下のように表示されます。
表タイトル列見出し 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属性を指定します。
ウィキマークアップ{| 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
行 1AB
行 2CD
行 3EF
行 4G
行 5H
rowspan属性を指定するとセルを縦に結合します。colspan属性を指定するとセルを横に結合します。
rowspan属性、colspan属性ともに属性値を指定する事により、指定された個数のセルを結合します。
表全体の幅を指定するには、表全体のパラメータに CSS の width プロパティを設定します。
ウィキマークアップ{| class="wikitable" style="width:100%"|+ 幅 100% の表| セル1 || セル2 || セル3|}{| class="wikitable" style="width:80%"|+ 幅 80% の表| セル1 || セル2 || セル3|}{| class="wikitable" style="width:50%"|+ 幅 50% の表| セル1 || セル2 || セル3|}
実際の表示
幅 100% の表セル1セル2セル3
幅 80% の表セル1セル2セル3
幅 50% の表セル1セル2セル3
列の幅を個別に指定するには、セルのパラメータにやはり width プロパティを設定します。1箇所で設定すれば、他の行の同じ列にも適用されます。
ウィキマークアップ{| class="wikitable" style="width:80%"|+ 表全体の幅は 80%| style="width:50%" | 幅 50% のセル <!-- 表全体の幅に対する割合 -->| style="width:10em" | 幅 10em のセル| 幅を指定しないセル|}
実際の表示
表全体の幅は 80%幅 50% のセル幅 10em のセル幅を指定しないセル
幅を指定するもうひとつの方法に width 属性がありますが、セルに対する width 属性は非推奨です[2]。表全体に対する width 属性は非推奨ではない[1]のですが、混乱を避けるために CSS の width プロパティで置き換えた方が無難でしょう。