查看“Wikipedia:使用表格”的源代码

{{hh/zh}}

表格可以直接借助 HTML 的表格元件來製作，或是透過 wiki 格式語言在 wiki 網頁予以定義。 HTML 表格元件與相關的使用方式在各式的網頁都有詳細的說明於此不再贅述。 使用 wiki 格式語言，相較於 HTML 表格元件，的好處是當表格以字元符號架構出來的，使得你更容易的以文章編輯的角度看出表格的舖排樣子。

經驗上，除非必要，應盡量避免使用表格。表格的標示語言通常複雜化了頁面的編輯。

== Wiki 標示語言一覽 ==

{|cellpadding="5" cellspacing="0" border="1"
|<nowiki>{|</nowiki> || '''表格''' 起始
|-
|<nowiki>|+</nowiki> || 表格 '''標題，''' ''選用;'' 每張表格只能出現一次且介於表格起始與第一行
|-
|<nowiki>|-</nowiki> || '''表格行，''' ''第一行選用'' -- wiki 引擎會假設是第一行
|-
|<nowiki>!</nowiki>  || '''表格標題''' 儲存格， ''選用。'' 可以使用（!!）在同一行加入接續的表格標題或是單獨使用 (!）換新的一行 。
|- 
|<nowiki>|</nowiki>  || '''表格資料''' 儲存格， ''必要!'' 可以使用（<nowiki>||</nowiki>）接續表格資料儲存格或是單獨使用 (<nowiki>|</nowiki>）。
|-
|<nowiki>|}</nowiki> || '''表格'''結束
|}
*上述符號必須出現'''在新行的開頭'''除了當在同一行中想要延續儲存格所增用的雙 || 與 !! 。
*'''XHTML 屬性'''。每一個符號，除了表格的末尾，可選擇性的接受一或多個 XHTML 屬性。 屬性必須與符號在同一行。請使用一個空格隔開每一項屬性。 
**儲存格與標題 (<nowiki>| 或是 ||，! 或是 !!，以及 |+</nowiki>) 持有表格內容。 所以要使用單線(|)來區隔屬性與內容。儲存格內容可以都位在同一行或是換到另一行。
**表格與行的符號(<nowiki>{| 與 |-</nowiki>) 並不直接持有內容。 在它們的屬性之後請''不要''加入管線(|)。 如果你在表格與行符號的屬性之後錯誤的加入管線符號，剖析器會將之刪除 ''以及''之後任何觸及該出錯管線的屬性！
*'''內容''' (a) 可以任何選用的 XHTML 屬性之後跟著同一行它的儲存格標記或是 (b) 儲存格標記的下一行。 使用 wiki 標示語言的內容本身需要自新的一行開始，例如清單，表頭，或是表格內接的表格，必須在它自個兒的新行。

==簡單的表格==

===Plain===
下面這個表格沒有外框與留白，但是顯示了最簡單的 wiki 表格標示語言的結構
{| width="100%"
|width="50%"|
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{|
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}
===Alternative===
想要排列得更像表格，可以使用 wiki 標示語言 || 將儲存格分開但又並排於同一行。 這個方法對於儲存格要放入比較長的文字內容，如段落時，其長短的調整並不佳。 它最適合用在簡短的內容，例如此處所作的表格例子。

你也可以在儲存格之間的 wiki 標示語言加入額外的空格，如同下面我對 wiki 標示語言所作的， 可以使得 wiki 標示語言本身排列的更好看但又不影響表格的產生。

HTML 屬性可以被加入這張表格 following the examples in other tables on this page 但是為了簡化，在下述的例子中並沒有寫出來。
{| width="100%"
|width="50%"|
{|
|  Orange    ||   Apple   ||   more
|-
|   Bread    ||   Pie     ||   more
|-
|   Butter   || Ice cream ||  and more
|}
|width="50%"|
<pre>
{|
|  Orange    ||   Apple   ||   more
|-
|   Bread    ||   Pie     ||   more
|-
|   Butter   || Ice cream ||  and more
|}
</pre>
|}

===搭配 HTML  屬性===
你可以加上 HTML 屬性讓你的表格看起來更漂亮

*border="1"

{| width="100%"
|width="50%"|
{| border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

* align="center" border="1"

{| width="100%"
|width="50%"|
{| align="center" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| align="center" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

* align="right" border="1"

你可以將屬性加諸於個別的'''儲存格'''。 例如數字靠右對齊會比較好看
{| width="100%"
|width="50%"|
{| border="1"
|Orange
|Apple
|align="right"|12，333.00
|-
|Bread
|Pie
|align="right"|500.00
|-
|Butter
|Ice cream
|align="right"|1.00
|}
|width="50%"|
<pre>
{| border="1"
|Orange
|Apple
|align="right"|12，333.00
|-
|Bread
|Pie
|align="right"|500.00
|-
|Butter
|Ice cream
|align="right"|1.00
|}
</pre>
|}


* 你也可以將屬性加諸於個別的'''行'''

{| width="100%"
|width="50%"|
{| border="1"
|Orange
|Apple
|align="right"|12，333.00
|-
|Bread
|Pie
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice cream
|align="right"|1.00
|}
|width="50%"|
<pre>
{| border="1"
|Orange
|Apple
|align="right"|12，333.00
|-
|Bread
|Pie
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Ice cream
|align="right"|1.00
|}
</pre>
|}

* cellspacing="0" border="1"

{| width="100%"
|width="50%"|
{| cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream
|}
|width="50%"|
<pre>
{| cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

* cellpadding="20" cellspacing="0" border="1"

{| width="100%"
|width="50%"|
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

===搭配 HTML 屬性與 CSS 樣式===
CSS 樣式屬性可以同時搭配或不搭配其他 HTML 屬性
====style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"====
{| width="100%"
|width="50%"|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

==搭配 TH 表頭的表格==

TH (HTML 表頭的表格) 可以使用 ! 而非 | 來指明。 依照預設，表頭通常是粗體字與置中對齊。

===表頭===
====各欄====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!Yummy
!Yummier
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!Yummy
!Yummier
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}
====Colspan="2"====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!colspan="2"|Yummies
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|Yummies
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

===側表頭===
====預設====
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Dish
|Bread
|Pie
|-
!Complement
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!Fruit
|Orange
|Apple
|-
!Dish
|Bread
|Pie
|-
!Complement
|Butter
|Ice cream 
|}
</pre>
|}

====靠右對齊====
如下作出靠右對齊的效果
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apple
|-
!align="right" |Dish
|Bread
|Pie
|-
!align="right" |Complement
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Fruit
|Orange
|Apple
|-
!align="right" |Dish
|Bread
|Pie
|-
!align="right" |Complement
|Butter
|Ice cream 
|}
</pre>
|}

==標題==
'''標題'''可以如下的方式加到任何表格的第一行
{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

'''屬性'''也可以如下的方式放到標題內

{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Food complements''
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}

==表格搭配 H1， H2， H3 等表頭==

你可以使用 ==等於== 符號來製作 HTML H1， H2， H3， H4 等類型的標題且'''必須緊靠成行'''才有效果。

'''預覽整個表格''' 如果你在表格，編輯，預覽''之內''的標題選取編輯標籤，其母表格會因部份會斷落而無法完整的顯示出來。If you click on an edit tab for a heading ''within'' a table， edit， and preview， the parent table will display erroneously broken because part of it will be missing。

保持標題架構與頁面的其他部份一致使得頁面上方的目錄能正確的顯示。Keep the heading hierarchy consistant with the rest of the page so that the table of contents at page top works correctly。

{| width="100%"
|width="50%"|
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
|width="50%"|
<pre>
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Yummiest===
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
</pre>
|}