Help:表格

注意：當您編輯本頁面時，即同意以CC0協議授權您的貢獻。您可以在公有領域帮助页面找到更多信息。

“Tables”重定向至此。关于MediaWiki的数据库表结构，请参见Manual:数据库布局 。

表格可以在維基頁面中創建。 一般来说，除非必要，應盡量避免使用表格。 表格的標示語言通常複雜化了頁面的編輯。

Wiki表格标示摘要

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

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

基础

使用编辑工具栏创建表格

在wikitext编辑器中，将光标放在你想插入表格的地方。 然后在工具栏点击“高级”，再选择 表格按钮。 这会打开一个对话框。

在对话框中，你可以选择是否启用表头行、用边框定制表格或使表格可排序。 显示的是一个预览的例子。 你也可以设置你需要的行数和列数。然后，按“插入”按钮。

默认情况下会生成以下代码：

维基代码：

{| class="wikitable" style="margin:auto"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}

结果：

标题文本

标题文本	标题文本	标题文本
示例	示例	示例
示例	示例	示例
示例	示例	示例

极简语法

下面這個表格沒有外框與留白，但是顯示了最簡單的 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"|冰淇凌 |奶油 |酸奶酪 |}	購物清單 麵包和奶油 饼 小圆面包 丹麥甜糕餅 羊角麵包 奶酪 冰淇凌 奶油 酸奶酪

Note about large tables (noresize class)

The use of the wrapping div.noresize will ensure your table is optimized for mobile and is extremely important for large tables e.g. tables with more than 4 columns or large columns. Failure to use this element will cause your content to overlap UI elements e.g. the Vector 2022 sidebar or to break mobile display. This will cause the table to have a horizontal scroll bar when the table is too big for the content.

Shopping List
Areallyreallyreallyreallylongstringwillcauseyourtableto	Pie	Buns	Danish	Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
	Cheese	Ice cream		Butter	Yogurt

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

标题和标题行的属性

属性可以添加到标题和标题行，如下所示。

您输入的	您得到的
{| class="wikitable" |+ style="caption-side:bottom; color:#e76700;"|''食品和配餐'' |- ! style="color:green" | 水果 ! style="color:red" | 脂肪 |- |橘子 |奶油 |- |梨 |饼 |- |苹果 |冰淇凌 |}	食品和配餐 水果 脂肪 橘子 奶油 梨 饼 苹果 冰淇凌

边框宽度

如果“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 （本例中为第二个值），此时上下宽度相等，左右宽度相等。
• 当属性像 top 这样只有一个值时，right、bottom 和 left 的默认值都将是 top，四边的宽度均相等，这会产生一个规则的边框。这是一种简便写法。

另一种定义单元格四边宽度的方法是使用 "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中也是无效的。

“cellpadding”用于设置单元格边框与其内容之间的间隙。

CSS样式属性（覆盖HTML属性）需要明确长度单位（如果值不是0的话），例如“px”用于像素。

搭配 HTML 屬性與 CSS 樣式

CSS 樣式屬性可以同時搭配或不搭配其他HTML屬性。

您输入的	您得到的
{| 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"的示例

列宽

列宽可以通过如下方式添加。

您输入的：

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

您得到的：

此列列宽为屏幕宽度的85%
此列列宽为屏幕宽度的85%中的30%	此列列宽为屏幕宽度的85%中的70%

表头单元格的辅助功能

表格的表头单元格不会显式地指明自己究竟应用于哪些数据单元格（右侧同行的单元格，或下侧同列的单元格）。 当表格在可视的二维环境中渲染，这通常很容易看出来。

而当表格在非可视媒体上渲染时，你可以用表头单元格的 scope="row" 或 scope="col" 属性协助浏览器决定哪个表头单元格应用于选定单元格的描述（以便辅助功能助手复述单元格内容）。 在大多数简单表格的情况下，你要为第一行的表头单元格使用 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实现。 表格对齐由外边距控制。 如果一边设置固定外边距，其对边设置为“auto”，表格就会对齐至固定外边距的一边。 为了使表格居中，你需要把两边的外边距属性都设为“auto”。

一个右对齐表格的例子：

您输入的	您得到的
{| class="wikitable" style="margin-left: auto; margin-right: 0px;" | 橘子 | 苹果 |- | 面包 | 饼 |- | 奶油 | 冰淇凌 |} 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.	橘子 苹果 面包 饼 奶油 冰淇凌 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.

一个居中表格的例子：

您输入的	您得到的
{| class="wikitable" style="margin: auto;" | 橘子 | 苹果 |- | 面包 | 饼 |- | 奶油 | 冰淇凌 |} 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.	橘子 苹果 面包 饼 奶油 冰淇凌 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.

文本环绕表格

如果您将表格与页面的右侧或左侧对齐，表格后面的文本将在表格结尾处开始，并在表格周围留下空白。 为了让文字环绕在表格周围，你可以设置表格浮动而不用对齐表格。 这可以通过CSS属性float做到，它能指定表格是浮动在左侧还是右侧。 使用“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.

单元格内容对齐

单元格内容的对齐受两个不同的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）或者使用单行单元格标记（|| -6）。

CSS对比于属性

用CSS而不是border属性指定边框的表格会在小部分浏览器上渲染不正确。

列、列组和行组的公共属性

MediaWiki的表格语法目前并不支持为列（使用HTML元素‎<col />）、列组（HTML元素‎<colgroup>‎</colgroup>）和行组（HTML元素‎<thead>‎</thead>、‎<tbody>‎</tbody>和‎<tfoot>‎</tfoot>）指定公共属性。 即便使用HTML或XHTML语法，这些标准HTML元素也不受支持。

表格的所有行和单元格（表头和数据）都会渲染在一个没有属性和样式的隐式行组（HTML元素‎<tbody>‎</tbody>）里。

表格和可视化编辑器（VE）

另见： 帮助:可视化编辑器/用户指南

参见Phab: T108245: "Fully support basic table editing in the visual editor"。 见任务列表。已完成的任务会被划掉。单从那里的技术语言很难看出有哪些改进或新增特性，所以请在下方添加解释信息。

现在可以移动或删除行和列

点击一列或行的表头。 然后点击箭头。 在弹出的菜单中点击“移动”或“删除”。

插入空白行或列

在同样的弹出菜单中点击“插入”。

从网页复制表格到可视化编辑器

可以从网页上直接复制粘贴表格到可视化编辑器（VE）当中。 为保险起见，以上可以在一个沙盒中进行，然后检查表格在wikitext源代码模式下是否得当，以及在可视化编辑器和预览模式中是否正常显示。

辅助工具

• Excel2Wiki能让你从Excel、Apache OpenOffice、LibreOffice或Gnumeric中复制表格，然后转换为维基代码形式的表格。

參見

• 将表格的列排序
• 维基百科上的“帮助:表格”
• 帮助生成表格的可视化工具