維基百科

說明:表格

維基表格有多種形式，並可進行自訂。該頁介紹的是建立維基表格的語法。儘管在維基百科中可以使用HTML語法建立表格，但是wikitext語法通常會更加簡便。

一段最簡單的表格代碼是這樣的： 

{| class="wikitable"
|-
! 標題文字1 !! 標題文字2 !! 標題文字3
|-
| 範例1 || 範例2 || 範例3
|-
| 範例4 || 範例5 || 範例6
|-
| 範例7 || 範例8 || 範例9
|}

提交編輯後，該表格即顯示為：

標題文字1 標題文字2 標題文字3
範例1 範例2 範例3
範例4 範例5 範例6
範例7 範例8 範例9

將其中的樣例文字替換為您想要的內容，即可成為一個具有實際作用的表格。

使用工具列 編輯

 
 
編輯器工具列

要自動插入一個表格時，可點擊工具列上的插入表格按鈕： 或 。即出現插入表格設置對話方塊，預設設置如下所示。取消「添加標題行」，表格標題行即消失；取消「顯示邊框」，表格邊框即消失；選擇「使表格內容可排序」，表格標題行每個儲存格右側都會出現兩個上下排列黑色實心三角的排序標記，表格建立後，點擊某儲存格的排序標記即可以該儲存格內容對表格進行重新排序。行與列下的數字即為之後所建立表格的行與列的數量。

 
插入表格設置對話方塊

以上圖所示設置點擊插入後，在游標所在處即會出現以下表格代碼。其中，!與!之間為一個標題行儲存格；|與|之間為一個儲存格；|-表示轉至下一行。 

{| class="wikitable"
|-
! 標題文字 !! 標題文字 !! 標題文字
|-
| 範例 || 範例 || 範例
|-
| 範例 || 範例 || 範例
|-
| 範例 || 範例 || 範例
|}

提交編輯後，該表格即顯示為：

標題文字 標題文字 標題文字
範例 範例 範例
範例 範例 範例
範例 範例 範例

Pipe語法教程 編輯

Pipe代碼功能與HTML表格標記完全相同。

表格起始由大括號（{和}）及豎線字元（|）組成。{|表示表格開始，|}表示表格結束。每個表格必須有完整的開始符與結束符。但是僅包含本段語法是錯誤的，請繼續閱讀下面的說明，有「實際顯示」展示框的才是正確語法。

{|

表格內容

|}

表格標題可省略。其由一個豎線和加號（+）組成（|+）。其後即添加標題內容。

{|

|+ 標題
表格內容

|}

添加新行由一個豎線和連字元（-）組成（|-）。添加該代碼後，表格代碼將轉至下一行。

{|

|+ 表格標題
|-
第一行內容
|-
第二行內容

|}

儲存格由豎線組成。在某一行代碼後添加豎線即會在該行添加一個儲存格。若各行儲存格數量不等，則空出。

{|

|+ 表格標題
|-
| 第一行第一個儲存格
|-
| 第二行第一個儲存格
| 第二行第二個儲存格

|}

同一行的儲存格也可通過兩個豎線寫於代碼中的同一行中，以縮短版面。

{|

|+ 表格標題
|-
| 儲存格1 || 儲存格2 || 儲存格3
|-
| 儲存格A
| 儲存格B
| 儲存格C

|}

儲存格代碼中的單個豎線字元是無法形成新儲存格的。兩個豎線字元或頭一個單個豎線字元，與另一個豎線字元之間的代碼可成為緊接着的一個儲存格的格式設置代碼，但可省略。餘下豎線字元及其他均歸入一個儲存格中，並顯示出來。

{| class="wikitable"

|-
| format modifier (格式设置不显示) | 余下所有内容 | （包括竖线） |将归入 | 第一个单元格||第二个单元格
|-
| format | 余下所有内容 ||format | 将归入 | 第二个单元格

|}

例如，可進行靠右，顏色等設置。

{| class="wikitable"

|-
| 单元格1（设置缺损）
|-
| style="text-align:right" | 儲存格2（靠右） || style="background: #FFB6C1" | 儲存格3（紅底色）

|}

即兩個||之間的|不能超過1個（除非你真的想在儲存格中顯示|）。

列標題通過以「! scope="col" |」取代「|」，「!! scope="col" |」取代「||」實現。列標題儲存格通常與普通儲存格不同，雖然會因為瀏覽器的不同而有所差異，但往往呈現為粗體和居中。

