表格符号
| 符号
|
描述
|
| {| |
表格开始标识（必须），表格的起始部分。
|
| |+ |
表格大标题格（非必须），位于表格头和第一行之间，每个表格仅能使用一次。
|
| |- |
表格间隔，用于间隔每行。
|
| ! |
表格每列标题格（非必须），表格每一列的标题。可以在同行用!!或在单独一行的行首处用!表示下一列。
|
| | |
表格单元格，表格每一列的内容。可以在同行用||或在单独一行的行首处用|表示下一列。
|
| |} |
表格结束标识（必须），表格的结束部分。
|
- 每个表格符号必须用在一行的开头（除了||和!!）。行开头的空格会被忽略。
- 除|}以外的表格符号都可以使用HTML属性。属性必须与符号在同一行，请使用一个空格隔开每一项属性。
- 单元格与标题（|和||，!和!!，以及|+）持有表格内容，要使用管道符（|）来间隔属性与内容。内容可以都放在同一行或是换到另一行。
- 表格开始标识与间隔（{|，|-和|}）并不持有表格内容。 请不要在它们的属性之后加入|。 如果想要在表格与行符号的属性之后错误的加入管线符号，属性将不起作用。
- 如果要将|作为内容使用，可以使用|或{{!}}来代替。
基础
使用编辑器生成
在源代码编辑器中，将光标放在想插入表格的地方。然后在工具栏中，按“高级”，然后按下“表格”按钮，会弹出一个模态框。
在模态框中，可以选择是否启用表头行、用边框定制表格或使表格有序化，也可以设置需要的行数和列数。接着按下“插入”按钮。
默认参数生成的表格如下：
| 用户键入
|
输出效果
|
{| class="wikitable"
|+ 标题文本
|-
! 标题文本 !! 标题文本 !! 标题文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
|
标题文本
| 标题文本 |
标题文本 |
标题文本
|
| 示例 |
示例 |
示例
|
| 示例 |
示例 |
示例
|
| 示例 |
示例 |
示例
|
|
热身
下面这个表格没有边框和空格，它用了最简单的方式展示wiki表格的结构。
| 用户键入
|
输出效果
|
{|
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌
|}
|
|
如果想要使得表格源代码更具可读性，可以在同一行使用||来间隔内容。
可使用<br>来换行。
| 用户键入
|
输出效果
|
{|
|橘子||苹果||更多
|-
|面包||饼||更多
|-
|奶油||冰<br>淇淋||和<br>更多
|}
|
| 橘子 |
苹果 |
更多
|
| 面包 |
饼 |
更多
|
| 奶油 |
冰
淇淋 |
和
更多
|
|
单元格内，首尾的空格不影响实际的输出效果。
| 用户键入
|
输出效果
|
{|
| 橘子 || 苹果 || 更多
|-
| 面包 || 饼 || 更多
|-
| 奶油 || 冰淇凌 || 以及更多
|}
|
| 橘子 |
苹果 |
更多
|
| 面包 |
饼 |
更多
|
| 奶油 |
冰淇凌 |
以及更多
|
|
也可以在单元格中输入更长的文本或者更复杂的wikitext：
| 用户键入
|
输出效果
|
{|
|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
|-
!总计
|
|15.00
|}
|
| 项
|
数量
|
价格
|
| 橘子
|
10
|
7.00
|
| 面包
|
4
|
3.00
|
| 奶油
|
1
|
5.00
|
| 总计
|
|
15.00
|
|
class="wikitable"
添加class="wikitable"可以为表格添加：粗体大标题、每列标题白色背景、黑色边框的基本样式。
| 用户键入
|
输出效果
|
{| class="wikitable"
|+食品和配餐
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌
|}
|
|
跨行和跨列
可以在单元格或每列标题格中使用colspan与rowspan属性进行高级布局。
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的相关属性来添加边框。
一个示例如下：
| 用户键入
|
输出效果
|
{| border: 1px solid #fff;
| 橘子
| 苹果
|-
| 面包
| 饼
|}
|
|
上述例子中的边框属性：1像素宽度、默认样式、白色。
边框宽度
使用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属性与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%"| 此列占表格总宽度的30%
| style="width: 70%"| 此列占表格总宽度的70%
|}
输出内容：
| 表格宽度占页面宽度的85%。
|
| 此列占表格总宽度的30%
|
此列占表格总宽度的70%
|
对齐
表格对齐
CSS的margin属性用于控制元素的外边距。当应用于表格时，它可以修改表格与其他内容之间的边距。当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控制单元格内部文字的水平和垂直对齐方式。
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
|}
|
|
排序
给开始标识使用类sortable可以让表格变得可被排序。
给每列标题格使用类unsortable可以让此列变得不可被排序。
一个例子如下：
| 用户键入
|
输出效果
|
{| class="wikitable sortable"
|-
! 水果
! class="unsortable" |价格
|-
| 苹果 || £0.95
|-
| 橘子 || £0.85
|-
| 梨 || £1.15
|-
| 山竹 || £1.05
|}
|
| 水果
|
价格
|
| 苹果 |
£0.95
|
| 橘子 |
£0.85
|
| 梨 |
£1.15
|
| 山竹 |
£1.05
|
|
其他
负数
如果要在一行的第一个单元格中显示负数（例如|-6），其中的负号可能会导致显示不正常。因为MediaWiki软件会认为这个标记并不是新单元格，而是新行 (|-)。
避免的方法是在负号前加空格（| -6）或者使用单行单元格标记（|| -6）。
常用的列属性、列组和行组
HTML元素<col />、<colgroup></colgroup>、<thead></thead>、<tbody></tbody>和<tfoot></tfoot>的属性目前无法使用。
所有的行和单元格（包括头部和数据单元格）都被渲染在一个隐式的行组（HTML元素<tbody></tbody>）中，没有任何属性或样式。
CSS边框属性
通过CSS指定的表格边框，与使用HTML属性border的表格边框相比，在一小部分的文本浏览器中会渲染不正确。
辅助工具
Excel2Wiki可以将Excel、Apache OpenOffice、LibreOffice或Gnumeric中的表格转换为wikitext表格。
