WIKI表格的实现

wangsisi

wiki表格的使用一直是很常用但不容易掌握的知识。在站长百科WIKI站中，可以使用HTML语法来创建表格，但是我们强烈建议使用WIKI语法来创建，因为WIKI语法通常会更加简便。如果想要熟练地使用Wiki语法制作表格，可能还是需要一些HTML语法知识。
最简单的表格代码如下：

1. {| border="1"
   
2. |-
   
3. ! 表头1
   
4. ! 表头2
   
5. ! 表头3
   
6. |-
   
7. | 第一行第一列
   
8. | 第一行第二列
   
9. | 第一行第三列
   
10. |-
    
11. | 第二行第一列
    
12. | 第二行第二列
    
13. | 第二行第三列

复制代码

|}效果如下：

表头1	表头2	表头3
第一行第一列	第一行第二列	第一行第三列
第二行第一列	第二行第二列	第二行第三列

基本语法 简单表格的实现

• Wiki表格需要通过“{|”和“|}”两个记号界定其起止，如下:
  

1. {|
   
2. 表格内容
   
3. |}
   
4. 
   

复制代码

表格的开头可以通过“|+”记号添加一个标题，此标题位于表格之外，如下：

1. {|
   
2. |+ 表格标题
   
3.    表格内容
   
4. |}

复制代码

• 使用标记“|-”可以添加一个新行，而其中的单元格会在其后自动加入：
  

1. {|
   
2. |+ 表格标题
   
3. |- 单元格内容
   
4. |- 单元格内容
   
5. |}

复制代码

• 每一个记号“|”开始一个单元格:
  1. {|
     
  2. |+ 表格标题
     
  3. |-
     
  4. | 单元格内容
     
  5. |-
     
  6. | 下一行单元格内容
     
  7. | 另一列的单元格内容
     
  8. |}
     
  9. 
     

  复制代码
  
  

• 隔行的标记“|”可以替换为不用换行的“||”，如下：
  

1. {|
   
2. |+ 表格标题
   
3. |-
   
4. | 单元格 || 单元格 || 单元格
   
5. |-
   
6. | 单元格
   
7. | 单元格
   
8. | 单元格
   
9. |}
   
10. 
    
11. *注意，如果在同一行中包含多个“|”标记，则会产生一些意想不到的效果，如：
    
12. <font size="4px"><pre>{| border="1"
    
13. |-
    
14. |格式修饰符（不显示）| 单元格内容
    
15. |-
    
16. |}
    

复制代码

效果如下：

单元格内容

• 针对上面的格式修饰符，举个简单的例子：
  

1. {| border="1px"
   
2. |-
   
3. |第一格（没用修饰符）
   
4. |-
   
5. |align="right" |第二格（右对齐）
   
6. |}
   

复制代码

效果如下：

第一格（没用修饰符）

第二格（右对齐）

• 将表格中的管道符“|”置换为“!”，||”置换为“!!”，则会显示加粗的表头。
  

• 关于border参数的取值，有兴趣的朋友可以试一下改变border值的大小，看看显示的效果！
  

让我们来整理一下以上的内容：

1. {| border="1px"
   
2. |+ 乘法表
   
3. |-
   
4. ! X !! 1 !! 2 !! 3
   
5. |-
   
6. ! 1
   
7. | 1 || 2 || 3
   
8. |-
   
9. ! 2
   
10. | 2 || 4 || 6

复制代码

|}看看它显示的效果：
乘法表

X	1	2	3
1	1	2	3
2	2	4	6

稍微复杂点的：

1. {| align="right" border="1px"
   
2. |-
   
3. |单元1，行1
   
4. |rowspan=2| 单元2,行1+2
   
5. |单元3，行1
   
6. |-
   
7. | 单元1，行2 || 单元3，行2
   
8. |-
   
9. | 单元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：

1. {| border="1" cellpadding="5" cellspacing="0"
   
2. |-
   
3. ! 栏目一 !! 栏目二 !! 栏目三
   
4. |-
   
5. | rowspan=2| A
   
6. | colspan=2 align="center"| B
   
7. |-
   
8. | C
   
9. | D
   
10. |-
    
11. | colspan=2 align="center"| E
    
12. | F
    
13. |-
    
14. | rowspan=3| G
    
15. | H
    
16. | I
    
17. |-
    
18. | J
    
19. | K
    
20. |-
    
21. | colspan=2 align="center"| L
    
22. |}

复制代码

将会看到这样的效果：

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

表格的嵌套

1. {| border="1"
   
2. |+ <font color=red>表格的嵌套</font>
   
3. | 原有
   
4. |
   
5. {| style="background:blue; color:white" border="2"
   
6. |-
   
7. | 插入
   
8. |-
   
9. | 表格
   
10. |}
    
11. | 表格
    
12. |}

复制代码

效果如下：
表格的嵌套

原有

插入 表格

表格

表格里增加内链

1. {| border=1
   
2. |[[站长百科]] || [[Wiki]]
   
3. |-
   
4. |[[数据库]] || [[MySql]]
   
5. |}

复制代码

效果如下：

站长百科	Wiki
数据库	MySql

设定表格的行高与列宽整个表格的行高(height)和列宽(width)，以及任意列的列宽可以进行设定。要设定任意行的行高，可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定，那么表格的显示结果可能随浏览器的不同而不同。

1. {| style="width:50%; height=200px" border=1
   
2. |-
   
3. | A
   
4. | B
   
5. | C
   
6. |- style="height=50px; width:50px"
   
7. | D
   
8. | style="width:120px"| E
   
9. | F
   
10. |-
    
11. | G
    
12. | H
    
13. | I
    
14. |}

复制代码

效果如下：

A	B	C
D	E	F
G	H	I