该条目的内容同 Combine OverWiki 相关。
该条目处于部分保护状态。点击以获取更多信息。

帮助:表格

From Combine OverWiki, the original Half-Life wiki and Portal wiki
Jump to: navigation, search

该条目的内容同 Combine OverWiki 相关。
该条目处于部分保护状态。点击以获取更多信息。

引言[edit]

在创建表格时,您可以使用HTML代码,不过也可以使用Combine OverWiki提供的另一种简易方法。如果您想要把一个HTML格式的表格转换成维基表格的话,请参考维基表格生成器

管道句法教程[edit]

本维基使用“|”(又称“管道符”)来创建表格。以下是对如何创建表格的详解与范例。

  • 整个表格都应被两对大括号和竖杠(“管道”)所包围。所以请使用{|开始表格,并用|}结束它。每一对大括号和竖杠都应该占有单独的一行:
{|
在此输入表格代码
|}
  • 可选的表格标题可通过在行首输入一条竖杠和一个加号(“|+”)添加,然后在后面输入文本:
{|
|+ 标题
请在此输入表格代码
|}
  • 要想开启新的表格行,请在单独一行中输入一条竖杠和一个连字符(“|-”),该表格行的单元格就会在下方起始。
{|
|+ 表格的标题
|-
请在此处输入单元格代码
|-
请在此处输入单元格代码
|}
  • 请把每个单元格的代码输入在下一行里,并用一条竖杠起始:
{|
|+ 表格的标题
|-
| 请在此处输入单元格代码
|-
| 请在此处输入下一行的单元格代码
| 请在此处输入同一行的更多单元格
|}
  • 单元格既可以通过另起一行分隔,也可以通过一条新的竖杠,或同一行中的两条竖杠(“||”)分隔。两种方式的效果是相同的。
{|
|+ 表格的标题
|-
|单元格 1 || 单元格 2 || 单元格 3
|-
|单元格 甲 
|单元格 乙
|单元格 丙
|}
  • 一行列标题的显著特征是使用“!”和“!!”起始,而非“|”和“||”。因浏览器种类而异,列标题格通常和普通单元格的显示方式不同。它们经常以居中、加粗的形式显示。
{|
|+ 表格的标题
! 列标题 1 !! 列标题 2 !! 列标题 3
|-
|单元格 1 || 单元格 2 || 单元格 3
|-
|单元格 甲
|单元格 乙
|单元格 丙
|}
  • 一行里第一个单元格被认为是行标题,以“!”而非“|”起始,并在新一行输入随后的单元格。
{|
|+ 表格的标题
! 列标题 1 !! 列标题 2 !! 列标题 3
|-
! 行标题 1 
| 单元格 2 || 单元格 3
|-
! 行标题 甲 
|单元格 乙
|单元格 丙
|}
  • 可选的参数能够更改一个单元格、某一行,甚至整个表格的属性。举例来说,可以给表格添加一个边框:
{| border="1"
|+ 表格的标题
! 列标题 1 !! 列标题 2 !! 列标题 3
|-
! 行标题 1
| 单元格 2 || 单元格 3
|-
! 行标题 甲
|单元格 乙 ||单元格 丙
|}

最终的表格会显示为如下样式:

表格的标题
列标题 1 列标题 2 列标题 3
行标题 1 单元格 2 单元格 3
行标题 甲 单元格 乙 单元格 丙

表格的参数和HTML中一样,详见[1]HTML元素#表格

就算每个单元格中都没有内容,表格也依然很有用。举例说,单元格的背景色可以通过参数调整是表格变成一张示意图,就像这个方形 8x8 五格骨牌示例一样。以“图片”形式展现的表格比上传的图片好编辑得多。

每一行的单元格数量都必须相同,以保证表格中的列数相同(除非有的单元格横跨数列,详见下方的混合表格示例的行距和列距)。对于空单元格来说,请使用不间断空格(“&nbsp;”)以保证它们显示正常。要想在单元格里显示竖杠,请使用“<nowiki>|</nowiki>”或者“&#124;”。

范例[edit]

简单范例[edit]

以下两种格式的代码会生成相同段表格。请您根据每一行的单元格数和每个单元格内的总文本量选择合适的格式。

维基标记法

{| 
| 单元格 1,行 1 
| 单元格 2,行 1 
|- 
| 单元格 1,行 2 
| 单元格 2,行 2 
|}
{| 
| 单元格 1,行 1 || 单元格 2,行 1 
|- 
| 单元格 1,行 2 || 单元格 2,行 2 
|}

在浏览器中的外观

单元格 1,行 1 单元格 2,行 1
单元格 1,行 2 单元格 2,行 2

乘法表格[edit]

维基标记法

{| class="wikitable" style="background: #FFFFFF; text-align:center"
|+乘法表格
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

在浏览器中的外观

乘法表格
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

颜色与参数范围[edit]

为单个单元格确定文本颜色和北京的两种方法如下。首选第一种形式:

维基标记法

{| 
| style="background:red; color:white" | 甲乙丙
| 丁戊己
| bgcolor="red" | <font color="white"> 庚辛 </font>
| 壬癸
|}

在浏览器中的外观

甲乙丙 丁戊己 庚辛 壬癸

像其他的参数一样,整行或者整个表格也可以设定颜色;不过,单独一行的颜色会覆盖整个表格的颜色,而单独一格的颜色会覆盖整行的颜色。

维基标记法

{| 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

想要让表格和背景融合,就请使用style="background:none"代码。(警告:style="background:inherit"在有些浏览器上无法显示,包括Internet Explorer 6!)

宽度和高度[edit]

表格的宽度和高度可以设定,单独一行的高度也可以。要想设定一列的宽度,您可以设定其中任何一个单元格的宽度。如果未为所有列设定宽度,或者/和未为所有行设定高度,则会出现一些歧义,结果因浏览器而异。

维基标记法

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

在浏览器中的外观

abc def ghi
jkl mno pqr
stu vwx yz

请注意style="内嵌CSS"代码在有些浏览器上无效。如果必要的话,一些较老的句法结构比如width="75%"应该也可以在一些浏览器中运行。

设定列的宽度[edit]

如果您希望强行让列的宽度符合您的需求,而不是适应单元格中最宽文本元素的宽度,那么就请按照以下范例来做。注意,文本的环绕是强制的。

{| border="1" cellpadding="2"
!width="50"|名称
!width="225"|效果
!width="225"|出现于哪些游戏
|-
|精灵球
|普通精灵球
|所有版本
|-
|高级球
|比精灵球更好
|所有版本
|}
名称 效果 出现于哪些游戏
精灵球 普通精灵球 所有版本
高级球 比精灵球更好 所有版本

定位[edit]

您可以定位表格本身、行中和单元格中的所有内容,但不能使用一个参数将表格中所有内容都进行定位。详见表格示范。在任何情况下,都不要使用“float”给表格定位!在字体尺寸较大时,那样做会打乱页面显示。

混合表格[edit]

以下是一些更高级的示例,它们展示了更多可以组成表格的选项。您可以先在自己的表格上尝试这些选项,以测试它们的效果。不过,这些技巧并不适用于所有情况;比如说,仅仅因为您可以为表格添加背景颜色,也并不意味着这总是一个好主意。请您试着让表格里的代码相对简洁——请记住,其他人也要编辑条目!以下的范例只是让您知道有哪些能做的。

维基标记法

{| border="1" cellpadding="1" cellspacing="0" align="center"
|+'''一个示例表格'''
|-
! style="background:#efefef;" | 第一个标题
! colspan="2" style="background:#ffdead;" | 第二个标题
|-
| 左上方
|  
| rowspan=2 style="border-bottom:3px solid grey;" valign="top" |
右侧
|-
| style="border-bottom:3px solid grey;" | 左下方
| style="border-bottom:3px solid grey;" | 中下方
|-
| colspan="3" align="center" |
{| border="0"
|+''表中表''
|-
| align="center" width="150px" | [[File:wiki.png]]
| align="center" width="150px" | [[File:wiki.png]]
|-
| align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" |
两个Combine OverWiki标识
|}
|}

在浏览器中的外观

一个示例表格
第一个标题 第二个标题
左上方  

右侧

左下方 中下方
表中表
Wiki.png Wiki.png

两个Combine OverWiki标识

漂浮表格[edit]

维基标记法

这段话写在表格前面。天地玄黄宇宙洪荒......
{| align="right" border="1"
| 列1,行1
|rowspan="2"| 列2,行1(和2)
| 列3,行1
|- 
| 列1,行2
| 列3,行2
|}
注意右边的漂浮表格。这段话写在表格之后。天地玄黄宇宙洪荒......

在浏览器中的外观

这段话写在表格前面。天地玄黄宇宙洪荒......

列1,行1 列2,行1(和2) 列3,行1
列1,行2 列3,行2

注意右边的漂浮表格。这段话写在表格之后。天地玄黄宇宙洪荒......

嵌入式表格[edit]

以下显示了一个蓝色的表格嵌入在另一个表格的单元格2中。嵌入式表格需要另起一行开始。 维基标记法

{| border="1"
| &alpha;
| align="center" | 单元格2
{| border="2" style="background-color:#ABCDEF;"
| 内嵌式
|-
| 表格
|}
| valign="top" | 原本的表格
|}

在浏览器中的外观

α 单元格2
内嵌式
表格
原本的表格

综合使用ROWSPAN和COLSPAN[edit]

维基标记法

{| border="1" cellpadding="5" cellspacing="0"
|-
! 列 1 || 列 2 || 列 3
|-
| rowspan="2"| A
| colspan="2" align="center"| B
|-
| C
| D
|-
| E
| colspan="2" align="center"| F
|- 
| rowspan="3"| G
| H
| I
|- 
| J
| K
|-
| colspan="2" align="center"| L
|}

在浏览器中的外观

列 1 列 2 列 3
A B
C D
E F
G H I
J K
L

居中表格[edit]

表格可以居中,但又不会“漂浮”;这就是说,不会有文本出现在任何一侧。窍门是使用{| style="margin: 1em auto 1em auto"

维基标记法

[[Category:Pages containing wikitables]]{| class="wikitable" style="background: #FFFFFF; margin: 1em auto 1em auto"
|+ '''Cells left-aligned, table centered'''
! 天地 || 玄黄 || 宇宙
|-
| 洪荒 || 日月盈昃,辰宿列张 || 寒来暑往,秋收冬藏
|-
| 闰余成岁,律吕调阳 || 云腾致雨,露结为霜 || 金生丽水
|}

在浏览器中的外观

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

|+ Cells left-aligned, table centered ! 天地 || 玄黄 || 宇宙 |- | 洪荒 || 日月盈昃,辰宿列张 || 寒来暑往,秋收冬藏 |- | 闰余成岁,律吕调阳 || 云腾致雨,露结为霜 || 金生丽水 |}

设置参数[edit]

在一个单元格的起始,您可以在一条管道符后添加参数。比如说,width=300px|就会把单元格设为300个像素宽。要想设定多于一个单元格的参数,就请在每个格之间输入空格。请注意,这对标题格也适用。

维基标记法[edit]

{| style="color:white"
|-
! bgcolor="red"|单元格1 || width="300" bgcolor="blue"|单元格2 || bgcolor="green"|单元格3
|}

在浏览器中的外观[edit]

单元格1 单元格2 单元格3

小数点对齐[edit]

让多列数字在小数点处对齐的方法如下:

维基标记法

{| cellpadding="0" cellspacing="0"
|align="right"| 432 || .1
|-
|align="right"| 43 || .21
|-
|align="right"| 4 || .321
|}

在浏览器中的外观

432 .1
43 .21
4 .321

如果一列数字出现在一个带有单元格填充或者单元格间距的表格中,您也仍然可以对齐小数点,且中间不会留下难看的空隙。在每格数字的单元格中都嵌入一个表格,并设定好它们的列宽度。让嵌入表格的列宽度和这一列中每个单元格的宽度相同。(如果用这种方法仍然无法对齐小数点,那么主表格的列宽可能太窄了。请添加一个参数以增加宽度。)

维基标记法

{|border="1" cellpadding="4" cellspacing="2" width="72"
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 432 ||width="50%"| .1
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 43 ||width="50%"| .21
|}
|-
|
{|cellpadding="0" cellspacing="0" width="100%"
|align="right" width="50%"| 4 ||width="50%"| .321
|}
|}

在浏览器中的外观

432 .1
43 .21
4 .321

在简单的情况下,可以完全省去表格功能,只需要用空格开始一行,然后通过输入空格来对准数字。

432.1
43.21
4.321

样式类别[edit]

有些用户会创建CSS类别和模版,让制作表格样式更容易。这样,就不需要记住表格参数,而只用在{|后面包含相应的样式类别。这对保证表格格式一致很有帮助,还可以让对类别的一次修改就能解决问题或者优化所有使用它的表格的外观。举例来说,以下这样:

{| border="1" cellpadding="2"
|+乘法表格
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
 
乘法表格
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15
会变成这样:
{| class="wikitable"
|+乘法表格
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}
 
乘法表格
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

只需要把表格的参数(border="1" cellpadding="2"之类)改成class="wikitable",因为MediaWiki:Common.css中的wikitable类别包含一系列table.wikitable CSS样式规则。当您标记某表格为这一类别时,以上所有就都会被应用。之后,如果您需要的话,就可以添加更多的样式规则。它们会覆盖表格的规则,从而允许您使用样式类别为基础,并在此基础上进行构建:

维基标记法

{| class="wikitable" style="background: #FFFFFF; font-style:italic; font-size:120%; border:3px dashed red;"
|+乘法表格
|-
! &times; !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|-
! 4
| 4 || 8 || 12
|-
! 5
| 5 || 10 || 15
|}

在浏览器中的外观

乘法表格
× 1 2 3
1 1 2 3
2 2 4 6
3 3 6 9
4 4 8 12
5 5 10 15

请注意,该表格保留了wikitable样式的灰色背景,而且标题仍旧是加粗、居中的。不过,现在文本的格式被本地的“style”语句覆盖了;表格中所有的文本都变成了斜体,还加大到了正常尺寸的120%,而且wikitable边框也被换成了红色虚线边框。