Help:表格

This page is a translated version of the page Help:Tables and the translation is 100% complete.

注意：当您编辑本页面时，即同意以CC0协议授权您的贡献。您可以在公有领域帮助页面找到更多信息。

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

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

Wiki表格標示語法總結

{\|	表格起始，必要
\|+	表格標題，選用；只能存在於表格起始與表格row之間
\|-	表格row，第一row為選用 -- wiki引擎會認定是第一row
!	表格標題儲存格，選用。連續的表格標題儲存格可在同一行上透過雙重標記分隔（`!!`）來添加、或是從新行開始，每行僅含其專用的單一標記（`!`）。
\|	表格数据单元格，可选。連續的表格資料儲存格可在同一行上透過雙重標記分隔（`\|\|`）來添加、或是從新行開始，每行僅含其專用的單一標記（`\|`）。
\|}	表格末尾，必要

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

基础

使用编辑工具栏创建表格

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

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

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

Wiki程式碼：

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

结果：

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

极简语法

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

您输入的

您得到的

{|
|柳橙
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌
|}

柳橙	苹果
面包	饼
奶油	冰淇凌

想要排列得更像表格，可以使用 wiki 標示語言||將儲存格分開但又並排於同一row。如果单元格中的文本包含了换行符，可使用‎<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"|冰淇凌
|奶油
|酸奶
|}

購物清單
麵包和奶油	饼	小圆面包	丹麥酥	羊角面包
麵包和奶油	奶酪	冰淇凌		奶油	酸奶

關於大型表格的注意事項（noresize 類別）

使用自動換行的 div.noresize 元素可確保您的表格在行動裝置上獲得最佳化顯示，對於大型表格（例如超過4column或包含超大欄位的表格）尤為重要。若未使用此元素，您的內容將與UI元素發生重疊。例如Vector 2022的側邊欄或打破行動裝置的顯示效果。當表格的內容過大時，這將導致表格出現水平捲動條。

您输入：

<div class="noresize">
{| class="wikitable"
! colspan="6" |Shopping List
|-
| rowspan="2" |Areallyreallyreallyreallylongstringwillcauseyourtableto 
| Pie
| Buns
| Danish
| colspan="2" |Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
|-
| Cheese
| colspan="2" |Ice cream
| Butter
| Yogurt
|}
</div>

您得到：

Shopping List
Areallyreallyreallyreallylongstringwillcauseyourtableto	Pie	Buns	Danish	Croissantsmaycausetexttoincreasethesizeofyourcolumnsoitbreaksoutofthecontent area if you do not wrap the table with noresize.
Areallyreallyreallyreallylongstringwillcauseyourtableto	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

row的属性

你也可以將屬性加諸於個別的row。

您输入的

您得到的

{| 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”用于设置单元格边框与其内容之间的间隙。^[2]

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"的示例

column宽

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

您输入的：

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

您得到的：

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

表头单元格的辅助功能

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

而当表格在非可视媒体上渲染时，你可以用表头单元格的 scope="row" 或 scope="col" 属性协助浏览器决定哪个表头单元格应用于选定单元格的描述（以便辅助功能助手复述单元格内容）。在大多数简单表格的情况下，你要为第一row的表头单元格使用 scope="col"，以及为后续row的第一格使用 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可以在表格、row、或個別的单元格中指定，而vertical-align只能在单个row或单元格中指定。

您输入的

您得到的

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

注意事项

负数

如果你要在一行的第一个单元格中以负数开头（或求值为负数的模板参数），表格可能会出问题，因为|-字符会被解析成row标记、而不是单元格标记。避免的方法是在负号前加空格（| -6）或者使用单行单元格标记（|| -6）。

CSS对比于属性

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

column、column组和row组的共通属性

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

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

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

参阅： Help:可视化编辑器/用户指南

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

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

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

插入空白行或列

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

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

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

辅助工具

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

参阅

备注

↑ 表格可以直接借助HTML的表格元件來製作，或是透過wiki格式化程式碼予以定義。 HTML表格元件與相關的使用方式在各式的網頁都有詳細的說明，不在此贅述。 wiki程式碼的好處是以表格以字元符號所架構出來的，相較於HTML表格元件，可使得你更容易以文章編輯的角度看出表格的舖排樣子。
↑ HTML table cellpadding Attribute

[1] 表格可以直接借助HTML的表格元件來製作，或是透過wiki格式化程式碼予以定義。 HTML表格元件與相關的使用方式在各式的網頁都有詳細的說明，不在此贅述。 wiki程式碼的好處是以表格以字元符號所架構出來的，相較於HTML表格元件，可使得你更容易以文章編輯的角度看出表格的舖排樣子。

[2] HTML table cellpadding Attribute

[1]

[2]