美国虚拟主机Hostease

Mediawiki中文技术论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 11698|回复: 0

[编辑] WIKI表格的实现

[复制链接]
发表于 2010-12-21 10:19:46 | 显示全部楼层 |阅读模式
美国主机侦探
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. |}

复制代码

表格的开头可以通过“|+”记号添加一个标题,此标题位于表格之外,如下:
  1. {|
  2. |+ 表格标题
  3.    表格内容
  4. |}
复制代码


  • 使用标记“|-”可以添加一个新行,而其中的单元格会在其后自动加入:
  1. {|
  2. |+ 表格标题
  3. |- 单元格内容
  4. |- 单元格内容
  5. |}
复制代码


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

    复制代码


  • 隔行的标记“|”可以替换为不用换行的“||”,如下:
  1. {|
  2. |+ 表格标题
  3. |-
  4. | 单元格 || 单元格 || 单元格
  5. |-
  6. | 单元格
  7. | 单元格
  8. | 单元格
  9. |}

  10. *注意,如果在同一行中包含多个“|”标记,则会产生一些意想不到的效果,如:
  11. <font size="4px"><pre>{| border="1"
  12. |-
  13. |格式修饰符(不显示)| 单元格内容
  14. |-
  15. |}
复制代码

效果如下:
单元格内容
  • 针对上面的格式修饰符,举个简单的例子:
  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

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

BlueHost美国主机优惠码

Archiver|手机版|小黑屋|Mediawiki中文技术论坛

GMT+8, 2022-7-7 22:24 , Processed in 0.274167 second(s), 15 queries .

Powered by Discuz! X3.4

Copyright © 2001-2022, Tencent Cloud.

快速回复 返回顶部 返回列表