来自qwiki

阅读:422

  

更新日期:2022-08-08

  

最新编辑:Admin


前言

  • 表格可以有序地呈现信息,方便用户快速理解一些内容,常用于展示具有相同格式特征的数据内容。
  • WIKI中可以使用HTML语法创建表格,但使用WIKI语法会更加简便。
  • 一个基本表格的标记语言语法如下表所示(均为英文半角符号):
基本语法
{| 表格起始,必要组成部分
|+ 表格描述文字,选用;每张表格仅含一次描述(在表格起始与第一行之间),即表格标题
|- 表格行,第一行选用,其余行必用,即切割行的标识
! 表格头 ,选用。 !!可以在同一行接入所有列的标题,单独用!换新行可以标识行的标题
| 单元格,选用。 一个完整的单元格为 |A|,所以一行两个单元格为 |A||B|,以此类推
|} 表格结束,必要组成部分

表格插入方式

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

方式1:工具栏添加

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

表格1.png

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

表格2.png

  • 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.按照需求修改表格内容后,表格效果如下:
表格标题
第一列标题 第二列标题文本 第三列标题文本
1,1 1,2 1,3
2,1 2,2 2,3
3,1 3,2 3,3

方式2:代码添加

  • 直接在编辑器中按照需求写入表格代码,可以实现更多的表格样式。
  • 下面为一个表格代码示意:
{| class="wikitable" 
|+ 表格示例
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}
表格示例
行1标题 行1内容
行2标题 行2内容


表格样式

表格排序

  • 将默认表格中的 class="wikitable" 改为 class="wikitable sortable"
表格示例
代码 效果
{| class="wikitable sortable" 
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}
列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内容
|-
|}
列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内容
|-
|}
列1标题 列2标题
行1标题 行1内容
行2标题 行2内容

表格格式

表格大小

  • 调整表格整体高度: class="wikitable" style="height: ***px" (***代表表格高度的像素)
表格示例
代码 效果
{| class="wikitable" style="height: 200px" 
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}
列1标题 列2标题
行1标题 行1内容
行2标题 行2内容


  • 调整表格单行高度:|- style="height: ***px" (***代表表格高度的像素)
表格示例
代码 效果
{| class="wikitable"
!列1标题!!列2标题
|- style="height: 100px" 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}
列1标题 列2标题
行1标题 行1内容
行2标题 行2内容


  • 调整表格相对宽度:class="wikitable" style="width: ***%" (***代表表格宽度占页面比例的百分比)
表格示例
代码 效果
{| class="wikitable" style="width: 50%"
!列1标题!!列2标题
|- 
! 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}
列1标题 列2标题
行1标题 行1内容
行2标题 行2内容


  • 调整表格单列宽度:在每个表格代表标题的 ! 后写下 width=***px | (***代表表格高度的像素)
表格示例
代码 效果
{| class="wikitable"
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| 行1内容
|-
! 行2标题
| 行2内容
|-
|}
列1标题 列2标题
行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内容
|-
|}
列1标题 列2标题
行1标题 行1内容
行2标题 行2内容


  • 以上是对表格整体颜色的修改,同理,如果将语句放在单个单元格/行/列,可以仅修改该单元格/行/列的颜色:
表格示例
代码 效果
{| class="wikitable" 
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| style="background: #6495ED; color: #F0F8FF"|行1内容
|-
! 行2标题
| 行2内容
|-
|}
列1标题 列2标题
行1标题 行1内容
行2标题 行2内容
  • 颜色修改的优先级顺序为:单个单元格 > 行/列 > 整个表格。这意味着,当这个表格的颜色设定之后,在单个单元格上额外设定的颜色将覆盖此前整体设定的颜色。
表格示例
代码 效果
{| class="wikitable" style="background:#F0F8FF ; color: #6495ED"
!列1标题!!列2标题
|- 
! width: 100px | 行1标题
| style="background: #DAA520; color: #FFFACD"|行1内容
|-
! 行2标题
| 行2内容
|-
|}
列1标题 列2标题
行1标题 行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内容
|-
|}
列1标题 列2标题
行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内容
|-
|}
列1标题 列2标题
行1标题 行1内容
行2标题 行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
|}
A B
C D
E F
G H I
J K
L
举报