编辑教程:表格

什么是表格

Pipe代码语法

注意：Pipe代码Pipe代码功能与HTML表格标记完全相同。
表格起始由大括号（{和}）及竖线字符（|）组成。{|表示表格开始，|}表示表格结束。每个表格必须有完整的开始符与结束符。但是仅包含本段语法是错误的，有“实际显示”展示框的才是正确语法。

{| class="wikitable"
表格内容
|}

表格标题可省略。其由一个竖线（|）和加号（+）组成（|+）。其后即添加标题内容。

{| class="wikitable"
|+ 表格标题
表格内容
|}

添加新行由一个竖线（|）和连字符（-）组成（|-）。添加该代码后，表格代码将转至下一行。

{| class="wikitable"
|+ 表格标题
|-
第一行的内容
|-
第二行的内容
|}

单元格由竖线（|）组成。在某一行代码后添加竖线即会在该行添加一个单元格。若各行单元格数量不等，则空出。

<center>
{| class="wikitable"
|-
| 第一行第一个单元格
|-
| 第二行第一个单元格
| 第二行第二个单元格
|}
</center>

提交编辑后，该表格即显示为：

第一行第一个单元格
第二行第一个单元格	第二行第二个单元格

同一行的单元格也可通过两个竖线（||）写于代码中的同一行中，以缩短版面。

<center>
{| class="wikitable"
|+ 表格标题
|-
|示例1 || 示例2 || 示例3
|-
|示例A
|示例B
|示例C
|}
</center>

提交编辑后，该表格即显示为：

表格标题

示例1	示例2	示例3
示例A	示例B	示例C

同一行中的单个竖线字符是无法形成新单元格的。只有通过两个竖线字符或另起一行使用单个竖线字符才能生成新的单元格。但可以通过单个竖线字符为紧接着的一个单元格的格式设置代码
例如，可进行靠右，颜色等设置。（注意：即两个||之间的|不能超过1个）

<center>
{| class="wikitable" style="width:50%;"
|-
| align="left" | 示例1（靠左/默认） || align="center" | 示例2（居中）
|-
| align="right" | 示例3（靠右） || style="background: #FFC0CB" | 示例4（粉底色）
|}
</center>

提交编辑后，该表格即显示为：

示例1（靠左/默认）	示例2（居中）
示例3（靠右）	示例4（粉底色）

列标题通过以“! scope="col" |”取代“|”，“!! scope="col" |”取代“||”实现。列标题单元格通常与普通单元格不同，虽然会因为浏览器的不同而有所差异，但往往呈现为粗体和居中。

<center>
{| class="wikitable"
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="col" | 列标题1 !! scope="col" | 列标题2 !! scope="col" | 列标题3
|-
| 示例1 || 示例2 || 示例3
|}
</center>

提交编辑后，该表格即显示为：

表格标题

列标题1	列标题2	列标题3
列标题1	列标题2	列标题3
单元格1	单元格2	单元格3

行标题通过将每行代码第一个单元格代码的第一个“|”取代为“! scope="row" |”实现。

<center>
{| class="wikitable"
! scope="row" | 行标题A !! 行标题B 
| 示例1
|-
! scope="row" | 行标题A
! scope="row" | 行标题B 
| 示例2
|}
</center>

提交编辑后，该表格即显示为：

行标题A	行标题B	示例1
行标题A	行标题B	示例2

可选参数可设置单元格、行或整个表格。在表格未使用可选参数（即为显示代码中表格标题上方的代码）时是没有边框的，可使用border代码添加边框。

<center>
{| border="1"
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 示例2 || 示例3
|-
! scope="row" | 行标题A
| 示例B
| 示例C
|}
</center>

提交编辑后，该表格即显示为：

表格标题

列标题1	列标题2	列标题3
行标题1	示例2	示例3
行标题A	示例B	示例C

但为了统一的维基视觉风格，通常使用的表格并不使用边框，而直接使用类值“wikitable”（维基表格）的样式。

<center>
{| class="wikitable"
|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 示例2 || 示例3
|-
! scope="row" | 行标题A
| 示例B
| 示例C
|}
</center>

提交编辑后，该表格即显示为：

表格标题

列标题1	列标题2	列标题3
行标题1	单元格2	单元格3
行标题A	单元格B	单元格C

表格语法标示摘要

基本语法

{|	表格起始，必需	可以在这一行添加整个表格的预制样式 例如{|class="wikitable"....，wikitable就是mediawiki预制好的整体表格样式。 在这一行里还需可以添加style="...."来定义表格内的元素。具体语法需要查阅css和html相关的文档。
|+	表格标题，选用；每张表格只能出现一次且介于表格起始与第一行	这张表格的基本语法一行就使用的这个语法，表格内容外的一个表格标题。
|-	表格行，第一行选用 -- wiki 引擎会假设是第一行	同样可以在这一行里添加style="...."来控制这一行的行内样式
!	表格标题 储存格， 选用。 可以使用（!!）在同一行加入接续的表格标题或是单独使用（!）换新的一行 。
|	表格数据调用，可选。 可以使用（||）接续表格资料储存格或是单独使用（|）。
|}	表格末尾，必要

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

<center>
{| class="wikitable"
|+HTML表格
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
</center>

提交编辑后，该表格即显示为：

HTML表格

标题文字	标题文字	标题文字
示例	示例	示例
示例	示例	示例
示例	示例	示例

表格样式

使表格内容可排序

{| class="wikitable sortable"
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}

提交编辑后，表格显示为：

标题文字	标题文字	标题文字
示例	示例	示例
示例	示例	示例
示例	示例	示例

注意排序的内容中数字按照大小顺序，字母按照音序表顺序，而中文按照Unicode顺序。见下表

中文排序	数字	英文
甲	1	a
啊	10	b
卡	2	ab
一	100	ba

使表格内容可折叠

mw-collapsible（附加折叠功能，生成没折叠的表格）、mw-collapsed（附加折叠功能，与前一个参数同时使用，生成已折叠的表格）。

默认展开

{|class="wikitable mw-collapsible" style="width:100%"
|-
!'''表格折叠使用方法'''
|-
|
'''说明：'''使内容折叠。

'''用途：'''一般用于页面过长，将部分可选择性观看的内容折叠。

'''写法：'''在表格class=后加 mw-collapsible（此时为默认展开，可折叠）。
<br>
表格第一行为默认展示的内容，第二行开始到表格结尾可以折叠。
|}

表格折叠使用方法
说明：使内容折叠。 用途：一般用于页面过长，将部分可选择性观看的内容折叠。 写法：在表格class=后加 mw-collapsible（此时为默认展开，可折叠）。 表格第一行为默认展示的内容，第二行开始到表格结尾可以折叠。

默认折叠

{|class="wikitable mw-collapsible mw-collapsed" style="width:100%"
|-
!'''表格折叠使用方法'''
|-
|
'''说明：'''使内容折叠。

'''用途：'''一般用于页面过长，将部分可选择性观看的内容折叠。

'''写法：'''在表格class=后加 mw-collapsible（此时为默认展开，可折叠）。
<br>
在表格class=后再追加 mw-collapsed（此时为默认折叠，可展开）。
<br>
表格第一行为默认展示的内容，第二行开始到表格结尾可以折叠。
|}

表格折叠使用方法
说明：使内容折叠。 用途：一般用于页面过长，将部分可选择性观看的内容折叠。 写法：在表格class=后加 mw-collapsible（此时为默认展开，可折叠）。 在表格class=后再追加 mw-collapsed（此时为默认折叠，可展开）。 表格第一行为默认展示的内容，第二行开始到表格结尾可以折叠。

单列单元格不换行

当表格的宽度横跨这个页面或受到其他单元格的挤压时，则系统默认会对列宽进行调整，出现部分单元格内容被换行。
若想避免部分单元格内容被换行，可使用style="white-space:nowrap实现某列不自动换行（注意，在该列的除标题行单元格外添加该样式）

如何修改单元格的高度和宽度以及如何合并

修改表格高度

通过修改表格的css进行表格的高度扩展或者缩小，但请注意，更改后不止单个表格栏，同行的单元格也会被更改为相同的高度，宽度的单位可用px、%、em等
详细可以参考编辑教程:单位

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| style="height:50px"|高度设为50px
| 示例1
| 示例2
|-
| 示例3
| 示例4
| 示例4
|}

标题	标题	标题
高度设为50px	示例1	示例2
示例3	示例4	示例4

修改表格宽度

通过修改表格的css进行表格的宽度扩展或者缩小，但请注意，更改后不止单个表格栏，同列的单元格也会被更改为相同的宽度，宽度的单位可用px、%、em等
详细可以参考编辑教程:单位

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| style="width:300px"|宽度设为300px
| 示例1
| 示例2
|-
| 示例3
| 示例4
| 示例4
|}

