wiki表格编辑方法

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

维基表格有多种形式,并可进行自定义。

该页介绍的是创建维基表格的语法。

尽管在维基百科中可以使用HTML语法创建表格,但是Wiki语法通常会更加简便。

一段最简单的表格代码是这样的:
{| class="wikitable"
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
提交编辑后,该表格即显示为:
标题文字标题文字标题文字
示例示例示例
示例示例示例
示例示例示例
将其中的样例文字替换为您想要的内容,即可成为一个具有实际作用的表格。

使用工具栏[编辑]
编辑器工具栏
要自动插入一个表格时,可点击工具栏上的插入表格按钮:或。

即出现插入表格设置对话框,默认设置如下所示。

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

行与列下的数字即为之后所创建表格的行与列的数量。

插入表格设置对话框
以上图所示设置点击插入后,在光标所在处即会出现以下表格代码。

其中,!与!之间为一个标题行单元格;|与|之间为一个单元格;|-表示转至下一行。

{| class="wikitable"
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
提交编辑后,该表格即显示为:
标题文字标题文字标题文字
示例示例示例
示例示例示例
示例示例示例
Pipe语法教程[编辑]
Pipe代码功能与HTML表格标记完全相同。

•表格起始由大括号({和})及竖线字符(|)组成。

{|表示表格开始,|}表示表格结束。

每个表格必须有完整的开始符与结束符。

{|表格内容|}
•表格标题可省略。

其由一个竖线和加号(+)组成(|+)。

其后即添加标题内容。

{| |+ 标题
表格内容 |}
•添加新行由一个竖线和连字符(-)组成(|-)。

添加该代码后,表格代码将转至下一行。

{| |+ 表格标题
|-
第一行内容
|-
第二行内容
|}
•单元格由竖线组成。

在某一行代码后添加竖线即会在该行添加一个单元格。

若各行单元格数量不等,则空出。

{| |+ 表格标题
|-
|第一行第一个单元格
|-
|第二行第一个单元格
|第二行第二个单元格
|}
同一行的单元格也可通过两个竖线写于代码中的同一行中,以缩短版面。

{| |+ 表格标题
|-
|单元格1 || 单元格2 || 单元格3
|-
|单元格A
|单元格B
|单元格C
|}
单元格代码中的单个竖线字符是无法形成新单元格的。

两个竖线字符或头一个单个竖线字符,与另一个竖线字符之间的代码可成为紧接着的一个单元格的格式设置代码,但可缺损。

余下竖线字符及其他均归入一个单元格中,并显示出来。

{| border="1" |-
|format modifier (格式设置不显示) |余下所有内容|(包括竖线)|将归入|第一个单元格||第二个单元格
|-
|format |余下所有内容||format |将归入|第二个单元格
|}
例如,可进行靠右,颜色等设置。

{| border="1" |-
| 单元格1(设置缺损)
|-
| align="right" |单元格2(靠右)|| style="background: #FFB6C1" |单元格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
|}
•行标题通过将每行代码第一个单元格代码的第一个“|”取代为“! scope="row" |”
实现。

{| |+ 表格标题
! scope="col" | 列标题1
! scope="col" | 列标题2
! scope="col" | 列标题3
|-
! scope="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题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
|}
但通常使用的表格并不使用边框,而直接使用维基样式“wikitable”。

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

宽高[编辑]
可对整个表格的宽度与高度,及某行的高度进行设置。

要设置某列的宽度可通过设置该列的某个单元格的宽度实现。

若表格的宽度不足以显示所有的列,或高度不足以显示所有的行,表格的部分内容可能会缺失,其结果取决于浏览器的不同。

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

{| class="wikitable" style="width: 75%; height: 200px"|-
| abc || def || ghi
|- style="height: 100px;"
| jkl || style="width: 200px;"| 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 |}
当不存在标题行时,可在第一行的单元格内设置:
{| class="wikitable" cellpadding="2" |-
| width="50px"| 该列宽为50像素
| width="100px"| 该列宽为100像素
| width="200px"| 该列宽为200像素
|-
| 单元格1 || 单元格2 || 单元格3
|}
不换行[编辑]
当表格的宽度横跨这个页面或受到其他模块的挤压时,系统会自动对列宽进行调整,出现部分单元格内容被换行。

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

{| | style="background: red; color: white"| abc
| def
| bgcolor="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”冲突,使得单元格无法合并,同时出现排序错误。

{| 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
|}
边框[编辑]
表格边框默认的是一种带阴影的复杂双线边框,即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"
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|Caption when mouse-over image]]
| [[File:StarIconGreen.png|120px|Green stellar icon]]
|- align="center"
| 棕色星星 || 金色星星 || 绿色星星 |}
当图片代码不带“thumb|”时,则不显示图片标题行。

