帮助:表格的实现
查看全部帮助页面命名空间:Help
wiki表格的使用一直是很常用但不容易掌握的知识。在站长百科WIKI站中,可以使用HTML语法来创建表格,但是我们强烈建议使用WIKI语法来创建,因为WIKI语法通常会更加简便。如果想要熟练地使用Wiki语法制作表格,可能还是需要一些HTML语法知识。
最简单的表格代码如下:
{| border="1"
|-
! 表头1
! 表头2
! 表头3
|-
| 第一行第一列
| 第一行第二列
| 第一行第三列
|-
| 第二行第一列
| 第二行第二列
| 第二行第三列
|}
效果如下:
| 表头1 | 表头2 | 表头3 |
|---|---|---|
| 第一行第一列 | 第一行第二列 | 第一行第三列 |
| 第二行第一列 | 第二行第二列 | 第二行第三列 |
基本语法
简单表格的实现
- Wiki表格需要通过“{|”和“|}”两个记号界定其起止,如下:
{|
表格内容
|}
- 表格的开头可以通过“|+”记号添加一个标题,此标题位于表格之外,如下:
{|
|+ 表格标题
表格内容
|}
- 使用标记“|-”可以添加一个新行,而其中的单元格会在其后自动加入:
{|
|+ 表格标题
|- 单元格内容
|- 单元格内容
|}
- 每一个记号“|”开始一个单元格:
{|
|+ 表格标题
|-
| 单元格内容
|-
| 下一行单元格内容
| 另一列的单元格内容
|}
- 隔行的标记“|”可以替换为不用换行的“||”,如下:
{|
|+ 表格标题
|-
| 单元格 || 单元格 || 单元格
|-
| 单元格
| 单元格
| 单元格
|}
*注意,如果在同一行中包含多个“|”标记,则会产生一些意想不到的效果,如:
<font size="4px"><pre>{| border="1"
|-
|格式修饰符(不显示)| 单元格内容
|-
|}
效果如下:
| 单元格内容 |
- 针对上面的格式修饰符,举个简单的例子:
{| border="1px"
|-
|第一格(没用修饰符)
|-
|align="right" |第二格(右对齐)
|}
效果如下:
| 第一格(没用修饰符) |
| 第二格(右对齐) |
- 将表格中的管道符“|”置换为“!”,||”置换为“!!”,则会显示加粗的表头。
- 关于border参数的取值,有兴趣的朋友可以试一下改变border值的大小,看看显示的效果!
让我们来整理一下以上的内容:
{| border="1px"
|+ 乘法表
|-
! X !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|}
看看它显示的效果:
| X | 1 | 2 | 3 |
|---|---|---|---|
| 1 | 1 | 2 | 3 |
| 2 | 2 | 4 | 6 |
稍微复杂点的:
{| align="right" border="1px"
|-
|单元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"
|+ <font color=red>表格的嵌套</font>
| 原有
|
{| style="background:blue; color:white" border="2"
|-
| 插入
|-
| 表格
|}
| 表格
|}
效果如下:
| 原有 |
|
表格 |
表格里增加内链
{| border=1
|[[站长百科]] || [[Wiki]]
|-
|[[数据库]] || [[MySql]]
|}
效果如下:
| 站长百科 | Wiki |
| 数据库 | MySql |
设定表格的行高与列宽
整个表格的行高(height)和列宽(width),以及任意列的列宽可以进行设定。要设定任意行的行高,可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定,那么表格的显示结果可能随浏览器的不同而不同。
{| style="width:50%; height=200px" border=1
|-
| A
| B
| C
|- style="height=50px; width:50px"
| D
| style="width:120px"| E
| F
|-
| G
| H
| I
|}
效果如下:
| A | B | C |
| D | E | F |
| G | H | I |
|
编辑手册导航 |
|
编辑交流: Wiki编辑交流 |