标题	标题	标题
宽度设为300px	示例1	示例2
示例3	示例4	示例4

单元格合并项

可通过结合使用“rowspan”和“colspan”合并单元格。但排序样式“sortable”会与“rowspan”冲突，使得单元格无法合并，同时出现排序错误。

实例一：

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| rowspan="2" | 跨2行的内容
| 示例1
| 示例2
|-
| 示例3
| 示例4
|}

标题	标题	标题
跨2行的内容	示例1	示例2
	示例3	示例4

实例二：

{| class="wikitable"
|-
| 标题 || 标题 || 标题
|-
| colspan="2"| 跨2列的内容
| 示例1
|-
| 示例2
| 示例3
| 示例4
|}

标题	标题	标题
跨2列的内容		示例1
示例2	示例3	示例4

实例三：

{| class="wikitable"
|-
| 列1 || 列2 || 列3
|-
| rowspan="2" colspan="2" style="text-align: center;" | A
| B
|-
| C
|}

列1	列2	列3
A		B
		C

跨行：在单元格内容前加rowspan=n|
跨列：在单元格内容前加colspan=n|
注意单元格跨行跨列后其他行的内容问题。
{| class="wikitable"
|-
! rowspan=4|跨4行的标题 !!标题 !!标题!!标题
|-
| colspan=2|跨2列的内容 || 示例
|-
| rowspan=2|跨2行的内容 || 示例 || 示例
|-
| 示例 || 示例
|}

跨4行的标题	标题	标题	标题
	跨2列的内容		示例
	跨2行的内容	示例	示例
		示例	示例

表格如何居中

表格默认的样式是靠左侧，可通过设置“style="margin: 1em auto 1em auto;"”或“style="margin:0 auto;"”实现表格居中。但居中后该表格并非为环绕表格，经过此设置后的表格左右的内容为空白。

{| class="wikitable" style="margin: 1em auto 1em auto;"
|+ '''单元格左对齐，表格居中'''
! scope="col" | 标题1标题1标题1
! scope="col" | 标题2
! scope="col" | 标题3
|-
| 单元格1 || 单元格2 || 单元格3
|}

单元格左对齐，表格居中

标题1标题1标题1	标题2	标题3
单元格1	单元格2	单元格3

表格如何变为浮动表格

可通过设置“float”实现表格浮动。文字环绕于表格周围。
{| class="wikitable" style="float: right;"
|+ '''单元格左对齐，表格居中'''
! scope="col" | 标题1
! scope="col" | 标题2
! scope="col" | 标题3
|-
| 单元格1 || 单元格2 || 单元格3
|}
您可以通过该设置使得表格和文字处于同一行，但需要注意的是，该页面在不同的客户端看到的效果可能会有所区别。<br>
请尽可能避免其效果频繁使用（或者说避免被滥用）造成用户适配上的困难

