For faster navigation, this Iframe is preloading the Wikiwand page for 帮助:表格.

帮助:表格

维基表格有多种形式,并可进行自定义。该页介绍的是建立维基表格的语法。尽管在维基百科中可以使用HTML语法创建表格,但是wikitext语法通常会更加简便。

一段最简单的表格代码是这样的:

{| class="wikitable"
|-
! 标题文字1 !! 标题文字2 !! 标题文字3
|-
| 示例1 || 示例2 || 示例3
|-
| 示例4 || 示例5 || 示例6
|-
| 示例7 || 示例8 || 示例9
|}

提交编辑后,该表格即显示为:

标题文字1 标题文字2 标题文字3
示例1 示例2 示例3
示例4 示例5 示例6
示例7 示例8 示例9

将其中的样例文字替换为您想要的内容,即可成为一个具有实际作用的表格。

使用工具栏[编辑]

编辑器工具栏

要自动插入一个表格时,可点击工具栏上的插入表格按钮:。即出现插入表格设置对话框,默认设置如下所示。取消“添加标题行”,表格标题行即消失;取消“显示边框”,表格边框即消失;选择“使表格内容可排序”,表格标题行每个单元格右侧都会出现两个上下排列黑色实心三角的排序标记,表格建立后,点击某单元格的排序标记即可以该单元格内容对表格进行重新排序。行与列下的数字即为之后所建立表格的行与列的数量。

插入表格设置对话框

以上图所示设置点击插入后,在光标所在处即会出现以下表格代码。其中,!与!之间为一个标题行单元格;|与|之间为一个单元格;|-表示转至下一行。

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

提交编辑后,该表格即显示为:

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

Pipe语法教程[编辑]

Pipe代码功能与HTML表格标记完全相同。

表格起始由大括号({和})及竖线字符(|)组成。{|表示表格开始,|}表示表格结束。每个表格必须有完整的开始符与结束符。但是仅包含本段语法是错误的,请继续阅读下面的说明,有“实际显示”展示框的才是正确语法。

{|

表格内容

|}

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

{|

|+ 标题
表格内容

|}

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

{|

|+ 表格标题
|-
第一行内容
|-
第二行内容

|}

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

{|

|+ 表格标题
|-
| 第一行第一个单元格
|-
| 第二行第一个单元格
| 第二行第二个单元格

|}

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

{|

|+ 表格标题
|-
| 单元格1 || 单元格2 || 单元格3
|-
| 单元格A
| 单元格B
| 单元格C

|}

单元格代码中的单个竖线字符是无法形成新单元格的。两个竖线字符或头一个单个竖线字符,与另一个竖线字符之间的代码可成为紧接着的一个单元格的格式设置代码,但可省略。余下竖线字符及其他均归入一个单元格中,并显示出来。

{| class="wikitable"

|-
| format modifier (格式设置不显示) | 余下所有内容 | (包括竖线) |将归入 | 第一个单元格||第二个单元格
|-
| format | 余下所有内容 ||format | 将归入 | 第二个单元格

|}

例如,可进行靠右,颜色等设置。

{| class="wikitable"

|-
| 单元格1(设置缺损)
|-
| style="text-align:right" | 单元格2(靠右) || style="background: #FFB6C1" | 单元格3(红底色)

|}

即两个||之间的|不能超过1个(除非你真的想在单元格中显示|)。

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

{| class="wikitable"

|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="col" | 列标题1 !! scope="col" | 列标题2 !! scope="col" | 列标题3
|-
| 单元格1 || 单元格2 || 单元格3

|}

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

{| class="wikitable"

|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C

|}

可选参数可设置单元格、行或整个表格。在表格未使用可选参数时是没有边框的,一般来说可以设置CSS样式属性border从而为单元格添加边框。

