wiki表格编辑方法.docx
- 文档编号:25781816
- 上传时间:2023-06-14
- 格式:DOCX
- 页数:28
- 大小:50.03KB
wiki表格编辑方法.docx
《wiki表格编辑方法.docx》由会员分享,可在线阅读,更多相关《wiki表格编辑方法.docx(28页珍藏版)》请在冰豆网上搜索。
wiki表格编辑方法
维基表格有多种形式,并可进行自定义。
该页介绍的是创建维基表格的语法。
尽管在维基百科中可以使用HTML语法创建表格,但是Wiki语法通常会更加简便。
一段最简单的表格代码是这样的:
{|class="wikitable"
|-
!
标题文字!
!
标题文字!
!
标题文字
|-
|示例||示例||示例
|-
|示例||示例||示例
|-
|示例||示例||示例
|}
提交编辑后,该表格即显示为:
标题文字
标题文字
标题文字
示例
示例
示例
示例
示例
示例
示例
示例
示例
将其中的样例文字替换为您想要的内容,即可成为一个具有实际作用的表格。
使用工具栏[编辑]
编辑器工具栏
要自动插入一个表格时,可点击工具栏上的插入表格按钮:
或
。
即出现插入表格设置对话框,默认设置如下所示。
取消“添加标题行”,表格标题行即消失;取消“显示边框”,表格边框即消失;选择“使表格内容可排序”,表格标题行每个单元格右侧都会出现两个上下排列黑色实心三角的排序标记,表格创建后,点击某单元格的排序标记即可以该单元格内容对表格进行重新排序。
行与列下的数字即为之后所创建表格的行与列的数量。
插入表格设置对话框
以上图所示设置点击插入后,在光标所在处即会出现以下表格代码。
其中,!
与!
之间为一个标题行单元格;|与|之间为一个单元格;|-表示转至下一行。
{|class="wikitable"
|-
!
标题文字!
!
标题文字!
!
标题文字
|-
|示例||示例||示例
|-
|示例||示例||示例
|-
|示例||示例||示例
|}
提交编辑后,该表格即显示为:
标题文字
标题文字
标题文字
示例
示例
示例
示例
示例
示例
示例
示例
示例
Pipe语法教程[编辑]
Pipe代码功能与HTML表格标记完全相同。
∙表格起始由大括号({和})及竖线字符(|)组成。
{|表示表格开始,|}表示表格结束。
每个表格必须有完整的开始符与结束符。
{| 表格内容 |}
∙表格标题可省略。
其由一个竖线和加号(+)组成(|+)。
其后即添加标题内容。
{| |+标题
表格内容|}
∙添加新行由一个竖线和连字符(-)组成(|-)。
添加该代码后,表格代码将转至下一行。
{||+表格标题
|-
第一行内容
|-
第二行内容
|}
∙单元格由竖线组成。
在某一行代码后添加竖线即会在该行添加一个单元格。
若各行单元格数量不等,则空出。
{||+表格标题
|-
| 第一行第一个单元格
|-
| 第二行第一个单元格
| 第二行第二个单元格
|}
实际显示显示▼
同一行的单元格也可通过两个竖线写于代码中的同一行中,以缩短版面。
{||+表格标题
|-
|单元格1||单元格2||单元格3
|-
|单元格A
|单元格B
|单元格C
|}
实际显示显示▼
单元格代码中的单个竖线字符是无法形成新单元格的。
两个竖线字符或头一个单个竖线字符,与另一个竖线字符之间的代码可成为紧接着的一个单元格的格式设置代码,但可缺损。
余下竖线字符及其他均归入一个单元格中,并显示出来。
{|border="1"|-
|formatmodifier(格式设置不显示) |余下所有内容 |(包括竖线) |将归入 |第一个单元格||第二个单元格
|-
|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
|}
所以,一般使用的典型表格如下:
表格标题
列标题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="wikitablesortable"
!
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="wikitablemw-collapsible"
!
A!
!
B!
!
C
|-
|abc||def||ghi
|-
|jkl||mno||pqr
|-
|stu||vwx||yz
|}
{|class="wikitablemw-collapsiblemw-collapsed"
!
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|}
实际显示显示▼
当不存在标题行时,可在第一行的单元格内设置:
{|class="wikitable"cellpadding="2"|-
| width="50px" |该列宽为50像素
| width="100px" |该列宽为100像素
| width="200px" |该列宽为200像素
|-
|单元格1||单元格2||单元格3
|}
实际显示显示▼
不换行[编辑]
当表格的宽度横跨这个页面或受到其他模块的挤压时,系统会自动对列宽进行调整,出现部分单元格内容被换行。
实例显示▼
若想保持某列不进行自动换行,则可在该列的除标题行单元格外的其他单元格内设置“style="white-space:
nowrap"”,即可实现。
对列1和列2设置后的效果显示▼
颜色[编辑]
可对表格的底色及字体颜色进行设置。
对表格颜色的设置可通过以下两种形式实现。
第一种形式为首选,而第二种形式为过时的HTML代码,不建议使用。
“background”为底色,“color”为字体颜色。
颜色参数可为已设定的英文代码或十六进制颜色代码,见颜色列表。
维基样式“wikitable”默认的列标题及行标题的底色为#f2f2f2,普通单元格的底色为#f9f9f9。
{|| style="background:
red;color:
white" |abc
|def
|bgcolor="red"|
|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
|}
实际显示显示▼
边框[编辑]
表格边框默认的是一种带阴影的复杂双线边框,即HTML中的默认值。
但边框可通过样式参数设置为其他形式。
可设置“style="border:
1pxsoliddarkgray"”使边框为细实线。
注意,要使用边内空白参数“cellpadding”或“cellspacing”时,必须设置边框。
{| cellpadding="2"style="border:
1pxsoliddarkgray;" !
width="140"|左
!
width="150"|中
!
width="130"|右
|-border="0"align="center"
|[[File:
StarIconBronze.png|120px]]
|[[File:
StarIconGold.png|120px|Captionwhenmouse-overimage]]
|[[File:
StarIconGreen.png|120px|Greenstellaricon]]
|-align="center"
|棕色星星||金色星星||绿色星星|}
当图片代码不带“thumb|”时,则不显示图片标题行。
实际显示显示▼
颜色设置中的参数“darkgray”为深灰,与其他默认表格及文本框一致。
其亦可改为其他已设定的英文代码或十六进制颜色代码。
{|cellpadding="2"style="border:
1pxsoliddarkgray;"!
width="140"|左
!
width="150"|中
!
width="130"|右
|-align="center"
| cellpadding="2"style="border:
1pxsolidblue;" |
[[File:
StarIconBronze.png|120px]]
| style="border:
1pxsolid#777777;" |
[[File:
StarIconGold.png|120px|Captionwhenmouse-overimage]]
| style="border:
1pxsolid#22AA55;" |
[[File:
StarIconGreen.png|120px|Greenstellaricon]]
|-align="center"
|棕色星星||金色星星||绿色星星|}
实际显示显示▼
表格居中[编辑]
表格默认靠左,可通过设置“style="margin:
1emauto1emauto;"”或“style="margin:
0auto;"”实现表格居中。
但居中后文字非环绕表格,表格左右为空白。
详细可了解CSS关于margin属性的设置。
{|class="wikitable" style="margin:
1emauto1emauto;" |+'''单元格左对齐,表格居中'''
!
scope="col"|标题1标题1标题1
!
scope="col"|标题2
!
scope="col"|标题3
|-
|单元格1||单元格2||单元格3
|}
实际显示显示▼
表格浮动[编辑]
可通过设置“float”实现表格浮动。
文字环绕于表格周围。
要自动插入一个表格时,可点击工具栏上的插入表格按钮:
[[File:
Vectortoolbarinserttablebutton.png]]或[[File:
Buttoninserttable.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
|}
|}
实际显示显示▼
实例[编辑]
简单的例子[编辑]
{|border=1
|单元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
复杂的例子[编辑]
注意这个表格将右对齐。
{|align=rightborder=1
|单元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:
{|border="1"cellpadding="5"cellspacing="0"
|-
!
栏目一!
!
栏目二!
!
栏目三
|-
|rowspan=2|A
|colspan=2align="center"|B
|-
|C
|D
|-
|colspan=2align="center"|E
|F
|-
|rowspan=3|G
|H
|I
|-
|J
|K
|-
|colspan=2align="center"|L
|}
将有这样的效果:
栏目一
栏目二
栏目三
A
B
C
D
E
F
G
H
I
J
K
L
嵌套表格[编辑]
{|border=1
|原有
|
{|style="background:
blue;color:
white"border=2
|插入
|-
|表格
|}
|表格
|}
生成:
原有
插入
表格
表格
带标题的表格[编辑]
{|border=1align=center
|+
'''这是标题'''
请参看:
|[[建国]]||1949年
|-
|[[国家]]
|[[中华人民共和国]]
|-
|[[时区]]||[[UTC]]+8
|-
|[[国歌]]||[[义勇军进行曲]]
|-
|[[域名]]||.cn
|}
这是标题 请参看:
建国
1949年
国家
中华人民共和国
时区
UTC+8
国歌
义勇军进行曲
域名
.cn
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- wiki 表格 编辑 方法