注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

曾国藩的博客

 
 
 

日志

 
 

Wiki帮助:表格  

2012-04-11 14:50:08|  分类: 网络/系统架构/版 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
http://zh.wikipedia.org/wiki/Wikipedia:%E8%A1%A8%E6%A0%BC

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

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

{| class="wikitable"

|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例

|}

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

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

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

目录

 [隐藏

[编辑] 使用工具栏

编辑器工具栏

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

插入表格设置对话框

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

{| class="wikitable"

|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例

|}

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

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

[编辑] Pipe语法教程

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

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

表格内容

|}
  • 表格标题可缺损。其由一个竖线和加号(+)组成(|+)。其后即添加标题内容。
{|

|+ 标题
表格内容

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

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

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

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

|}
显示▼隐藏▲实际显示
表格标题
第一行第一个单元格
第二行第一个单元格 第二行第二个单元格
同一行的单元格也可通过两个竖线写于代码中的同一行中,以缩短版面。
{|

|+ 表格标题
|-
|单元格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="row" | 行标题1
| 单元格2 || 单元格3
|-
! scope="row" | 行标题A
| 单元格B
| 单元格C

|}
显示▼隐藏▲实际显示
表格标题
列标题1 列标题2 列标题3
列标题1 列标题2 列标题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

|}
显示▼隐藏▲实际显示
表格标题
列标题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
但通常使用的表格并不使用边框,而直接使用维基样式“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参数时,会生成没边框的表格。

{| class="wikitable"
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl || mno || pqr
|-
| stu || vwx || yz
|}

 

{| class="wikitable sortable"
!A!!B!!C
|-
| abc || def || ghi
|-
| jkl || mno || pqr
|-
| 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

[编辑] 不换行

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

显示▼隐藏▲实例
索引编号 年份 标题和中文译名 期刊名、期数、页数 分类和注释
Schilpp 1; CP 2, 1 1901年 Folgerungen aus den Kapillarit?tserscheinungen
从毛细现象得出的结论
《物理年鉴》(Annalen der Physik) (ser. 4), 4, 第513–523页。 分子间作用力。爱因斯坦在两篇论文的第一篇中提出的(不正确的)理论认为,所有分子之间的相互作用力是一个和距离相关的通用函数,类似引力的平方反比定律。一旦参数化,他的理论能较准确预测较重的疏水性分子,但是不适用于较轻的分子。
Schilpp 2; CP 2, 2 1902年 Thermodynamische Theorie der Potentialdifferenz zwischen Metallen und vollst?ndig dissoziierten L?sungen ihrer Salze, und eine elektrische Methode zur Erforschung der Molekularkr?fte
关于金属及其盐的全离解溶液的势差的热力学理论和研究分子力的一种电学方法
《物理年鉴》(ser. 4),8,第798–814页。 分子间作用力。爱因斯坦的第二篇论文是关于一个通用的分子能量函数,这一次是应用于电解质。没有提供用于比较的数据。1907年,爱因斯坦表示这两篇论文“毫无价值”。

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

显示▼隐藏▲对列1和列2设置后的效果
{| class="wikitable" cellpadding="2"

! 索引编号 !! 年份 !! 标题和中文译名 !! 期刊名、期数、页数 !! 分类和注释
|-
| style="white-space:nowrap" | Schilpp 1; ''CP'' '''2''', 1 || 1901年 || Folgerungen aus den Kapillarit?tserscheinungen
{|
| 从毛细现象得出的结论
|}
| 《物理年鉴》(Annalen der Physik) (ser. 4), '''4''', 第513–523页。 || '''分子间作用力'''。爱因斯坦在两篇论文的第一篇中提出的(不正确的)理论认为,所有分子之间的相互作用力是一个和距离相关的通用函数,类似引力的 平方反比定律。一旦参数化,他的理论能较准确预测较重的疏水性分子,但是不适用于较轻的分子。
|-
| Schilpp 2; ''CP'' '''2''', 2 || style="white-space:nowrap" | 1902年 || Thermodynamische Theorie der Potentialdifferenz zwischen Metallen und vollst?ndig dissoziierten L?sungen ihrer Salze, und eine elektrische Methode zur Erforschung der Molekularkr?fte
{|
| 关于金属及其盐的全离解溶液的势差的热力学理论和研究分子力的一种电学方法
|}
| 《物理年鉴》(ser. 4),'''8''',第798–814页。 || '''分子间作用力'''。爱因斯坦的第二篇论文是关于一个通用的分子能量函数,这一次是应用于电解质。没有提供用于比较的数据。1907年,爱因斯坦表示这两篇论文“毫无价值”。

|}
索引编号 年份 标题和中文译名 期刊名、期数、页数 分类和注释
Schilpp 1; CP 2, 1 1901年 Folgerungen aus den Kapillarit?tserscheinungen
从毛细现象得出的结论
《物理年鉴》(Annalen der Physik) (ser. 4), 4, 第513–523页。 分子间作用力。爱因斯坦在两篇论文的第一篇中提出的(不正确的)理论认为,所有分子之间的相互作用力是一个和距离相关的通用函数,类似引力的平方反比定律。一旦参数化,他的理论能较准确预测较重的疏水性分子,但是不适用于较轻的分子。
Schilpp 2; CP 2, 2 1902年 Thermodynamische Theorie der Potentialdifferenz zwischen Metallen und vollst?ndig dissoziierten L?sungen ihrer Salze, und eine elektrische Methode zur Erforschung der Molekularkr?fte
关于金属及其盐的全离解溶液的势差的热力学理论和研究分子力的一种电学方法
《物理年鉴》(ser. 4),8,第798–814页。 分子间作用力。爱因斯坦的第二篇论文是关于一个通用的分子能量函数,这一次是应用于电解质。没有提供用于比较的数据。1907年,爱因斯坦表示这两篇论文“毫无价值”。

[编辑] 颜色

可对表格的底色及字体颜色进行设置。对表格颜色的设置可通过以下两种形式实现。第一种形式为首选,而第二种形式为过时的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”合并单元格。

{| 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;" | F

|}
显示▼隐藏▲实际显示
列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"
| [[File:StarIconBronze.png|120px]]
| [[File:StarIconGold.png|120px|Caption when mouse-over image]]
| [[File:StarIconGreen.png|120px|Green stellar icon]]
|- align="center"
| 棕色星星 || 金色星星 || 绿色星星

|}

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