可通过设置“float”实现表格浮动。文字环绕于表格周围。

单元格左对齐，表格居中

标题1	标题2	标题3
单元格1	单元格2	单元格3

您可以通过该设置使得表格和文字处于同一行，但需要注意的是，该页面在不同的客户端看到的效果可能会有所区别。
请尽可能避免其效果频繁使用（或者说避免被滥用）造成用户适配上的困难

表格内容垂直对齐

表格默认的垂直对齐为居中。当同行中，如果某一个单元格内容较长时，内容较短单元格的内容则会随着较长的单元格变为居中显示，如下图所示:

{| class="wikitable" style="width:550px" 
|-
! scope="row" width="15%"| 列标题
| width="70%" |内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。
| width="15%" |内容较短。
|-
! scope="row" | 列标题
|内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。
|内容较短。
|}

列标题	内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。	内容较短。
列标题	内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。	内容较短。

如果想要改变上述例子中的默认样式则可以使用“valign”参数进行修改。
其中“top”为顶对齐，“bottom”为底对齐。需逐行设置。

{| class="wikitable" style="width:550px"
|- valign="top"
! scope="row" width="15%" | 列标题
| width="70%" | 内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。
| width="15%" | 内容较短。
|- valign="bottom"
! scope="row" | 列标题
| 内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。
| 内容较短。
|}

列标题	内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。	内容较短。
列标题	内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长内容较长。	内容较短。

表格单元格内容如何缩进

{| class="wikitable" cellpadding="2"
|- 
| 未缩进的单元格 || 单元格
|- 
| style="padding-left: 3em" | 缩进单元格 || 单元格
|}

单元格的内容可以使用CSS中的样式进行内容缩进，关于CSS的单位详细可以参考编辑教程:单位

未缩进的单元格	单元格
缩进单元格	单元格

表格与颜色

利用CSS，可对表格的底色及字体颜色进行设置
修改项中“background”为底色，“color”为字体颜色。颜色参数可为已设定的英文代码或十六进制颜色代码
颜色参数可设置某单元格、行或整个表格。设置于{|后，即为整个表格进行设置；设置于|-后，则为该行进行设置；设置于|或||后，并与该单元格内容之间以|分隔，则为该单元格进行设置。
单元格颜色参数优先于行颜色参数，而行颜色参数优先于表格颜色参数，逐层覆盖。（即为CSS的就近设置标准，如果不理解可以参考一下父元素和子元素）

{| style="background: blue; color: white"
|-
| abc || def || ghi
|- style="background: red; color: black"
| jkl || mno || pqr
|-
| stu || style="background: pink" | vwx || yz
|}

abc	def	ghi
jkl	mno	pqr
stu	vwx	yz

其中

{| style="background: blue; color: white"
这是对表格进行设置（将表格底色变成蓝色，字体颜色变为白色）

|- style="background: red; color: black"
这是对整行进行设置（将表格底色变为红色，字体颜色变为黑色）

 style="background: pink" | vwx 
 这是针对于vwx的单元格进行的设置（将表格底色变为粉色）

表格嵌套

{| class="wikitable" 
| 在表格中插入一个表格
{| class="wikitable"
|1
|-
|098
|198
|}
| 在表格中插入另外一个表格
{| class="wikitable"
|2
|2077
|}
| 在表格中插入表格（一左一右）
{| class="wikitable" style="float:left;"
| 左边
|}
{| class="wikitable" style="float: right;"
| 右边
|}
|}

警告：嵌套表格会导致问题，应避免嵌套。

在表格中插入一个表格 1 098 198

在表格中插入另外一个表格 2 2077

在表格中插入表格（一左一右） 左边 右边

详细可以参考维基百科-帮助:表格 和MediaWiki-帮助:表格