来自WIKI帮助中心

首页 > 添加表格



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


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


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


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


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


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



使用工具栏插入表格

编辑表格1.png


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


编辑表格2.png



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


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


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


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



表格代码解析说明

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


表格起始由大括号({和})及竖线字符(|)组成。{|表示表格开始,|}表示表格结束。每个表格必须有完整的开始符与结束符。


{| 表格内容 |}


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



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


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


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


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


实际显示


表格标题
第一行第一个单元格
第二行第一个单元格 第二行第二个单元格


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


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


实际显示


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



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


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


实际显示


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


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


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


实际显示


余下所有内容 |(包括竖线) |将归入 |第一个单元格 第二个单元格
余下所有内容 将归入 |第二个单元格


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


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


实际显示


单元格1(设置缺损)
单元格2(靠右) 单元格3(红底色)


即两个||之间的|不能超过1个。


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


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


实际显示


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


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


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


{|
|+ 表格标题
! 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


可选参数可设置单元格、行或整个表格。在表格未使用可选参数时是没有边框的,可使用border代码添加边框。


{| border="1"
|+ 表格标题
! 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


但通常使用的表格并不使用边框,而直接使用Wiki样式“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


表格样式

另外,Wiki表格的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
|} 


以上代码的演示


A B C
abc def ghi
jkl mno pqr
stu vwx yz


A B C
abc def ghi
jkl mno pqr
stu vwx yz


A B C
abc def ghi
jkl mno pqr
stu vwx yz


A B C
abc def ghi
jkl mno pqr
stu vwx yz


宽高

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


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


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


所以,一般设置表格宽高如下:


abc def ghi
jkl mno pqr
stu vwx yz


列宽

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


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


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


实际显示


列1 列2 列3
单元格内的 单元格1 单元格2
文字会依照 单元格3 单元格4
列宽自动换行 单元格5 单元格6


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


{| class="wikitable" cellpadding="2"
|-
| width="50px" | 该列宽为50像素
| width="100px" | 该列宽为100像素
| width="200px" | 该列宽为200像素
|-
| 单元格1 || 单元格2 || 单元格3
|}


实际显示


该列宽为50像素 该列宽为100像素 该列宽为200像素
单元格1 单元格2 单元格3


颜色

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


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


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


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


实际显示


abc def ghi jkl


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


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


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


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


abc def ghi
jkl mno pqr
stu vwx yz


合并单元格(表格跨行/跨列)

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


{| border="1" cellpadding="5" cellspacing="0"
|-
| 列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
|}


实际显示


列1 列2 列3
A B
C D
E F
G
H


边框

表格边框默认的是一种带阴影的复杂双线边框,即HTML中的默认值。但边框可通过样式参数设置为其他形式。可设置“style="border: 1px solid darkgray"”使边框为细实线。


注意,要使用边内空白参数“cellpadding”或“cellspacing”时,必须设置边框。


{| cellpadding="2" style="border: 1px solid darkgray;" ! width="140" | 左
! width="150" | 中
! width="130" | 右
|- border="0" align="center"
| 棕色星星 || 金色星星 || 绿色星星 
|}


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


实际显示


棕色星星 金色星星 绿色星星