幫助:表格

該作品依照CC0 1.0 通用 公共領域貢獻協議進行共享。

---

致內容貢獻者：請在摘要欄中指明作者姓名、名稱，作品名稱以及出處，並標明是否對原始作品作了修改。
出處、作品名稱：Help:表格 - MediaWiki，貢獻者見前述頁面歷史。對繁體漢字、用詞作了簡化處理。
修改後的版本仍在前述協議下共享。
由於源頁面的更新，本頁面的內容可能與來源有差異。

您可以使用便捷的Excel轉表格工具來實現轉換，見Help:工具。

表格可以在維基頁面中被創建。經驗上，除非必要，應儘量避免使用表格。表格的標示語言通常複雜化了頁面的編輯。

Wiki表格標示摘要

{|	表格起始，必需
|+	表格 標題，選用；每張表格只能出現一次且介於表格起始與第一行
|-	表格行，第一行選用 -- wiki 引擎會假設是第一行
!	表格標題 儲存格， 選用。 可以使用（!!）在同一行加入接續的表格標題或是單獨使用（!）換新的一行 。
|	表格數據調用，可選。 可以使用（||）接續表格資料儲存格或是單獨使用（|）。
|}	表格末尾，必要

• 上述符號必須出現在新行的開頭除了當在同一行中想要延續儲存格所增用的雙||與!!。然而，行開頭的空格會被忽略。
• HTML 屬性。 每一個符號，除了表格的末尾，可選擇性的接受一或多個 HTML 屬性。 屬性必須與符號在同一行。 請使用一個空格隔開每一項屬性。
  • 儲存格與標題（|或是||，!或是!!，以及|+）持有表格內容。 所以要使用單線（|）來區隔屬性與內容。 儲存格內容可以都位在同一行或是換到另一行。
  • 表格與行的符號（{|與|-）並不直接持有內容。 在它們的屬性之後請不要加入管線（|）。 如果你在表格與行符號的屬性之後錯誤的加入管線符號，剖析器會將之刪除 以及之後任何觸及該出錯管線的屬性！
• 內容 (a) 可以任何選用的 HTML 屬性之後跟着同一行它的儲存格標記或是 (b) 儲存格標記的下一行。 使用 wiki 標示語言的內容本身需要自新的一行開始，例如清單，表頭，或是表格內接的表格，必須在它自個兒的新行。
  • 管道符號作為內容。 在表格中插入（|），可以使用<nowiki>|</nowiki>避免成為標示語言的一部分。

基礎

下面這個表格沒有外框與留白，但是顯示了最簡單的 wiki 表格標示語言的結構。

您輸入的	您輸出的
{| |橘子 |苹果 |- |面包 |饼 |- |奶油 |冰淇凌 |}	橘子 蘋果 麵包 餅 奶油 冰淇凌

想要排列得更像表格，可以使用 wiki 標示語言||將儲存格分開但又並排於同一行。 如果單元格中的文本包含了換行符，可使用<br/>替代。

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

如下面的Wiki標示語言，單元格包含額外空格，這不影響實際表格的呈現。

您輸入的	輸出效果
{| | 橘子 || 苹果 || 更多 |- | 面包 || 饼 || 更多 |- | 奶油 || 冰淇凌 || 以及更多 |}	橘子 蘋果 更多 麵包 餅 更多 奶油 冰淇凌 以及更多

您當然也可以在單元格中輸入更長的文本或者更複雜的Wiki語法：

您輸入的

輸出效果

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

表格頭部

表格的頭部可以通過使用「!」（感嘆號）替代「|」（管道符號）創建。 表頭通常顯示為粗體，並默認居中。

您輸入的	輸出效果
{| ! style="text-align:left;"| 项 ! 金额数量 ! 价钱 |- |橘子 |10 |7.00 |- |面包 |4 |3.00 |- |奶油 |1 |5.00 |- !总计 | |15.00 |}	項 金額數量 價錢 橘子 10 7.00 麵包 4 3.00 奶油 1 5.00 總計 15.00

當使用屬性作為標頭「項目」時，需使用一個豎線條「|」分隔。 而不是感嘆號「!」。

標題

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

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

class="wikitable"

通過添加 class="wikitable" ，可以使表格實現：淺灰色背景、可見邊框、內邊距、左對齊的基本樣式。

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

HTML 列距和行距

您可以在單元格可以使用HTML colspan與rowspan屬性進行高級布局。

您輸入的	輸出效果
{| class="wikitable" !colspan="6"|购物清单 |- |rowspan="2"|面包和奶油 |派 |小圆面包 |丹麦甜糕饼 |colspan="2"|羊角面包 |- |奶酪 |colspan="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="1" style="border-collapse:collapse" | 橘子 | 苹果 |- | 面包 | 饼 |}	橘子 蘋果 麵包 餅

邊框寬度

如果「border-width:」的值只有一個的話，值將應用於所有邊框。

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

如果「border-width:」多於一個值時，四個數字分別代表頂部，右側，底部，左側的寬度（請記住順時針順序↑→↓←）。

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

當少於四個值時：

• 當屬性像top, right, bottom這樣只有三個值時，left屬性的默認值是right（本例中為第二個值），此時左右寬度相等。
• 當屬性像top, right 這樣只有兩個值時，bottom 屬性的默認值是 top（本例中為第二個值），left 屬性的默認值是 right （本例中為第二個值），此時上下寬度相等，左右寬度相等。
• one value i.e. top: then the default value for right is the one of top and it is the same for bottom and left. The fourth width are the same and build a regular border. This is a writing shortcut.

另一種定義單元格四邊寬度的方法是使用 "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=」）不需要任何長度單位（假定為像素單位）。 它們在HTML 5中也是無效的。
• CSS樣式屬性（覆蓋HTML屬性）需要明確長度單位（如果值不是0的話），例如「px」用於像素。

搭配 HTML 屬性與 CSS 樣式

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

Padding

You type	You get
{|class=wikitable | style="padding: 10px" | style="padding:10px"的示例 |- | style="padding: 50px" | style="padding:50px"的示例<br/><br/>指定'''每个单元格'''的padding |- | style="padding:100px" | style="padding:100px"的示例 |}	style="padding:10px"的示例 style="padding:50px"的示例 指定每個單元格的padding style="padding:100px"的示例

屬性

屬性可以添加到標題和標題行，如下所示。

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

列寬

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

您輸入的：

{| class="wikitable" style="width: 85%;"
| colspan="2" | 此列列宽为屏幕宽度的85%。
|-
| style="width: 30%"| '''此列列宽为屏幕宽度的85%中的30%'''
| style="width: 70%"| '''此列列宽为屏幕宽度的85%中的70%'''
|}

您輸出的：

此列列寬為屏幕寬度的85%
此列列寬為屏幕寬度的85%中的30%	此列列寬為屏幕寬度的85%中的70%

表頭單元格的輔助功能

與承載數據的單元格（在表頭單元格同一列的下面，或表頭單元格同一行的右面）相比，表頭單元格並不是十分特殊的單元格。 When the table is rendered in a visual 2D environment, this is usually easy to infer.

However when tables are rendered on non-visual media, you can help the browser to determine which table header cell applies to the description of any selected cell (in order to repeat its content in some accessibility helper) using a scope="row" or scope="col" attribute on table header cells. In most cases with simple tables, you'll use scope="col" on all header cells of the first row, and scope="row" on the first cell of the following rows:

您輸入的	您輸出的
{| 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實現。 表格對齊由外邊距控制。 A fixed margin on one side will make the table to be aligned to that side, if on the opposite side the margin is defined as auto. 為了使表格居中，你需要把兩邊的margin（外邊距）屬性都設為auto

一個右對齊表格的例子：

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

一個居中表格的例子：

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

文本環繞表格

如果您將表格與頁面的右側或左側對齊，表格後面的文本將在表格結尾處開始，並在表格周圍留下空白。 You can make the text to be wrapped around the table by making the table to float around the text instead of just aligning it. This can be achieved using the float CSS attribute, which can specify where the table floats to the right side or to the left. When using float, margins doesn't control table alignment and can be used to specify the margin between the table and the surrounding text.

您輸入的

您輸出的

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

單元格內容對齊

單元格內容的對齊受兩個不同CSS的屬性控制text-align和vertical-align控制。 text-align可以在表格、行或單個單元格中指定，而vertical-align只能在單個行或單元格中指定。

您輸入的

您輸出的

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