显示▼隐藏▲实际显示
StarIconBronze.png Caption when mouse-over image Green stellar icon
棕色星星 金色星星 绿色星星

颜色设置中的参数“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"
| 棕色星星 || 金色星星 || 绿色星星

|}
显示▼隐藏▲实际显示

StarIconBronze.png

Caption when mouse-over image

Green stellar icon

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

[编辑] 表格居中

表格默认靠右,可通过设置“style="margin: 1em auto 1em auto;"”实现表格居中。但居中后文字非环绕表格,表格左右为空白。

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

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

|}
显示▼隐藏▲实际显示
单元格左对齐,表格居中
标题1标题1标题1 标题2 标题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
|}
即出现插入表格设置对话框,默认设置如下所示。

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

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

单元格左对齐,表格居中
标题1 标题2 标题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
|}

|}
显示▼隐藏▲实际显示
单元格1 单元格2
嵌套
表格
原表再次开始
A
B B
C
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
|}

将有这样的效果:

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

[编辑] 嵌套表格

{| border=1
|原有
|
{| style="background:blue; color:white" border=2
|插入
|-
|表格
|}
|表格
|}

生成:

原有
插入
表格
表格

[编辑] 带标题的表格

{| border=1 align=center
|+<font color=red>
'''这是标题'''</font>
请参看:
|[[建国]]||1949年
|-
|[[国家]]
|[[中华人民共和国]]
|-
|[[时区]]||[[UTC]]+8
|-
|[[国歌]]||[[义勇军进行曲]]
|-
|[[域名]]||.cn
|}
这是标题 请参看:
建国 1949年
国家 中华人民共和国
时区 UTC+8
国歌 义勇军进行曲
域名 .cn

[编辑] 带颜色的表格

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

{| border=1
| bgcolor=blue | <font color=yellow> 字黃背景藍
| 沒設定顏色
| style="background:red; color:yellow" | 字黃背景紅
| 沒設定顏色
|}

生成:

字黄背景蓝 没设定颜色 字黄背景红 没设定颜色

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

{| style="background:yellow; color:blue" border=1
|-
| 這行是
| 藍字
| 黃背景
|- style="background:navy; color:white"
| 這行是
| 白字
| 深海藍
|-
| 這行
| style="background:white" | 比較
| 不一樣
|}

生成:

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

像其他参数一样,颜色参数指定的优先级为:单格→一行(列)→整个表格。
HTML4.01制定16种颜色名称,附上16进位值如下所示:

black #000000
silver #c0c0c0
maroon #800000
red #ff0000
navy #000080
blue #0000ff
purple #800080
fuchsia #ff00ff
green #008000
lime #00ff00
olive #808000
Yellow #ffff00
teal #008080
aqua #00ffff
gray #808080
white #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
|}

将得到这样的结果:

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 Wiki语法对照

  XHTML HTML & Wiki-td Wiki-pipe
Table <table></table> <table></table>
{|
|}
Caption <caption>caption</caption> <caption>caption</caption>
|+ caption
Row <tr></tr> <tr>
|-
Data cell <td>cell1</td>
<td>cell2</td>
<td>cell1
<td>cell2
| cell1
| cell2
Data cell <td>cell1</td> <td>cell2</td> <td>cell3</td> <td>cell1 <td>cell2 <td>cell3
| cell1 || cell2 || cell3
Header cell <th>heading</th> <th>heading
! heading
Sample table
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
|}
Sample table
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
  XHTML HTML & Wiki-td Wiki-pipe

[编辑] 外部链接

显示▼隐藏▲
 ·  ·

维基计划的帮助目录

维基计划的帮助页面

阅读

访问、登入和参数设置

跟踪更改

编辑

高级
  评论这张
 
阅读(2255)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018