{|

|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1

| 单元格2 || style="border: 2px red dashed"

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

{| class="wikitable"

|+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C

|}

所以,一般使用的典型表格如下:

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

表格样式

另外,维基表格的class参数可以添加不同的参数用于实现不同类型的表格,已知的有wikitable(通常的表格), sortable (附加排序功能,行标题会出现排序按钮),mw-collapsible(附加折叠功能,生成没折叠的表格)、mw-collapsed(附加折叠功能,与前一个参数同时使用,生成已折叠的表格)。在没class参数时,会生成没边框的表格。

在使用 sortable 时,可以通过对特定单元格的style设定格添加data-sort-value属性来指定该单元格的排序根据值。

{| class="wikitable"
!A!!B!!C
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
{| class="wikitable sortable"
!A!!B!!C 
|-
|data-sort-value=abc|abc || def || ghi
|- 
|data-sort-value=jkl|jkl ||  mno || pqr
|-
|data-sort-value=stu|stu || vwx || yz
|}
{| class=" wikitable mw-collapsible "
!A!!B!!C 
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}
{| class="wikitable mw-collapsible  mw-collapsed"
!A!!B!!C 
|-
| abc || def || ghi
|- 
| jkl ||  mno || pqr
|-
| stu || vwx || yz
|}

宽高

可对整个表格的宽度与高度,及某行的高度进行设置。要设置某列的宽度可通过设置该列的某个单元格的宽度实现。若表格的宽度不足以显示所有的列,或高度不足以显示所有的行,表格的部分内容可能会缺失,其结果取决于浏览器的不同。

设置于{|后,为整个表格;设置于|-后,为该行;设置于|或||后,并与该单元格内容之间以|分隔,则为该单元格。

整个表格的高度一般都设定为固定值(单位为px、em等),某行的高度设定可以设为固定值也可以为一个变量。

1,高度为固定值

{| class="wikitable" style="width: 75%; height: 200px"

|-
| abc || def || ghi
|- style="height: 100px;"
| jkl || style="width: 200px;" | mno || pqr
|-
| stu || vwx || yz

|}

所以,整个表格共高200px,其中第2行的高度为100px的此种设置,表格宽高如下:

abc def ghi
jkl mno pqr
stu vwx yz

2,高度为因变量

a,设定某行的高度大小随整个表格表格高度大小变化,需先设定整个表格高度为固定值,再用百分比%来设定单独的某行高度(调解的占整个表格高度的百分数数值 不能过小也不能过大,一般取值都小于100%)。


b,设定某行的高度大小随本身行内文字的高度大小变化,其行内文字和整个表格的高度可以自己设定,也可以不单独自设,即可以用系统给定的默认值。只需直接用百分比%或倍数N来设定,一般取值都大于100%(倍数大于1,可以不是整数),否则行内文字会被遮挡而无法完全显示。

{| class="wikitable" style="width: 75%"

|-
| abc || def || ghi
|- style="line-height:1100%"
| jkl || style="width: 200px;" | mno || pqr
|-
| stu || vwx || yz

|}

所以,没单独自设整个表格的高度,其中第2行的高度是自身行内文字高度的11倍的此种设置,表格宽高如下:

abc def ghi
jkl mno pqr
stu vwx yz

列宽

设置列宽最简单的方法即是设置该列某单元格的宽度。注意,文字会自动换行适应列宽。

当存在标题行时,可在标题行的单元格内设置:

{| class="wikitable"

! scope="col" style="width:50px" | 列1
! scope="col" style="width:100px" | 列2
! scope="col" style="width:200px" | 列3
|-
| 单元格内的 || 单元格1 || 单元格2
|-
| 文字会依照 || 单元格3 || 单元格4
|-
| 列宽自动换行 || 单元格5 || 单元格6

|}

当不存在标题行时,可在第一行的单元格内设置:

{| class="wikitable"

|-
| style="width:50px" | 该列宽为50像素
| style="width:100px" | 该列宽为100像素
| style="width:200px" | 该列宽为200像素
|-
| 单元格1 || 单元格2 || 单元格3

|}

不换行

当表格的宽度横跨这个页面或受到其他模块的挤压时,系统会自动对列宽进行调整,出现部分单元格内容被换行。

若想保持某列不进行自动换行,则可在该列的除标题行单元格外的其他单元格内设置style="white-space:nowrap"或者class="nowrap",即可实现。

颜色

可对表格的底色及字体颜色进行设置。对表格颜色的设置可通过以下几种形式实现。第一种形式为快速设置,第二种形式为首选,而第三种形式为过时的HTML代码,不建议使用。

这些模板可以快速设置表格颜色
((yes)) ((partial)) ((no))

如需进行手动设置:

“background”为底色,“color”为字体颜色。颜色参数可为已设定的英文代码或十六进制颜色代码,见颜色列表

维基样式“wikitable”默认的列标题及行标题的底色为#f2f2f2,普通单元格的底色为#f9f9f9。

{|

|-
| style="background: red; color: white" | abc
| def
| style="background: red" | <font color="white"> ghi </font>
| jkl

|}

颜色参数可设置某单元格、行或整个表格。设置于{|后,为整个表格;设置于|-后,为该行;设置于|||后,并与该单元格内容之间以|分隔,则为该单元格。

单元格颜色参数优先于行颜色参数,而行颜色参数优先于表格颜色参数,逐层覆盖。要注意的是,没有一种简易的方法去设置某列的颜色,需要逐个单元格进行设置。

{| style="background: yellow; color: green"

|-
| abc || def || ghi
|- style="background: red; color: white"
| jkl || mno || pqr
|-
| stu || style="background: silver" | vwx || yz

|}

所以,一般设置表格颜色如下:

合并单元格

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

{| class="wikitable"

|-
| 列1 || 列2 || 列3
|-
| rowspan="2" | A
| colspan="2" style="text-align: center;" | B
|-
| C
| D
|-
| E
| rowspan="2" colspan="2" style="text-align: center;" | F
|-
| G
|-
| colspan="3" style="text-align: center;" | H

|}

边框

表格通常没有边框,wikitable会添加灰色的边框。边框亦可通过样式参数设置为其他形式。可设置style="border: 1px solid darkgray"使边框为细实线。

{| class="wikitable" style="border: 1px solid darkgray;"

! style="width: 140px" | 左
! style="width: 150px" | 中
! style="width: 130px" | 右
|-
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|Caption when mouse-over image]]
| [[File:StarIconGreen.png|120px|Green stellar icon]]
|-
| 棕色星星 || 金色星星 || 绿色星星

|}

当图片代码不带“thumb|”时,则不显示图片标题行。

颜色设置中的参数“darkgray”为深灰,与其他默认表格及文本框一致。其亦可改为其他已设定的英文代码或十六进制颜色代码。

{| class="wikitable" style="border: 1px solid darkgray;"

! style="width: 140px" | 左
! style="width: 150px" | 中
! style="width: 130px" | 右
|- style="text-align: center"
| style="border: 1px solid blue;" |
[[File:StarIconBronze.png|120px]]
| style="border: 1px solid #777777;" |
[[File:StarIconGold.png|120px|Caption when mouse-over image]]
| style="border: 1px solid #22AA55;" |
[[File:StarIconGreen.png|120px|Green stellar icon]]
|- style="text-align: center"
| 棕色星星 || 金色星星 || 绿色星星

|}

表格居中

表格默认靠左,可通过设置style="margin: auto"实现表格居中。但居中后文字非环绕表格,表格左右为空白。详细可了解CSS关于margin属性的设置。

{| class="wikitable" style="margin: auto;"

|+ '''单元格左对齐,表格居中'''
! scope="col" | 标题1标题1标题1
! scope="col" | 标题2
! scope="col" | 标题3
|-
| 单元格1 || 单元格2 || 单元格3

|}

表格浮动

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

要自动插入一个表格时,可点击工具栏上的插入表格按钮:[[File:Vector toolbar insert table button.png]]或[[File:Button insert table.png]]。

{| class="wikitable" style="float: right;"
|+ '''单元格左对齐,表格居中'''
! scope="col" | 标题1
! scope="col" | 标题2
! scope="col" | 标题3
|-
| 单元格1 || 单元格2 || 单元格3
|}
即出现插入表格设置对话框,默认设置如下所示。

取消“添加标题行”,表格标题行即消失;取消“显示边框”,表格边框即消失;选择“使表格内容可排序”,表格标题行每个单元格右侧都会出现两个上下排列黑色实心三角的排序标记,表格建立后,点击某单元格的排序标记即可以该单元格内容对表格进行重新排序。行与列下的数字即为之后所建立表格的行与列的数量。

内容垂直对齐

系统默认的垂直对齐为居中。当同行中,某单元格内容较长时,内容较短单元格的内容则为居中显示,如下:

可使用“vertical-align”参数进行修改。“top”为顶对齐,“bottom”为底对齐。需逐行设置。

{| class="wikitable" style="width:550px"

|- style="vertical-align:top"
! scope="row" style="width:15%" | 列标题
| style="width:70%" | 内容较长的单元格
| style="width:15%" | 内容较短的单元格
|- style="vertical-align:bottom"
! scope="row" | 列标题
| 内容较长的单元格
| 内容较短的单元格

|}

单元格内容缩进

单元格内容可以使用CSS样式缩进。

{| class="wikitable"

|-
| 未缩进的单元格 || 单元格
|-
| style="padding-left: 2em" | 缩进单元格 || 单元格

|}

嵌套

警告:因嵌套表格会导致有关无障碍的问题,所以应避免嵌套。详见:en:Manual_of_Style_(accessibility)#Tables

在以下表格中嵌套了七种不同的表格。注意,嵌套表格的代码必须新开一行。

{| class="wikitable"

| 单元格1
| style="text-align: center;" | 单元格2
{| class="wikitable" style="background: #ABCDEF;"
| 嵌套
|-
| 表格
|}
| style="vertical-align:bottom;" | 原表再次开始
| style="width:100px;" |
{| class="wikitable" style="background: #ABCDEF;"
| A
|}
{| class="wikitable" style="background: #ABCDEF;"
| B || B
|}
| style="width:50px;" |
{| class="wikitable" style="background: #ABCDEF; float:left;"
| C
|}
{| class="wikitable" style="background: #ABCDEF; float: right;"
| D
|}

|}

实例[编辑]

简单的例子

{| class="wikitable" 
| 单元1,行1
| 单元2,行1
| 单元3,行1
|-
| 单元1,行2
| 单元2,行2
| 单元3,行2
|-
| 单元1,行3
| 单元2,行3
| 单元3,行3
|}

将生成:

单元1,行1 单元2,行1 单元3,行1
单元1,行2 单元2,行2 单元3,行2
单元1,行3 单元2,行3 单元3,行3

复杂的例子

注意这个表格将右对齐。

{| class="wikitable" style="text-align: right"
| 单元1, 行1
| rowspan="2" | 单元2, 行1+2
| 单元3, 行1
|-
| 单元1, 行2
| 单元3, 行2
|-
| 单元1, 行3
| 单元2, 行3
| 单元3, 行3
|}
单元1, 行1 单元2, 行1+2 单元3, 行1
单元1, 行2 单元3, 行2
单元1, 行3 单元2, 行3 单元3, 行3

同时使用COLSPAN和ROWSPAN:

{| class="wikitable"
|-
! 栏目一 !! 栏目二 !! 栏目三
|-
| rowspan="2" | A
| colspan="2" style="text-align: center" | B
|-
| C
| D
|-
| colspan="2" style="text-align: center" | E
| F
|- 
| rowspan="3" | G
| H
| I
|- 
| J
| K
|-
| colspan="2" style="text-align: center" | L
|}

将有这样的效果:

栏目一 栏目二 栏目三
A B
C D
E F
G H I
J K
L

嵌套表格

{| class="wikitable"
| 原有
|
{| style="background: blue; color: white" class="wikitable"
| 插入
|-
| 表格
|}
| 表格
|}

生成:

原有
插入
表格
表格

带标题的表格

{| class="wikitable"
|+<span style="color: red;">'''这是标题'''</span> 请参看:
| [[建国]] || 1949年
|-
| [[国家]] || [[中华人民共和国]]
|-
| [[时区]] || [[UTC]]+8
|-
| [[国歌]] || [[义勇军进行曲]]
|-
| [[首都]] || [[北京]]
|}

带颜色的表格

有两种方法让表格里的字和背景出现颜色,下面是第一种:

{| class="wikitable"
| style="background: navy; color: yellow" | 深蓝底黄字
| style="background: gold; color: white"  | 金底白字
| style="background: teal; color: red" | 墨绿底红字
| 没设置颜色
|}

生成:

深蓝底黄字 金底白字 墨绿底红字 没设置颜色

这种方法能指定单格的颜色和背景。如果要让一行、一列或一整个表格都是同样的颜色,则使用第二种方法:

{| class="wikitable" style="background: yellow; color: blue"
|- 
| 这行是
| 蓝字
| 黄背景
|- style="background: navy; color: white"
| 这行是
| 白字
| 深海蓝
|-
| 这行
| style="background: white" | 比较
| 不一样
|}

生成:

这行是 蓝字 黄背景
这行是 白字 深海蓝
这行 比较 不一样

像其他参数一样,颜色参数指定的优先级为:单格→一行(列)→整个表格。关于所有可用的颜色,可参见色彩列表

设定行高与列宽

整个表格的行高(height)和列宽(width),以及任意列的列宽可以进行设定。要设定任意行的行高,可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定,那么表格的显示结果可能随浏览器的不同而不同。

{| style="width: 50%; height: 200px" class="wikitable"
|- 
| abc
| def
| ghi
|- style="height: 50px; width: 50px"
| jkl
| style="width: 120px" | mno
| pqr
|-
| stu
| vwx
| yz
|}

将得到这样的结果:

abc def ghi
jkl mno pqr
stu vwx yz

层叠样式表

WP内建了CSS,用于格式化表格,可以通过在{|之后加入class="wikitable"或使用((wt))模板使用。例如:

{| class="wikitable" style="text-align: center"
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|}

((subst:wt)) style="text-align: center"
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|}

都可以得到:

乘法表
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9

XHTML HTML wikitext语法对照

  XHTML HTML & Wiki-td Wiki-pipe
表格 <table></table> <table></table>
{|
|}
表格标题 <caption>caption</caption> <caption>caption</caption>
|+ caption
<tr></tr> <tr>
|-
单元格 <td>cell1</td>
<td>cell2</td>
<td>cell1
<td>cell2
| cell1
| cell2
单元格 <td>cell1</td> <td>cell2</td> <td>cell3</td> <td>cell1 <td>cell2 <td>cell3
| cell1 || cell2 || cell3
标题单元格 <th>heading</th> <th>heading
! heading
示例表格
1 2
3 4
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>
{|
| 1 || 2
|-
| 3 || 4
|}
示例表格
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{|
| 1 || 2 
|-
| 3 || 4 
|-
| 5 || 6 
|}
优点
  • 能以任何XHTML编辑器预览以及调试
  • 能以容易阅读的方式来编排格式
  • 广为人知
  • 没有“|”符号会与样版或是语法分析器碰撞
  • 能以任何HTML编辑器预览以及调试
  • 能以容易阅读的方式来编排格式
  • 广为人知
  • 没有“|”符号会与样版或是语法分析器碰撞
  • 使用的空间比XHTML少
  • 易写
  • 易读
  • 仅使用些许空间
缺点
  • 冗长
  • 使用许多空间
  • 编辑时难以阅读
  • 不应使用
  • 容易混淆,尤其对于有一点HTML使用经验的人
  • 格式不够严谨
  • 标签界线不够清楚
  • 样子看起来总是很奇怪
  • 未来可能没有浏览器会支持
  • 较为不熟悉的语法
  • 结构僵硬
  • 不能缩进
  • HTML标签对于某些人来说会比一连串的垂直条(vertical slash,|),加号,惊叹号等符号来的好读
  • 无法直接从HTML型式的标签复制。对于HTML表格概念不熟悉的人不容易理解。
  • 指定到模板参数时,含有“|”的部分需要改用Template:!
  • 对于换行很敏感;因为有时候是从样版中的参数传来,某些情形下须要特殊的技巧去处理在使用样版时的参数问题。参考en:Help:Newlines and spaces

参见[编辑]

外部链接[编辑]

{{bottomLinkPreText}} {{bottomLinkText}}
帮助:表格
Listen to this article

This browser is not supported by Wikiwand :(
Wikiwand requires a browser with modern capabilities in order to provide you with the best reading experience.
Please download and use one of the following browsers:

This article was just edited, click to reload
This article has been deleted on Wikipedia (Why?)

Back to homepage

Please click Add in the dialog above
Please click Allow in the top-left corner,
then click Install Now in the dialog
Please click Open in the download dialog,
then click Install
Please click the "Downloads" icon in the Safari toolbar, open the first download in the list,
then click Install
{{::$root.activation.text}}

Install Wikiwand

Install on Chrome Install on Firefox
Don't forget to rate us

Tell your friends about Wikiwand!

Gmail Facebook Twitter Link

Enjoying Wikiwand?

Tell your friends and spread the love:
Share on Gmail Share on Facebook Share on Twitter Share on Buffer

Our magic isn't perfect

You can help our automatic cover photo selection by reporting an unsuitable photo.

This photo is visually disturbing This photo is not a good choice

Thank you for helping!


Your input will affect cover photo selection, along with input from other users.

X

Get ready for Wikiwand 2.0 🎉! the new version arrives on September 1st! Don't want to wait?