帮助:表格

前言

• 表格可以有序地呈现信息，方便用户快速理解一些内容，常用于展示具有相同格式特征的数据内容。
• WIKI中可以使用HTML语法创建表格，但使用WIKI语法会更加简便。
• 一个基本表格的标记语言语法如下表所示（均为英文半角符号）：

表格插入方式

表格有以下两种插入方式。

方式1：工具栏添加

• 1.进入页面编辑模式，将光标置于在需插入表格的位置，然后点击工具栏中的表格按钮。

• 2.按照需求设置表格，点击插入即可。

• 3.此时编辑框中插入的代码含义如下

{| class="wikitable sortable"
|+ 表格标题
|-
! 第一列标题 !! 第二列标题文本 !! 第三列标题文本
|-
| 1，1 || 1，2 || 1，3
|-
| 2，1 || 2，2 || 2，3
|-
| 3，1 || 3，2 || 3，3
|}

• 注：这里的sortable表示表格可以排序，sortable可以去掉。数字按照大小顺序，字母按照音序表顺序，中文按照Unicode顺序，可升序活降序

• 4.按照需求修改表格内容后，表格效果如下：

方式2：代码添加

• 直接在编辑器中按照需求写入表格代码，可以实现更多的表格样式。
• 下面为一个表格代码示意：

{| class="wikitable" 
|+ 表格示例
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

表格样式

表格排序

• 将默认表格中的 class="wikitable" 改为 class="wikitable sortable"

{| class="wikitable sortable" 
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

• 从上例也可以看出，所谓行/列标题其实只是使相应内容字体加粗，而不一定是作为标题存在，也可以利用这种特性来达到强调表格中某些内容的效果。

展开折叠

• 默认展开：将默认表格中的 class="wikitable" 改为 class="wikitable mw-collapsible mw-made-collapsible"

{| class="wikitable mw-collapsible mw-made-collapsible" 
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

• 默认折叠：将默认表格中的 class="wikitable" 改为 class="wikitable mw-collapsible mw-made-collapsible mw-collapsed"

{| class="wikitable mw-collapsible mw-made-collapsible mw-collapsed" 
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

表格格式

表格大小

• 调整表格整体高度： class="wikitable" style="height: ***px" （***代表表格高度的像素）

{| class="wikitable" style="height: 200px" 
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

• 调整表格单行高度：|- style="height: ***px" （***代表表格高度的像素）

{| class="wikitable"
!列1标题!!列2标题
|- style="height: 100px" 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

• 调整表格相对宽度：class="wikitable" style="width: ***%" （***代表表格宽度占页面比例的百分比）

{| class="wikitable" style="width: 50%"
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

• 调整表格单列宽度：在每个表格代表标题的 ! 后写下 width=***px | （***代表表格高度的像素）

{| class="wikitable"
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

表格颜色

• 文字颜色： style="color: xxx" (xxx表示颜色的16进制编号)
• 背景颜色： style="background: xxx" (xxx表示颜色的16进制编号)

{| class="wikitable" style="background:#F0F8FF ; color: #6495ED"
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

• 以上是对表格整体颜色的修改，同理，如果将语句放在单个单元格/行/列，可以仅修改该单元格/行/列的颜色：

{| class="wikitable" 
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| style="background: #6495ED; color: #F0F8FF"|行1内容
|-
! 行2标题
| 行2内容
|-
|}

• 颜色修改的优先级顺序为：单个单元格 > 行/列 > 整个表格。这意味着，当这个表格的颜色设定之后，在单个单元格上额外设定的颜色将覆盖此前整体设定的颜色。

{| class="wikitable" style="background:#F0F8FF ; color: #6495ED"
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| style="background: #DAA520; color: #FFFACD"|行1内容
|-
! 行2标题
| 行2内容
|-
|}

表格边框

• 表格边框默认的是一种带阴影的复杂双线边框，但可通过样式参数设置为其他形式。例如在class语句后加入style="border: 1px solid darkgray"可以使边框为细实线。当仅想调整粗细程度时，可在class语句后直接加入border="xx"（xx为数字，表示边框的粗细程度）
• 注：使用边内空白参数“cellpadding”或“cellspacing”时，必须设置边框。

{| class="wikitable" style="border: 4px solid blue"
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}

对齐形式

• 文字左对齐：align="left"；
• 文字居中：align="center"；
• 文字右对齐：align="right"。

{| class="wikitable" style="width:100%"
!列1标题!!列2标题
|- 
! align="left" | 行1标题
| align="center"|行1内容
|-
! 行2标题
| align="right"|行2内容
|-
|}

合并单元格

• 合并列：rowspan="x" （x为想合并的单元格数）
• 合并行：colspan="x" （x为想合并的单元格数）

{| border="1" 
|-
! 一 !! 二 !! 三
|-
| 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
|}