Mediawiki table常用语法格式

!符号的使用

!是一个表头符号,使用后可以对所使用的第一个单元格内容进行加粗显示。也可以用于一些其它语句的使用。所使用符号请用英文符号。 源码:

{| class="wikitable"
|-
! style="text-align:left;"|名称 !! 数量 !! 成本
|-
| 牛奶 || 77 || 777
|-
| 鸡蛋 || 88 || 888
|-
| 花生 || 99 || 999
|-
|总量 || || 2664
|}


显示效果:

名称 数量 成本
牛奶 77 777
鸡蛋 88 888
花生 99 999
总量   2664

我们在这里发现有两处使用了 !符号,两处的字体都显示为粗体。

Mediawiki table常用语法格式NOTICE

前面的一段是当前行的CSS样式,中间用 | 格开,后面是当前行显示的内容

 

+ 符号的使用

+这个符合,使用后会在表格上方显示一行粗体字,如我们想表达这个表格是做什么的,可以使用这个符号。

 

{| class="wikitable"
|+产品进货单
|-
! style="text-align:left;"|名称 !! 数量 !! 成本
|-
| 牛奶 || 77 || 777
|-
| 鸡蛋 || 88 || 888
|-
| 花生 || 99 || 999
|-
|总量 || || 2664
|}


显示效果:

产品进货单
名称 数量 成本
牛奶 77 777
鸡蛋 88 888
花生 99 999
总量   2664

class= 的使用

mediawiki默认的带标题的表格使用了wikitable类显示样式(浅灰色背景、边界、填充和左对齐),如果我们想要创造出不同样式的表格效果,可以定义我们自己的表格类来实现。

colspan 和 rowspan的使用

colspan用于行合并,而 rowspan用于列合并,这里使用要比html里的table好用的多,因为这种表格方式更加明了。

源码:

{| class="wikitable"
!colspan="6"|购物清单
|-
|rowspan="2"|面包和黄油
|黄瓜
|面包
|小麦
|colspan="2"|西红柿
|-
|奶酷
|colspan="2"|冰淇淋
|黄油
|酸奶
|}

显示效果:

购物清单
面包和黄油 黄瓜 面包 小麦 西红柿
奶酷 冰淇淋 黄油 酸奶

单元格内容对齐

我们来看一个官方九宫格的对齐特效:

源码:

{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}

显示效果:

A B C
D E F
G H I

宽度和高度

宽度是width,高度是height,有两种定义方法,一种是直接使用width="50%"另一种是style="width:50%".

源码:

{| class="wikitable" style="width: 60%; height: 200px;"
|-
| top-left-cell || top-center-cell || top-right-cell
|- style="height: 100px;"
| middle-left-cell || style="width: 200px;" | middle-center-cell || middle-right-cell
|-
| bottom-left-cell || bottom-center-cell || bottom-right-cell
|}

显示效果:

top-left-cell top-center-cell top-right-cell
middle-left-cell middle-center-cell middle-right-cell
bottom-left-cell bottom-center-cell bottom-right-cell

 

表格样式

表格里的内容完全可以用css或html的语法进行样式设置,只要你会,就会形成很多种风格。

表格内容排序

表格内容是可以排序显示的,但好像需要加载一些javascript项,现在我还没明白怎么加载,等以后明白了再发出来。

评论

大侠名号:   验证暗号: 点击我更换图片

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND