Login.png
您还没有登录,请http://wiki.sosg.net/skins/monobook/user.gif点此登录后进行编辑。
如果您还没有在SOSG WIKI注册,请http://wiki.sosg.net/skins/monobook/user.gif点此注册
请注意SOSG WIKI的账号是不同于SOSG论坛账号的。


帮助:表格

来自SOSG Wiki
跳转至: 导航搜索
表格控制

本帮助参考自中文维基百科之Wikipedia:zh:表格,由pH按本wiki版本进行处理并删除了部分内容。


Wiki表格的语法与HTML表格的语法很相似。如果你想熟练的使用Wiki语法来制作表格,可能还需要一些HTML表格的语法知识。

2003年12月8日软件启用了新的表格符号,可用来代替<table>, <tr>, <td>, <th>, 和<caption>这些HTML标记。

下面介绍的表格符号必须在新的一行的开始使用(也有例外),并且可以使用一些在HTML表格标记中可用的参数。

MediaWiki也支持许多HTML标记,可以直接用在wikitext中。表格使用class="sortable"可以进行排序。

表格模板

注:维基百科没有这个模板。

Microsoft Word编辑法

说明

  • 这个是借助Office系列的强大功能,利用它,可以编辑复杂的表格。
  • 本教程使用软件为Office 2007。
  • 首先,你可以借助Excel或者Word编辑你想要的表格。之后的处理尤为重要。我们要保证wiki可以正确识别您的代码。
  1. 我们必须使用word来处理,如果您使用excel编辑的表格,请先导入到word
  2. 然后我们选择”另存为“,选择”其他格式中的“筛选过的网页(*.htm;*.html)“。之后会弹出一个提示,请选择”确定“
  3. 用”记事本“打开您刚才保存的文件,找到”<table class=****>“到”</table>“的部分。然后复制这些内容。
  4. 将您复制的内容黏贴到wiki中,预览您的表格
  5. 如果效果符合您的要求,保存即可。
  • 注意,如果您需要排序,指定class为sortable即可。

例子

这里提供一个例子的下载


  • 样式:

第一列

第二列

第三列

1-1

1-2

1-3

2-1

2-2

2-3

3-1

3-2

3-3

4-1

4-2

4-3

5-1

5-2

5-3

  • 排序:

您只需要修改代码中的

<table class=sortable border=1 cellspacing=0 cellpadding=0
 style='border-collapse:collapse;border:none'>

将“MsoTableLightShadingAccent2”替换为“sortable”就可以排序了。

第一列

第二列

第三列

1-1

1-2

1-3

2-1

2-2

2-3

3-1

3-2

3-3

4-1

4-2

4-3

5-1

5-2

5-3

表格标记

表格起止符号

这是一个典型的wiki表格。

第一部分 第二部分
第三部分 第四部分

它的源代码是这样的:

{| border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}

大家会发现,在典型的表格源代码中,最前和最后总有“{|”与“|}”两个标记。

{|
border="1"
|-
| 第一部分 || 第二部分
|-
| 第三部分 || 第四部分
|}

它是做什么用的?我们把它擦掉看看。

 border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分

得到

border="1" |- | 第一部分 || 第二部分 |- | 第三部分 || 第四部分

什么都不是了。说明这两个标记定义了表格的起止,是表格起止符号

border参数

再来看看典型的wiki表格。

第一部分 第二部分
第三部分 第四部分
{| border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}

如果将其中的border="1"改成border="5",则会看到这样的情况。

{| 
border="5" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

要是改成10呢?

{| border="10" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

如果改成20……

{| border="20" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

改成100的话,屏幕能装下吗?……

{| border="100" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

太大了。索性不要框框了。

{| border="0" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

如果没有 border= ,会是什么样?

{| 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

跟border="0"是一样的。

因为表格的默认样式就是没有 border 。

行和单元格

这个典型的表格,我觉得有不足的地方。

{| border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

让我改改。

{| border="1"
|- 
|| 第一部分 || 第二部分
|-  
|| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

哈哈,没有变。不过这样改的好处是,使得格子与格子之间都是“|| xxx”

“格子”的学名叫单元格

不如就用这样的格式,作为我们的典型格式好了。


如果我们要增添一横排的话,怎么做?

{| border="1"
|-
|| 第一部分 || 第二部分
|-
|| 第三部分 || 第四部分
|-
|| 第五部分 || 第六部分
|}
第一部分 第二部分
第三部分 第四部分
第五部分 第六部分

因此可以看出,“|-”表示新增一横排,同时也能看出表格是以横排加横排的方式组成的。

而“|| xxx”则是在一横排之中新增一个单元格,内容就是xxx。

如果把 |- 去掉,就成这样了。

第一部分 第二部分 第三部分 第四部分
{| border="1"  
| 第一部分 || 第二部分  
| 第三部分 || 第四部分
|}

全部成了一行。


开始一个新行,可以使用“|-”,或者“|-----------”,或者“|-------------------”。它们都相当于<tr>。

可以这样添加参数:“|- 参数”,或者“|------- 参数”。相当于“<tr 参数>”。

有的表格是这样写的:

{| border="1"
|- 
| 第一部分 
| 第二部分 
|- 
| 第三部分 
| 第四部分
|}
第一部分 第二部分
第三部分 第四部分

每增加一个格,就换一行用

| xx 

来表示。

但是,虽然机器读得懂这种方式,但却让人搞不懂横竖了。

行列标题

如果我们想创建这样一个乘法表

× 1 2 3
1 1 2 3
2 2 4 6



怎样才能做出行列标题(默认显示粗体字)的效果呢,很简单。将[ | ]全部换成[ ! ]。

{| border="1"
|-
! × !! 1 !! 2 !! 3
|}
× 1 2 3

不过,第一个单元格只能有一个 ! ,两个 !! 会显示错误

{| border="1"
!! × !! 1 !! 2 !! 3
|}
! × 1 2 3



那么,行列标题和普通格子(表格数据)混合是如何制作的?如下

{| border="1"
|-
!1
|| 1 || 2 || 3
|}


1 1 2 3

行列标题的单元格必须和普通格子的单元格分开。



如果不分开。

{| border="1"
! 1 || 1 || 2 || 3
|}


1 1 2 3

就全成行列标题了。



现在来试着自己写出开头那样的乘法表吧。

表格标题

表格的标题
第一部分 第二部分
第三部分 第四部分

这是一个带有总标题的表格,它的源文件是。

{| border="1"
|+ 表格的标题
|- 
|| 第一部分 || 第二部分
|-  
|| 第三部分 || 第四部分
|}

记住总标题的位置。总标题默认在表格的顶端,所以 |+ 要写在 |- 的上面。



我们再来创建一个带有总标题的乘法表。

乘法表
× 1 2 3
1 1 2 3
2 2 4 6
{| border="1"
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1 
|| 1 || 2 || 3
|-
! 2
|| 2 || 4 || 6
|}

标题的参数可以这样添加:

|+ 参数 标题

class参数

维基百科中最常用的表格是这样的。

乘法表
× 1 2 3
1 1 2 3
2 2 4 6
{| class="wikitable" 
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1 
|| 1 || 2 || 3
|-
! 2
|| 2 || 4 || 6
|}


或者使用模板{{wt}}

乘法表
× 1 2 3
1 1 2 3
2 2 4 6


{{subst:wt}}
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1 
|| 1 || 2 || 3
|-
! 2
|| 2 || 4 || 6
|}


这样就可以不去管border了。

实例

简单的例子

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


外部连结