{| class="wikitable"

|+ 表格標題
! scope="col" | 列標題1
! scope="col" | 列標題2
! scope="col" | 列標題3
|-
! scope="col" | 列標題1 !! scope="col" | 列標題2 !! scope="col" | 列標題3
|-
| 儲存格1 || 儲存格2 || 儲存格3

|}

行標題通過將每行代碼第一個儲存格代碼的第一個「|」取代為「! scope="row" |」實現。

{| class="wikitable"

|+ 表格標題
! scope="col" | 列標題1
! scope="col" | 列標題2
! scope="col" | 列標題3
|-
! scope="row" | 行標題1
| 儲存格2 || 儲存格3
|-
! scope="row" | 行標題A
| 儲存格B
| 儲存格C

|}

可選參數可設置儲存格、行或整個表格。在表格未使用可選參數時是沒有邊框的，一般來說可以設置CSS樣式屬性border從而為儲存格添加邊框。

{|

|+ 表格標題
! scope="col" | 列標題1
! scope="col" | 列標題2
! scope="col" | 列標題3
|-
! scope="row" | 行標題1

| 儲存格2 || style="border: 2px red dashed"

但為了統一的維基百科視覺風格，通常使用的表格並不使用邊框，而直接使用類值「wikitable」（維基表格）的樣式。

{| class="wikitable"

|+ 表格標題
! scope="col" | 列標題1
! scope="col" | 列標題2
! scope="col" | 列標題3
|-
! scope="row" | 行標題1
| 儲存格2 || 儲存格3
|-
! scope="row" | 行標題A
| 儲存格B
| 儲存格C

|}

所以，一般使用的典型表格如下：

表格標題
列標題1 列標題2 列標題3
行標題1 儲存格2 儲存格3
行標題A 儲存格B 儲存格C

表格樣式 編輯

另外，維基表格的class參數可以添加不同的參數用於實現不同類型的表格，已知的有wikitable（通常的表格）， sortable （附加排序功能，行標題會出現排序按鈕），mw-collapsible（附加摺疊功能，生成沒摺疊的表格）、mw-collapsed（附加摺疊功能，與前一個參數同時使用，生成已摺疊的表格）。在沒class參數時，會生成沒邊框的表格。

在使用 sortable 時，可以通過對特定儲存格的style設定格添加data-sort-value屬性來指定該儲存格的排序根據值。 

{| class="wikitable"
!A!!B!!C
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}

{| class="wikitable sortable"
!A!!B!!C 
|-
|data-sort-value=abc|abc || def || ghi
|- 
|data-sort-value=jkl|jkl ||  mno || pqr
|-
|data-sort-value=stu|stu || vwx || yz
|}

{| class=" wikitable mw-collapsible "
!A!!B!!C 
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}

{| class="wikitable mw-collapsible  mw-collapsed"
!A!!B!!C 
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}

寬高 編輯

可對整個表格的寬度與高度，及某行的高度進行設置。要設置某列的寬度可通過設置該列的某個儲存格的寬度實現。若表格的寬度不足以顯示所有的列，或高度不足以顯示所有的行，表格的部分內容可能會缺失，其結果取決於瀏覽器的不同。

設置於{|後，為整個表格；設置於|-後，為該行；設置於|或||後，並與該儲存格內容之間以|分隔，則為該儲存格。

整個表格的高度一般都設定為固定值（單位為px、em等），某行的高度設定可以設為固定值也可以為一個變數。

1，高度為固定值

{| class="wikitable" style="width: 75%; height: 200px"

|-
| abc || def || ghi
|- style="height: 100px;"
| jkl || style="width: 200px;" | mno || pqr
|-
| stu || vwx || yz

|}

所以，整個表格共高200px，其中第2行的高度為100px的此種設置，表格寬高如下：

abc def ghi
jkl mno pqr
stu vwx yz

2，高度為因變數

a,設定某行的高度大小隨整個表格表格高度大小變化，需先設定整個表格高度為固定值，再用百分比%來設定單獨的某行高度（調解的佔整個表格高度的百分數數值 不能過小也不能過大，一般取值都小於100%）。


b,設定某行的高度大小隨本身行內文字的高度大小變化，其行內文字和整個表格的高度可以自己設定，也可以不單獨自設，即可以用系統給定的預設值。只需直接用百分比%或倍數N來設定，一般取值都大於100%（倍數大於1，可以不是整數），否則行內文字會被遮擋而無法完全顯示。

{| class="wikitable" style="width: 75%"

|-
| abc || def || ghi
|- style="line-height:1100%"
| jkl || style="width: 200px;" | mno || pqr
|-
| stu || vwx || yz

|}

所以，沒單獨自設整個表格的高度，其中第2行的高度是自身行內文字高度的11倍的此種設置，表格寬高如下：

abc def ghi
jkl mno pqr
stu vwx yz

列寬 編輯

設置列寬最簡單的方法即是設置該列某儲存格的寬度。注意，文字會自動換行適應列寬。

當存在標題行時，可在標題行的儲存格內設置：

{| class="wikitable"

! scope="col" style="width:50px" | 列1
! scope="col" style="width:100px" | 列2
! scope="col" style="width:200px" | 列3
|-
| 儲存格內的 || 儲存格1 || 儲存格2
|-
| 文字會依照 || 儲存格3 || 儲存格4
|-
| 列寬自動換行 || 儲存格5 || 儲存格6

|}

當不存在標題行時，可在第一行的儲存格內設置：

{| class="wikitable"

|-
| style="width:50px" | 該列寬為50像素
| style="width:100px" | 該列寬為100像素
| style="width:200px" | 該列寬為200像素
|-
| 儲存格1 || 儲存格2 || 儲存格3

|}

不換行 編輯

當表格的寬度橫跨這個頁面或受到其他模組的擠壓時，系統會自動對列寬進行調整，出現部分儲存格內容被換行。

若想保持某列不進行自動換行，則可在該列的除標題行儲存格外的其他儲存格內設置style="white-space:nowrap"或者class="nowrap"，即可實現。

顏色 編輯

可對表格的底色及字型顏色進行設置。對表格顏色的設置可通過以下幾種形式實現。第一種形式為快速設置，第二種形式為首選，而第三種形式為過時的HTML代碼，不建議使用。

這些模板可以快速設置表格顏色
{{yes}} {{partial}} {{no}}

如需進行手動設置：

「background」為底色，「color」為字型顏色。顏色參數可為已設定的英文代碼或十六進制顏色代碼，見顏色列表。

維基樣式「wikitable」預設的列標題及行標題的底色為#f2f2f2，普通儲存格的底色為#f9f9f9。

{|

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

|}

顏色參數可設置某儲存格、行或整個表格。設置於{|後，為整個表格；設置於|-後，為該行；設置於|或||後，並與該儲存格內容之間以|分隔，則為該儲存格。

儲存格顏色參數優先於行顏色參數，而行顏色參數優先於表格顏色參數，逐層覆蓋。要注意的是，沒有一種簡易的方法去設置某列的顏色，需要逐個儲存格進行設置。

{| style="background: yellow; color: green"

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

|}

所以，一般設置表格顏色如下：

合併儲存格 編輯

可通過結合使用「rowspan」和「colspan」合併儲存格。但排序樣式「sortable」會與「rowspan」衝突，使得儲存格無法合併，同時出現排序錯誤。

{| class="wikitable"

|-
| 列1 || 列2 || 列3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" | F
|-
| G
|-
| colspan="3" style="text-align: center;" | H

|}

邊框 編輯

表格通常沒有邊框，wikitable會添加灰色的邊框。邊框亦可通過樣式參數設置為其他形式。可設置style="border: 1px solid darkgray"使邊框為細實線。

{| class="wikitable" style="border: 1px solid darkgray;"

! style="width: 140px" | 左
! style="width: 150px" | 中
! style="width: 130px" | 右
|-
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|Caption when mouse-over image]]
| [[File:StarIconGreen.png|120px|Green stellar icon]]
|-
| 棕色星星 || 金色星星 || 綠色星星

|}

當圖片代碼不帶「thumb|」時，則不顯示圖片標題行。

顏色設置中的參數「darkgray」為深灰，與其他預設表格及文本框一致。其亦可改為其他已設定的英文代碼或十六進制顏色代碼。

{| class="wikitable" style="border: 1px solid darkgray;"

! style="width: 140px" | 左
! style="width: 150px" | 中
! style="width: 130px" | 右
|- style="text-align: center"
| style="border: 1px solid blue;" |
[[File:StarIconBronze.png|120px]]
| style="border: 1px solid #777777;" |
[[File:StarIconGold.png|120px|Caption when mouse-over image]]
| style="border: 1px solid #22AA55;" |
[[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align: center"
| 棕色星星 || 金色星星 || 綠色星星

|}

表格居中 編輯

表格預設靠左，可通過設置style="margin: auto"實現表格居中。但居中後文字非環繞表格，表格左右為空白。詳細可了解CSS關於margin屬性的設置。

{| class="wikitable" style="margin: auto;"

|+ '''单元格左对齐，表格居中'''
! scope="col" | 標題1標題1標題1
! scope="col" | 標題2
! scope="col" | 標題3
|-
| 儲存格1 || 儲存格2 || 儲存格3

|}

表格浮動 編輯

可通過設置「float」實現表格浮動。文字環繞於表格周圍。

要自動插入一個表格時，可點擊工具列上的插入表格按鈕：[[File:Vector toolbar insert table button.png]]或[[File:Button insert table.png]]。

{| class="wikitable" style="float: right;"
|+ '''单元格左对齐，表格居中'''
! scope="col" | 標題1
! scope="col" | 標題2
! scope="col" | 標題3
|-
| 儲存格1 || 儲存格2 || 儲存格3
|}
即出現插入表格設置對話方塊，預設設置如下所示。

取消「添加標題行」，表格標題行即消失；取消「顯示邊框」，表格邊框即消失；選擇「使表格內容可排序」，表格標題行每個儲存格右側都會出現兩個上下排列黑色實心三角的排序標記，表格建立後，點擊某儲存格的排序標記即可以該儲存格內容對表格進行重新排序。行與列下的數字即為之後所建立表格的行與列的數量。

內容垂直對齊 編輯

系統預設的垂直對齊為居中。當同行中，某儲存格內容較長時，內容較短儲存格的內容則為居中顯示，如下：

可使用「vertical-align」參數進行修改。「top」為頂對齊，「bottom」為底對齊。需逐行設置。

{| class="wikitable" style="width:550px"

|- style="vertical-align:top"
! scope="row" style="width:15%" | 列標題
| style="width:70%" | 內容較長的儲存格
| style="width:15%" | 內容較短的儲存格
|- style="vertical-align:bottom"
! scope="row" | 列標題
| 內容較長的儲存格
| 內容較短的儲存格

|}

儲存格內容縮排 編輯

儲存格內容可以使用CSS樣式縮排。

{| class="wikitable"

|-
| 未縮排的儲存格 || 儲存格
|-
| style="padding-left: 2em" | 縮排儲存格 || 儲存格

|}

巢狀 編輯

警告：因巢狀表格會導致有關無障礙的問題，所以應避免巢狀。詳見：en:Manual_of_Style_(accessibility)#Tables。

在以下表格中巢狀了七種不同的表格。注意，巢狀表格的代碼必須新開一行。

{| class="wikitable"

| 儲存格1
| style="text-align: center;" | 儲存格2
{| class="wikitable" style="background: #ABCDEF;"
| 巢狀
|-
| 表格
|}
 | style="vertical-align:bottom;" | 原表再次開始
| style="width:100px;" |
{| class="wikitable" style="background: #ABCDEF;"
 | A
|}
{| class="wikitable" style="background: #ABCDEF;"
| B || B
|}
 | style="width:50px;" |
{| class="wikitable" style="background: #ABCDEF; float:left;"
 | C
|}
{| class="wikitable" style="background: #ABCDEF; float: right;"
| D
|}

|}

實例 編輯

簡單的例子 編輯 

{| class="wikitable" 
| 单元1，行1
| 单元2，行1
| 单元3，行1
|-
| 单元1，行2
| 单元2，行2
| 单元3，行2
|-
| 单元1，行3
| 单元2，行3
| 单元3，行3
|}

將生成：

單元1，行1 單元2，行1 單元3，行1
單元1，行2 單元2，行2 單元3，行2
單元1，行3 單元2，行3 單元3，行3

複雜的例子 編輯

注意這個表格將右對齊。 

{| class="wikitable" style="text-align: right"
| 單元1, 行1
| rowspan="2" | 單元2, 行1+2
| 單元3, 行1
|-
| 單元1, 行2
| 單元3, 行2
|-
| 單元1, 行3
| 單元2, 行3
| 單元3, 行3
|}
單元1, 行1 單元2, 行1+2 單元3, 行1
單元1, 行2 單元3, 行2
單元1, 行3 單元2, 行3 單元3, 行3

同時使用COLSPAN和ROWSPAN： 

{| class="wikitable"
|-
! 欄目一 !! 欄目二 !! 欄目三
|-
| rowspan="2" | A
| colspan="2" style="text-align: center" | B
|-
| C
| D
|-
| colspan="2" style="text-align: center" | E
| F
|- 
| rowspan="3" | G
| H
| I
|- 
| J
| K
|-
| colspan="2" style="text-align: center" | L
|}

將有這樣的效果：

欄目一 欄目二 欄目三
A B
C D
E F
G H I
J K
L

巢狀表格 編輯 

{| class="wikitable"
| 原有
|
{| style="background: blue; color: white" class="wikitable"
| 插入
|-
| 表格
|}
| 表格
|}

生成：

原有
插入
表格
表格

帶標題的表格 編輯 

{| class="wikitable"
|+<span style="color: red;">'''这是标题'''</span> 请参看：
| [[建国]] || 1949年
|-
| [[国家]] || [[中华人民共和国]]
|-
| [[时区]] || [[UTC]]+8
|-
| [[国歌]] || [[义勇军进行曲]]
|-
| [[首都]] || [[北京]]
|}

帶顏色的表格 編輯

有兩種方法讓表格裏的字和背景出現顏色，下面是第一種： 

{| class="wikitable"
| style="background: navy; color: yellow" | 深藍底黃字
| style="background: gold; color: white"  | 金底白字
| style="background: teal; color: red" | 墨綠底紅字
| 沒設置顏色
|}

生成：

深藍底黃字 金底白字 墨綠底紅字 沒設置顏色

這種方法能指定單格的顏色和背景。如果要讓一行、一列或一整個表格都是同樣的顏色，則使用第二種方法： 

{| class="wikitable" style="background: yellow; color: blue"
|- 
| 這行是
| 藍字
| 黃背景
|- style="background: navy; color: white"
| 這行是
| 白字
| 深海藍
|-
| 這行
| style="background: white" | 比較
| 不一樣
|}

生成：

這行是 藍字 黃背景
這行是 白字 深海藍
這行 比較 不一樣

像其他參數一樣，顏色參數指定的優先順序為：單格→一行（列）→整個表格。關於所有可用的顏色，可參見色彩列表。

設定行高與列寬 編輯

整個表格的行高（height）和列寬（width），以及任意列的列寬可以進行設定。要設定任意行的行高，可以通過設定該行任意一個儲存格的行高來實現。如果存在行、列的高、寬沒有設定，那麼表格的顯示結果可能隨瀏覽器的不同而不同。 

{| style="width: 50%; height: 200px" class="wikitable"
|- 
| abc
| def
| ghi
|- style="height: 50px; width: 50px"
| jkl
| style="width: 120px" | mno
| pqr
|-
| stu
| vwx
| yz
|}

將得到這樣的結果：

abc def ghi
jkl mno pqr
stu vwx yz

層疊樣式表 編輯

WP內建了CSS，用于格式化表格，可以通過在{|之後加入class="wikitable"或使用{{wt}}模板使用。例如： 

{| class="wikitable" style="text-align: center"
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|}

或 

{{subst:wt}} style="text-align: center"
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|}

都可以得到：

乘法表
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9

XHTML HTML wikitext語法對照 編輯

  XHTML HTML & Wiki-td Wiki-pipe
表格 <table></table> <table></table> 
{|
|}
表格標題 <caption>caption</caption> <caption>caption</caption> 
|+ caption
行 <tr></tr> <tr> 
|-
儲存格 <td>cell1</td>
<td>cell2</td> 		<td>cell1
<td>cell2 
| cell1
| cell2
儲存格 <td>cell1</td> <td>cell2</td> <td>cell3</td> <td>cell1 <td>cell2 <td>cell3 
| cell1 || cell2 || cell3
標題儲存格 <th>heading</th> <th>heading 
! heading
範例表格
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標籤對於某些人來說會比一連串的垂直條（vertical slash，|），加號，驚嘆號等符號來的好讀
  • 無法直接從HTML型式的標籤複製。對於HTML表格概念不熟悉的人不容易理解。
  • 指定到模板參數時，含有「|」的部份需要改用Template:!
  • 對於換行很敏感；因為有時候是從樣版中的參數傳來，某些情形下須要特殊的技巧去處理在使用樣版時的參數問題。參考en:Help:Newlines and spaces

參見 編輯

外部連結 編輯

論述指引
帳戶相關
追蹤更改
編輯問題
進階功能
姊妹計劃
取自 "https://zh.wikipedia.org/w/index.php?title=Help:表格&oldid=79095735"