wiki表格编辑方法.doc

维基表格有多种形式，并可进行自定义。该页介绍的是创建维基表格的语法。尽管在维基百科中可以使用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|所以，一般使用的典型表格如下：表格标题列标题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| 以上代码的演示显示宽高编辑可对整个表格的宽度与高度，及某行的高度进行设置。要设置某列的宽度可通过设置该列的某个单元格的宽度实现。若表格的宽度不足以显示所有的列，或高度不足以显示所有的行，表格的部分内容可能会缺失，其结果取决于浏览器的不同。设置于|后，为整个表格；设置于|-后，为该行；设置于|或|后，并与该单元格内容之间以|分隔，则为该单元格。| class=wikitablestyle=width: 75%; height: 200px|-| abc | def | ghi|-style=height: 100px;| jkl |style=width: 200px;| mno | pqr|-| stu | vwx | yz |所以，一般设置表格宽高如下：abcdefghijklmnopqrstuvwxyz列宽编辑设置列宽最简单的方法即是设置该列某单元格的宽度。注意，文字会自动换行适应列宽。当存在标题行时，可在标题行的单元格内设置：| class=wikitable cellpadding=2! scope=colwidth=50| 列1! scope=colwidth=100| 列2! scope=colwidth=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 | ghi | jkl|实际显示显示颜色参数可设置某单元格、行或整个表格。设置于|后，为整个表格；设置于|-后，为该行；设置于|或|后，并与该单元格内容之间以|分隔，则为该单元格。单元格颜色参数优先于行颜色参数，而行颜色参数优先于表格颜色参数，逐层覆盖。要注意的是，没有一种简易的方法去设置某列的颜色，需要逐个单元格进行设置。|style=background: yellow; color: green|-| abc | def | ghi|-style=background: red; color: white| jkl | mno | pqr|-| stu |style=background: silver| vwx | yz |所以，一般设置表格颜色如下：abcdefghijklmnopqrstuvwxyz合并单元格编辑可通过结合使用“rowspan”和“colspan”合并单元格。但排序样式“sortable”会与“rowspan”冲突，使得单元格无法合并，同时出现排序错误。| border=1 cellpadding=5 cellspacing=0 |-| 列1 | 列2 | 列3|-|rowspan=2| A|colspan=2style=text-align: center; | B|-| C| D|-| E|rowspan=2 colspan=2style=text-align: center; | F|-| G|-|colspan=3style=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=wikitablestyle=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=wikitablestyle=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=right border=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=2 align=center| B|-| C| D|-| colspan=2 align=center| E| F|- | rowspan=3| G| H| I|- | J| K|-| colspan=2 align=center| L|将有这样的效果：栏目一栏目二栏目三ABCDEFGHIJKL嵌套表格编辑| border=1|原有| style=background:blue; color:white border=2|插入|-|表格|表格|生成：原有插入表格表格带标题的表格编辑| border=1 align=center|+ 这是标题 请参看：|建国|1949年|-|国家|中华人民共和国|-|时区|UTC+8|-|国歌|义勇军进行曲|-|域名|.cn|这是标题请参看：建国1949年国家中华人民共和国时区UTC+8国歌义勇军进行曲域名.cn带颜色的表格编辑有两种方法让表格里的字和背景出现颜色，下面是第一种：| border=1| bgcolor=navy | 深藍底黃字| bgcolor=olive | 金底白字| style=background:teal; color:red | 墨綠底紅字| 沒設定顏色|生成：深蓝底黄字金底白字墨绿底红字没设置颜色这种方法能指定单格的颜色和背景。如果要让一行、一列或一整个表格都是同样的颜色，则使用第二种方法：| style=background:yellow; color:blue border=1|- | 這行是| 藍字| 黃背景|- style=background:navy; color:white| 這行是| 白字| 深海藍|-| 這行| style=background:white | 比較| 不一樣|生成：这行是蓝字黄背景这行是白字深海蓝这行比较不一样像其他参数一样，颜色参数指定的优先级为：单格一行(列)整个表格。HTML4.01制定16种颜色名称，附上16进位值如下所示：black#000000silver#c0c0c0maroon#800000red#ff0000navy#000080blue#0000ffpurple#800080fuchsia#ff00ffgreen#008000lime#00ff00olive#808000Yellow#ffff00teal#008080aqua#00ffffgray#808080white#ffffff请参见：色彩列表设定行高与列宽编辑整个表格的行高(height)和列宽(width)，以及任意列的列宽可以进行设定。要设定任意行的行高，可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定，那么表格的显示结果可能随浏览器的不同而不同。| style=width:50%; height:200px border=1|- | abc| def| ghi|- style=height:50px;width:50px| jkl| style=width:120px |mno| pqr|-| stu| vwx| yz|将得到这样的结果：abcdefghijklmnopqrstuvwxyz层叠样式表编辑WP内置了CSS，用于格式化表格，可以通过在|之后加入class=wikitable或使用wt模板使用。例如：| class=wikitable style=text-align:center|+乘法表|-! ! 1 ! 2 ! 3|-! 1