用户:22963/MediaWiki表格用法

个人参考用，文章内容来自MediaWiki官网

表格可以在维基页面中创建。 一般来说，除非必要，应尽量避免使用表格。 表格的标示语言通常複杂化了页面的编辑。

Wiki表格标示摘要

{|	表格起始，必需
|+	表格 标题，选用；每张表格只能出现一次且介于表格起始与第一行
|-	表格行，第一行选用 -- wiki 引擎会假设是第一行
!	表格标题 储存格， 选用。 可以使用（!!）在同一行加入接续的表格标题或是单独使用（!）换新的一行 。
|	表格数据调用，可选。 可以使用（||）接续表格资料储存格或是单独使用（|）。
|}	表格末尾，必要

• 上述符号必须出现在新行的开头除了当在同一行中想要延续储存格所增用的双||与!!。然而，行开头的空格会被忽略。
• HTML 属性。 每一个符号，除了表格的末尾，可选择性的接受一或多个 HTML 属性。 属性必须与符号在同一行。 请使用一个空格隔开每一项属性。
  • 储存格与标题（|或是||，!或是!!，以及|+）持有表格内容。 所以要使用单线（|）来区隔属性与内容。 储存格内容可以都位在同一行或是换到另一行。
  • 表格与行的符号（{|与|-）并不直接持有内容。 在它们的属性之后请不要加入管线（|）。 如果你在表格与行符号的属性之后错误的加入管线符号，剖析器会将之删除 以及之后任何触及该出错管线的属性！
• 内容 (a) 可以任何选用的 HTML 属性之后跟著同一行它的储存格标记或是 (b) 储存格标记的下一行。 使用 wiki 标示语言的内容本身需要自新的一行开始，例如清单，表头，或是表格内接的表格，必须在它自个儿的新行。
  • 管道符号作为内容。 在表格中插入（|），可以使用<nowiki>|</nowiki>避免成为标示语言的一部分。

基础

下面这个表格没有外框与留白，但是显示了最简单的 wiki 表格标示语言的结构。

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

想要排列得更像表格，可以使用 wiki 标示语言||将储存格分开但又并排于同一行。 如果单元格中的文本包含了换行符，可使用br替代。

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

如下面的Wiki标示语言，单元格包含额外空格，这不影响实际表格的呈现。

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

您当然也可以在单元格中输入更长的文本或者更复杂的Wiki语法：

您输入的	输出效果
{| |从前有一个渔夫，家里很穷。他每天早上到海边去捕鱼，但是他自己立下一条规矩，每天至多撒四次网。 有一天早上，撒了三次网，什么都没捞着，他很不高兴。第四次把网拉拢来的时候，他觉得太重了，简直拉不动。他就脱了衣服跳下水去，把网拖上岸来。打开网一看，发现网里有一个黄铜胆瓶，瓶口用锡封着，锡上盖着所罗门的印。 渔夫一见，笑逐颜开：“我把这瓶子带到市上去，可以卖它十块金币。”他抱着胆瓶摇了一摇，觉得很重，里面似乎塞满了东西。他自言自语：“这个瓶里到底装的什么东西？我要打开来看个清楚，再拿去卖。”他从腰带上拔出小刀，撬去瓶口上的锡封，然后摇摇瓶子，想把里面的东西倒出来，但是什么东西也没有。他觉得非常奇怪。  | * 渔夫家里很穷。 * 渔夫每天早上都到海边去捕鱼。 * 渔夫每天至多撒四次网。 |}	从前有一个渔夫，家里很穷。他每天早上到海边去捕鱼，但是他自己立下一条规矩，每天至多撒四次网。 有一天早上，撒了三次网，什么都没捞着，他很不高兴。第四次把网拉拢来的时候，他觉得太重了，简直拉不动。他就脱了衣服跳下水去，把网拖上岸来。打开网一看，发现网里有一个黄铜胆瓶，瓶口用锡封着，锡上盖着所罗门的印。 渔夫一见，笑逐颜开：“我把这瓶子带到市上去，可以卖它十块金币。”他抱着胆瓶摇了一摇，觉得很重，里面似乎塞满了东西。他自言自语：“这个瓶里到底装的什么东西？我要打开来看个清楚，再拿去卖。”他从腰带上拔出小刀，撬去瓶口上的锡封，然后摇摇瓶子，想把里面的东西倒出来，但是什么东西也没有。他觉得非常奇怪。  渔夫家里很穷。 渔夫每天早上都到海边去捕鱼。 渔夫每天至多撒四次网。

表格头部

表格的头部可以通过使用“!”（感叹号）替代“|”（管道符号）创建。 表头通常显示为粗体，并默认居中。

您输入的	输出效果
{| ! 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

标题和标题行的属性

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

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

添加简单的一像素表格边框

一个为表格添加一像素宽的边框的例子：

您输入的	您输出的
{| 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 属性与 CSS 样式

CSS样式属性可以同时搭配或不搭配其他 HTML 属性

您输入的	您输出的
{| 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="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）。

CSS对战属性

Table borders specified through CSS rather than the border attribute will render incorrectly in a small subset of text browsers.

常用列属性、列组和行组

The MediaWiki syntax for tables currently offers no support for specifying common attributes for columns (with the HTML element col), column groups (HTML element colgroup) and row groups (HTML elements thead, tbody and {tfoot). Those standard HTML elements are not accepted even in their HTML or XHTML syntax.

All the rows and cells (header or data) of the table are rendered within a single implicit row group (HTML element <tbody></tbody>) without any attributes or styles.

参见

• Sorting rows of a table

• m:Help:Sorting

• w:Help:Tables

• Easy tool that helps generating tables

备注