幫助:表格

這個頁面「Help:表格」是萌娘百科的幫助文檔

• 本文用於介紹萌娘百科中一些特定功能的操作方法；
• 本文僅是一篇論述，不屬於方針或指引。如果本指南與相關方針或指引發生衝突或存在不一致的情況，請以方針或指引的條文為準。

MediaWiki提供了專門的語法來創建表格。當然您也可以用HTML來創建表格，不過維基語法通常情況下比HTML要寫的代碼更少。

Wiki表格標示摘要

{|	表格起始，必要。
|+	表格大標題，可選。每張表格只能出現一次，位於表格起始與第一行之間。
|-	表格行，用於將行與行之間分隔開來。表格起始與第一行之間不必添加表格行。
!	表格標題單元格，可選。在行首單獨使用（!）可以加一格標題，在同一行加入連續的表格標題可以使用（!!）。
|	表格內容單元格，可選。在行首單獨使用（|）可以加一格內容，在同一行內加入連續的表格內容可以使用（||）。
|}	表格結束，必要。

• 上述符號必須出現在新行的開頭（除||與!!）。行開頭的空格會被忽略。
• 除表格結束符號以外，每個符號都可以添加HTML屬性，屬性必須與該符號在同一行。請使用一個空格隔開每一項屬性。
  • 在表格起始行添加 class="wikitable"可以引用使用維基表格樣式，每個符號後添加 style="*"可以定義符號定義範圍的CSS樣式，例如在表格起始符號後添加style="width: ?%; height: ?px"定義表格長寬。
  • 單元格與大標題（|、||、!、!!、|+）要用單線（|）來分隔屬性與內容。單元格的內容可以有一行或多行。
  • 表格起始與表格行（{|、|-）後面可以直接寫HTML屬性。
• 任何內容都：
  1. 可以直接寫在單元格符號後，前面可以添加HTML屬性，也可以不添加。
  2. 也可以另起一行。
• 如果單元格的內容用了必須另起一行的維基文本，如列表（*、#），標題（== 標題 ==），或者嵌套表格，則必須寫在新行。
• 如果要在表格內使用管道符（|），可以使用<nowiki>|</nowiki>，或者使用|，避免該符號被維基引擎解析。

基礎

下面這個表格沒有邊框，也沒有單元格間距，但是用了最簡單的方式展示維基表格是怎樣的結構。

輸入	輸出
{| |橘子 |蘋果 |- |麵包 |餅 |- |奶油 |冰淇凌 |}	橘子 蘋果 麵包 餅 奶油 冰淇凌

豎排看起來不夠清晰。如果想要看起來更像表格，可以用||將在同一行的單元格分開。

如果單元格中的文本包含了換行符，可使用<br/>替代。

輸入	輸出
{| |橘子||蘋果||更多 |- |麵包||餅||更多 |- |奶油||冰<br />淇淋||和<br />更多 |}	橘子 蘋果 更多 麵包 餅 更多 奶油 冰 淇淋 和 更多

單元格內，首尾的空格不影響實際的表現形式。

輸入	輸出
{| | 橘子 || 蘋果 || 更多 |- | 麵包 || 餅 || 更多 |- | 奶油 || 冰淇凌 || 以及更多 |}	橘子 蘋果 更多 麵包 餅 更多 奶油 冰淇凌 以及更多

當然，單元格內也可以輸入更長的文本，或者更複雜的維基語法。

輸入

輸出

{| |Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | * Lorem ipsum dolor sit amet * consetetur sadipscing elitr * sed diam nonumy eirmod tempor invidunt |}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt

標題單元格

標題單元格可以用!（感嘆號）替代|（管道符號）表示。

標題單元格通常顯示為粗體，並默認居中。

輸入	輸出
{| ! 物品 ! 數量 ! 價格 |- |橘子 |10 |7.00 |- |麵包 |4 |3.00 |- |奶油 |1 |5.00 |- ! style="color:red" | 總計 | |15.00 |}	物品 數量 價格 橘子 10 7.00 麵包 4 3.00 奶油 1 5.00 總計 15.00

請注意，標題單元格前如果要添加HTML屬性，屬性與後面的單元格內容用豎線|分隔。（請注意上述例子中「總計」是如何添加屬性的。）

標題

表格標題可以添加到任何表格頂部，如下所示。

輸入	輸出
{| |+食品和配餐 |- |橘子 |蘋果 |- |麵包 |餅 |- |奶油 |冰淇凌 |}	食品和配餐 橘子 蘋果 麵包 餅 奶油 冰淇凌

class="wikitable"

添加class="wikitable"可以為表格添加：淺灰色背景、可見邊框、內邊距、左對齊的基本樣式，讓其更像維基表格。

這是一個HTML屬性，作用於整個表格，因此應當寫在表格起始符號{|用於放置屬性的地方。

如果需要在模板內添加表格，建議使用{{Wikitable}}模板，降低編寫和閱讀的難度。

輸入	輸出
{| class="wikitable" |+食品和配餐 |- |橘子 |蘋果 |- |麵包 |餅 |- |奶油 |冰淇凌 |}	食品和配餐 橘子 蘋果 麵包 餅 奶油 冰淇凌

跨行和跨列

您可以在單元格屬性中加入colspan與rowspan屬性進行高級布局。

輸入	輸出
{| class="wikitable" !colspan="6"|購物清單 |- |rowspan="2"|麵包和奶油 |餅 |小圓麵包 |丹麥甜糕餅 |colspan="2"|羊角麵包 |- |奶酪 |colspan="2"|冰淇凌 |奶油 |酸奶酪 |}	購物清單 麵包和奶油 餅 小圓麵包 丹麥甜糕餅 羊角麵包 奶酪 冰淇凌 奶油 酸奶酪

上述例子中：

• 整個表格是一個3行6列的表格。
• 第一行：「購物清單」橫跨6列，因此colspan="6"。
• 第二行：「麵包和奶油」橫跨2行，因此rowspan="2"。同時「麵包和奶油」還占據了1格。剩下5格分別是「餅」、「小圓麵包」、和「丹麥甜糕餅」（2格）。
• 第三行：由於「麵包和奶油」已經橫跨兩行，因此本行只需要5格即可。5格分別是「奶酪」、「冰淇凌」（2格）、「奶油」、「酸奶酪」。

HTML 屬性

表格可以添加HTML屬性。更多屬性請參考W3C的HTML表格規格頁面（英文）。

表格屬性

表格屬性添加到{|後，應用於整個表格。

輸入	輸出
{| class="wikitable" style="text-align: center; color: green;" |橘子 |蘋果 |12,333.00 |- |麵包 |餅 |500.00 |- |奶油 |冰淇凌 |1.00 |}	橘子 蘋果 12,333.00 麵包 餅 500.00 奶油 冰淇凌 1.00

添加的屬性分別為：

• 使用維基表格樣式
• 文字居中
• 文字顏色為綠色

單元格屬性

單元格可以添加屬性，作用於單個單元格。

輸入	輸出
{| class="wikitable" | 橘子 | 蘋果 | style="text-align:right;" | 12,333.00 |- | 麵包 | 餅 | style="text-align:right;" | 500.00 |- | 奶油 | 冰淇凌 | style="text-align:right;" | 1.00 |}	橘子 蘋果 12,333.00 麵包 餅 500.00 奶油 冰淇凌 1.00

每行最後一個單元格添加的屬性

• 文字向右對齊

一行內有多個單元格時，也可以添加單元格屬性。 注意單元格是被||分隔的，且每個單元格的屬性和內容是被|分隔的。

輸入	輸出
{| class="wikitable" | 橘子 || 蘋果 || style="text-align:right;" | 12,333.00 |- | 麵包 || 餅 || style="text-align:right;" | 500.00 |- | 奶油 || 冰淇凌 || style="text-align:right;" | 1.00 |}	橘子 蘋果 12,333.00 麵包 餅 500.00 奶油 冰淇凌 1.00

行屬性

可以給某一整行添加屬性，作用域為添加處正下相鄰的一行。

輸入	輸出
{| class="wikitable" | 橘子 | 蘋果 | style="text-align:right;"| 12,333.00 |- | 麵包 | 餅 | style="text-align:right;"| 500.00 |- style="font-style: italic; color: green;" | 奶油 | 冰淇凌 | style="text-align:right;"| 1.00 |}	橘子 蘋果 12,333.00 麵包 餅 500.00 奶油 冰淇凌 1.00

第三行添加的屬性：

• 斜體
• 字體顏色為綠色

邊框

邊框用border來表示，單位為像素。

輸入	輸出
{| border="1" style="border-collapse:collapse" | 橘子 | 蘋果 |- | 麵包 | 餅 |}	橘子 蘋果 麵包 餅

表格添加的屬性：

• 邊框寬度為1像素

邊框寬度

CSS樣式border-width可以更改寬度。

輸入	輸出
{|style="border-style: solid; border-width: 20px" | 您好！ |}	您好！

如果border-width後面跟着四個值，四個數字分別代表上、右、下、左邊框的寬度（順時針↑→↓←）。

輸入	輸出
{|style="border-style: solid; border-width: 10px 20px 100px 0" | 您好！ |}	您好！

少於四個值時：

• 三個值：上、中（左右）、下
• 兩個值：上下、左右
• 一個值：同時影響四個邊框

如果實在記不清，也可以用border-left、border-right、border-top和border-bottom表示。

輸入	輸出
{|style="border-left:solid 10px black;border-right:solid 20px black;border-top:solid 30px black;border-bottom:solid 40px black;" align="center" | 您好！ |}	您好！

注意：

• HTML屬性（如width、border、cellspacing、cellpadding等）不需要單位（單位為像素）。
• CSS樣式需要單位（如果值不是0的話），例如px用於像素。
• 如何區分HTML和CSS屬性？
  • CSS樣式永遠寫在style中，屬性與值之間用冒號分隔。
  • HTML屬性的屬性名與值之間用等號分隔。
  • style本身其實也是一種HTML屬性（用等號分隔style和本體），只是style內部的內容為CSS樣式。

搭配HTML屬性與CSS樣式

兩者同時使用的情況：

輸入	輸出
{| class="wikitable" style="color:green; background-color:#ffffcc;" cellpadding="10" |橘子 |蘋果 |- |麵包 |餅 |- |奶油 |冰淇凌 |}	橘子 蘋果 麵包 餅 奶油 冰淇凌

內邊距

輸入	輸出
{|class="wikitable" | style="padding: 10px" | style="padding:10px"的示例 |- | style="padding: 50px" | style="padding:50px"的示例<br/><br/>指定每個單元格的內邊距 |- | style="padding:100px" | style="padding:100px"的示例 |}	style="padding:10px"的示例 style="padding:50px"的示例 指定每個單元格的內邊距 style="padding:100px"的示例

其他屬性

表格標題CSS樣式

輸入	輸出
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|''食品和配餐'' |- |橘子 |蘋果 |- |麵包 |餅 |- |奶油 |冰淇凌 |}	食品和配餐 橘子 蘋果 麵包 餅 奶油 冰淇凌

這裡將表格標題移動到了下方，並改變了顏色。

列寬

列寬可以通過如下方式添加。

輸入：

{| class="wikitable" style="width: 85%;"
| colspan="2" | 表格寬度占頁面寬度的85%。
|-
| style="width: 30%"| 此列占表格總寬度的30%
| style="width: 70%"| 此列占表格總寬度的70%
|}

輸出：

表格寬度占頁面寬度的85%。
此列占表格總寬度的30%	此列占表格總寬度的70%

作用於列的標題單元格

注意scope="col"的用法，它表示自己是所在列的標題單元格。scope="row"表示自己是作用於行的標題單元格。

輸入	輸出
{| class="wikitable" |- ! scope="col"| 項目 ! scope="col"| 數量 ! scope="col"| 價格 |- ! scope="row"| 麵包 | 0.3 kg | $0.65 |- ! scope="row"| 奶油 | 0.125 kg | $1.25 |- ! scope="row" colspan="2"| 總計 | $1.90 |}	項目 數量 價格 麵包 0.3 kg $0.65 奶油 0.125 kg $1.25 總計 $1.90

對齊

表格對齊

CSS樣式margin可以控制外邊距。當應用於表格時，可以修改表格與其它內容的邊距。

當這個值設置為auto時，會自動調節外邊距。

如果兩邊margin都設為auto，也就是兩側都是自動邊距，表格將居中。

右對齊（左側邊距自動）：

輸入	輸出
{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | 橘子 | 蘋果 |- | 麵包 | 餅 |- | 奶油 | 冰淇凌 |}	橘子 蘋果 麵包 餅 奶油 冰淇凌

居中（上下左右邊距均為自動）：

輸入	輸出
{| class="wikitable" style="margin: auto;" | 橘子 | 蘋果 |- | 麵包 | 餅 |- | 奶油 | 冰淇凌 |}	橘子 蘋果 麵包 餅 奶油 冰淇凌

文字環繞

CSS樣式float可以控制文字環繞樣式。

右側浮動：

輸入

輸出

{| class="wikitable" style="float:right; margin-left: 10px;" | 橘子 | 蘋果 |- | 麵包 | 餅 |- | 奶油 | 冰淇凌 |} Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

橘子 蘋果 麵包 餅 奶油 冰淇凌 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

水平對齊和垂直對齊

text-align和vertical-align這兩個CSS樣式控制着單元格內部文字的水平、垂直對齊方式。

其中text-align可以在整個表格、某行或某個單元格中指定，而vertical-align只能在單個行或單元格中指定。

text-align有三個常用選項：left（左對齊）、middle（居中）、right（右對齊）。

vertical-align也有三個常用選項：top（頂部對齊）、middle（居中）、bottom（底部對齊）。

輸入

輸出

{| class="wikitable" |- style="vertical-align:top;" | style="height:100px; width:100px; text-align:left;" | A | style="height:100px; width:100px; text-align:center;" | B | style="height:100px; width:100px; text-align:right;" | C |- style="vertical-align:middle;" | style="height:100px; width:100px; text-align:left;" | D | style="height:100px; width:100px; text-align:center;" | E | style="height:100px; width:100px; text-align:right;" | F |- style="vertical-align:bottom;" | style="height:100px; width:100px; text-align:left;" | G | style="height:100px; width:100px; text-align:center;" | H | style="height:100px; width:100px; text-align:right;" | I |}

A B C D E F G H I

其它

負數

如果你要在一行的第一個單元格中顯示負數（例如|-6），其中的負號可能會導致顯示不正常。因為MediaWiki軟件會認為你的標記並不是新單元格，而是新行 (|-)。 避免的方法是在負號前加空格（| -6）或者使用單行單元格標記（|| -6）。

摺疊表格

如要讓表格可以摺疊，請在class屬性中加入mw-collapsible：

輸入	輸出
{| class="wikitable mw-collapsible" ! 標題單元格 |- | 內容單元格 |}	標題單元格 內容單元格

如果要讓表格默認摺疊，則在mw-collapsible後再加入mw-collapsed即可。

輸入	輸出
{| class="wikitable mw-collapsible mw-collapsed" ! 標題單元格 |- | 內容單元格 |}	標題單元格 內容單元格

預覽的時候看不到摺疊按鈕是正常現象。如果輸入無誤，保存之後可以看到摺疊按鈕。

如果在要讓帶大標題的表格摺疊後顯示大標題，可以有以下選擇：

第一種方法：將大標題使用的|+換為跨列顯示使用的!colspan="（列数）"|（标题），將大標題一同視為標題、寫成雙標題格式。繼續使用|+可能會出現摺疊時大標題的顯示問題。

輸入	輸出
{| class="wikitable mw-collapsible mw-collapsed" ! colspan="2"|大標題單元格 |- ! 標題單元格1 !! 標題單元格2 |- | 內容單元格1 || 內容單元格2 |}	大標題單元格 標題單元格1 標題單元格2 內容單元格1 內容單元格2

第二種方法：使用Template:Hide#注意中關於Hide模板內嵌表格的解決方案一對表格格式重新編寫。請注意：該方法中表格內只需替換和表格相關參數有關的「|」，無需替換圖片等格式內的「|」。

但另請注意，這兩種方法在解決出發點上具有差異，在顯示上也有所不同，因此一般更推薦第一種方法。

通常條目編輯時不會出現大標題摺疊的情況，因此請不要濫用該兩種方法。

表格排序

如要讓表格標題具有排序功能，請在class屬性中加入sortable：

輸入	輸出
{| class="sortable" ! 食品 !! 配餐 |- | 橘子 || 蘋果 |- | 麵包 || 餅 |- | 奶油 || 冰淇凌 |}	食品 配餐 橘子 蘋果 麵包 餅 奶油 冰淇凌

請注意，僅在表格中有「表格標題單元格」時表格排序功能才生效，並僅在「表格標題單元格」中顯示功能按鈕。