查看“帮助:表格的实现”的源代码

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

== 简单的表格代码 ==
最简单的表格代码如下： 

 <nowiki>{| border="1"
 |-
 ! 表头1
 ! 表头2
 ! 表头3
 |-
 | 第一行第一列
 | 第一行第二列
 | 第一行第三列
 |-
 | 第二行第一列
 | 第二行第二列
 | 第二行第三列
 |}</nowiki>

效果如下：

{| border="1"
|-
! 表头1
! 表头2
! 表头3
|-
| 第一行第一列
| 第一行第二列
| 第一行第三列
|-
| 第二行第一列
| 第二行第二列
| 第二行第三列
|}

== 基本语法 ==
*wiki表格需要通过“{|”和“|}”两个记号界定其起止，如下: 
 <nowiki>{|
 表格内容
 |}</nowiki>
*表格的开头可以通过“|+”记号添加一个标题，此标题位于表格之外，如下：
 <nowiki>{|
 |+ 表格标题
    表格内容
 |}</nowiki>
*使用标记“|-”可以添加一个新行，而其中的单元格会在其后自动加入： 
 <nowiki>{|
 |+ 表格标题
 |- 单元格内容
 |- 单元格内容
 |}</nowiki>
*每一个记号“|”开始一个单元格: 
 <nowiki>{|
 |+ 表格标题
 |-
 | 单元格内容
 |-
 | 下一行单元格内容
 | 另一列的单元格内容
 |}</nowiki>
*隔行的标记“|”可以替换为不用换行的“||”，如下： 
 <nowiki>{|
 |+ 表格标题
 |-
 | 单元格 || 单元格 || 单元格
 |-
 | 单元格
 | 单元格
 | 单元格
 |}</nowiki>
*注意，如果在同一行中包含多个“|”标记，则会产生一些意想不到的效果，如：
 <nowiki>{| border="1"
 |-
 |格式修饰符（不显示）| 单元格内容 
 |-
 |}</nowiki>
效果如下：
{| border="1"
|-
|格式修饰符（不显示）| 单元格内容 
|-
|}
*针对上面的格式修饰符，举个简单的例子： 
 <nowiki>{| border="1px"
 |-
 |第一格（没用修饰符）
 |-
 |align="right" |第二格（右对齐）
 |}</nowiki>
效果如下：
{| border="1px"
|-
|第一格（没用修饰符）
|-
|align="right" |第二格（右对齐）
|}
*将表格中的管道符“|”置换为“!”，||”置换为“!!”，则会显示加粗的表头。 
*关于border参数的取值，你可以试一下改变border值的大小，看看显示的效果。

让我们来整理一下以上的内容： 
 <nowiki>{| border="1px"
 |+ 乘法表
 |-
 ! X !! 1 !! 2 !! 3
 |-
 ! 1
 | 1 || 2 || 3
 |-
 ! 2
 | 2 || 4 || 6
 |}</nowiki>
看看它显示的效果：
{| border="1px"
|+ 乘法表
|-
! X !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|}

稍微复杂点的：
 <nowiki>{| align="right" border="1px"
 |-
 |单元1，行1
 |rowspan=2| 单元2,行1+2
 |单元3，行1
 |-
 | 单元1，行2 || 单元3，行2
 |-
 | 单元1，行3 || 单元2，行3 || 单元3，行3
 |}</nowiki>
看看它显示的效果：


{| align="right" border="1px"
|-
|单元1，行1
|rowspan=2| 单元2,行1+2
|单元3，行1
|-
| 单元1，行2 || 单元3，行2
|-
| 单元1，行3 || 单元2，行3 || 单元3，行3
|}



同时使用COLSPAN和ROWSPAN： 
 <nowiki>{| 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
 |}</nowiki>
将会看到这样的效果：
{| 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
|}

== 表格的嵌套 ==
 <nowiki>{| border="1"
 |+ <font color=red>表格的嵌套</font>
 | 原有
 |
 {| style="background:blue; color:white" border="2"
 |- 
 | 插入
 |-
 | 表格
 |}
 | 表格
 |}</nowiki>
效果如下：
{| border="1"
|+ <font color=red>表格的嵌套</font>
| 原有
|
{| style="background:blue; color:white" border="2"
|- 
| 插入
|-
| 表格
|}
| 表格
|}

== 表格里增加内链 ==
 <nowiki>{| border=1
 |[[喵wiki]] || [[nyanwiki]]
 |-
 |[[喵窝]] || [[yui-nya]]
 |}</nowiki>
效果如下
{| border=1
|[[喵wiki]] || [[nyanwiki]]
|-
|[[喵窝]] || [[yui-nya]]
|}

== 设定表格的行高与列宽 ==
整个表格的行高(height)和列宽(width)，以及任意列的列宽可以进行设定。要设定任意行的行高，可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定，那么表格的显示结果可能随浏览器的不同而不同。 
 <nowiki>{| style="width:50%; height=200px" border=1
 |-
 | A
 | B
 | C
 |- style="height=50px; width:50px" 
 | D
 | style="width:120px"| E
 | F
 |-
 | G
 | H
 | I 
 |}</nowiki>
效果如下：
{| style="width:50%; height=200px" border=1
|-
| A
| B
| C
|- style="height=50px; width:50px" 
| D
| style="width:120px"| E
| F
|-
| G
| H
| I 
|}

[[category:帮助]]