颜色设置中的参数“darkgray”为深灰,与其他默认表格及文本框一致。

其亦可改为其他已设定的英文代码或十六进制颜色代码。

{| cellpadding="2" style="border: 1px solid darkgray;" ! width="140" | 左
! width="150" | 中
! width="130" | 右
|- align="center"
| cellpadding="2" 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]]
|- align="center"
| 棕色星星 || 金色星星 || 绿色星星 |}
表格居中[编辑]
表格默认靠左,可通过设置“style="margin: 1em auto 1em auto;"”或“style="margin:0 auto;"”实现表格居中。

但居中后文字非环绕表格,表格左右为空白。

详细可了解CSS关于margin属性的设置。

{| class="wikitable" style="margin: 1em auto 1em 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
|}
即出现插入表格设置对话框,默认设置如下所示。

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

行与列下的数字即为之后所创建表格的行与列的数量。

内容垂直对齐[编辑]
系统默认的垂直对齐为居中。

当同行中,某单元格内容较长时,内容较短单元格的内容则为居中显示,如下:
可使用“valign”参数进行修改。

“top”为顶对齐,“bottom”为底对齐。

需逐行设置。

{| class="wikitable" style="width:550px" |- valign="top"
! scope="row" width="15%" | 列标题
| width="70%" | 内容较长的单元格
| width="15%" | 内容较短的单元格
|- valign="bottom"
! scope="row" | 列标题
| 内容较长的单元格
| 内容较短的单元格 |}
单元格内容缩进[编辑]
单元格内容可以使用CSS样式缩进。

{| class="wikitable" cellpadding="2" |-
| 未缩进的单元格 || 单元格
|-
| style="padding-left: 2em"| 缩进单元格 || 单元格
|}
嵌套[编辑]
警告:因嵌套表格会导致问题,所以应避免嵌套。

详见:
en:Manual_of_Style_(accessibility)#Tables。

在以下表格中嵌套了七种不同的表格。

注意,嵌套表格的代码必须新开一行。

{| border="1" | 单元格1
| style="text-align: center;" | 单元格2
{| border="2" style="background: #ABCDEF;"
| 嵌套
|-
| 表格
|}
| style="vertical-align:bottom;" | 原表再次开始
| style="width:100px;" |
{| border="2" style="background: #ABCDEF;"
| A
|}
{| border="2" style="background: #ABCDEF;"
| B || B
|}
| style="width:50px;" |
{| border="2" style="background: #ABCDEF; float:left;"
| C
|}
{| border="2" style="background: #ABCDEF; float: right;"
| D
|}
|}
实例[编辑]
将生成:
复杂的例子[编辑]
注意这个表格将右对齐。

将有这样的效果:
生成:
带标题的表格[编辑]
带颜色的表格[编辑]
有两种方法让表格里的字和背景出现颜色,下面是第一种:
生成:
这种方法能指定单格的颜色和背景。

如果要让一行、一列或一整个表格都是同样的颜色,则使用第二种方法:
生成:
像其他参数一样,颜色参数指定的优先级为:单格→一行(列)→整个表格。

HTML4.01制定16种颜色名称,附上16进位值如下所示:
请参见:色彩列表
设定行高与列宽[编辑]
整个表格的行高(height)和列宽(width),以及任意列的列宽可以进行设定。

要设定任意行的行高,可以通过设定该行任意一个单元格的行高来实现。

如果存在行、列的高、宽没有设定,那么表格的显示结果可能随浏览器的不同而不同。

将得到这样的结果:
层叠样式表[编辑]

都可以得到:。

相关文档
最新文档