全站通知：

帮助:表格进阶教程

来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
Jj.png
本页面属于进阶教程
您正在阅读一篇进阶教程，建议在了解完所有 入门教程 之后再来阅读本页面。
  • 本页面需要先了解其入门教程 帮助:表格 后会更容易理解。另外本页面内容涉及一些html代码以及css代码。
  • 如果需要帮助，可以参考 帮助:目录 来了解如何编辑Wiki。

在表头定义整个表格样式

通常在{|后接class="类样式名"，可以引入早已经预制好的样式来定义表格的样式。这些样式可能预制在MediaWiki皮肤里也可能预制在MediaWiki:Common.css页面中。 

{|class=wikitable
|橘子
|苹果
|-
|面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格-->
|-
|奶油
|冰淇凌 
|}
橘子 苹果
面包 饼
奶油 冰淇凌

控制宽度(style="width:")

控制表格整体宽度

{|后除了接class="类样式名"，还可以接style="..."定义整个表格的元素。

演示内容 源码 实际效果
将表格的整体宽度占满整个空间 
{|class=wikitable style="width:100%"
|橘子
|苹果
|-
|面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格-->
|-
|奶油
|冰淇凌 
|}
橘子 苹果
面包 饼
奶油 冰淇凌

这个"width:100%"指表格的整体宽度占上一级元素宽度百分比。假如这个表格写在一个宽度只有70%的单元格或者<div>里例如：

演示内容 源码 实际效果
外面的表格只占空间内的70%，
内部的表格占满整个空间（空隙是外部表格的内边距） 
{|class=wikitable style="width:70%"
|只有70%宽的表格
|-
|

{|class=wikitable style="width:100%"
|-
|即使是100%宽度
|}

|}
只有70%宽的表格
即使是100%宽度
演示内容 源码 实际效果
使用
标签控制外部整宽为70%，
内部的表格则占满这70%的整个空间 
<div style="width:70%">只有70%宽的div
{|class=wikitable style="width:100%"
|-
|即使是100%宽度
|}

</div>
只有70%宽的div
即使是100%宽度

以上以百分比宽度来举例，因为百分比宽度兼容不同的设备更好一些，也可以写成100px这种具体像素宽度，只不过在调整页面的时候会非常痛苦。


控制单元格的宽度

和控制表格整体宽度一样,也是通过style="width:"来实现,这里要额外说明几点:

  • 如果表格整体没有定义宽度，那么单元格的百分比宽度就会失效。
  • 单元格的最大宽度影响整列最大宽度。
  • 缺省值默认补齐或寻找当前列的最大宽度。

具体的可以看如下的例子。

演示内容 源码 实际效果
控制单个单元格的宽度
左侧70%，右侧宽度的由整宽100%-70%=30% 
{|class=wikitable style="width:100%"
|style="width:70%"|这个单元个指定了宽度-70%<!--如果写成这个形式最好就不要表格里一行的所有单元格写在一行,而是每个单元格单起一行比较容易阅读-->
|这个单元格没有指定宽度,但是因为表格整体宽度是100%,所以这个单元格的宽度是100-70=30%
|-
|这个单元格没有指定宽度,但是会追随该列最大宽度
|这个也没有
|}
这个单元个指定了宽度-70% 这个单元格没有指定宽度,但是因为表格整体宽度是100%,所以这个单元格的宽度是100-70=30%
这个单元格没有指定宽度,但是会追随该列最大宽度 这个也没有
控制同一列2个单元格的宽度
左侧60%，右侧40% 
{|class=wikitable style="width:100%"
|-
|style="width:60%"|60%
|style="width:40%"|40%
|}
60% 40%
同一列，不同行设置的不同宽度，只会生效第一行的设置 
{|class=wikitable style="width:100%"
|style="width:70%"|70% 
|style="width:30%"|30%
|-
|style="width:60%"|60%不会生效因为同列最大宽度已经变成70%
|style="width:40%"|不会按照生效40%因为这一行左边的单元格实际生效宽度为70%,而整个表格最大宽度只有100%,所以这个单元格最大宽度只能按照100-70=30%来生效
|}
70% 30%
60%不会生效因为同列最大宽度已经变成70% 不会按照生效40%因为这一行左边的单元格实际生效宽度为70%,而整个表格最大宽度只有100%,所以这个单元格最大宽度只能按照100-70=30%来生效
不设置表头（即上一级元素）宽度时，单元格内设置的宽度不生效 
{|class=wikitable <!--这里不定义表格宽度-->
|style="width:70%"|70<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的-->
|<!--这里不写内容就是一个空表格-->
|}
70
同行内，不同列的一个单元格百分比，会按照另一个百分比的倍数显示宽度。 
{|class=wikitable <!--这里不定义表格宽度-->
|style="width:10%"|70%
|style="width:70%"|<!--这个单元格的宽度将会按照左边格子实际宽度的7倍-->
|}
10% 70%
同行内，不同列设置多个百分比宽度时，相加超过整宽也无法生效。 
{|class=wikitable <!--这里不定义表格宽度-->
|style="width:90%"|<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的-->但是这里写的字足够多的情况下会把这个单元格撑起来看上去很宽的样子
|style="width:40%"|2<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的-->
|}
但是这里写的字足够多的情况下会把这个单元格撑起来看上去很宽的样子 2

也可以使用固定的像素宽度来控制，但需要注意手机端等窄屏幕的显示适应问题。

源码 实际效果 
{|class=wikitable <!--这里不定义表格宽度-->
|style="width:300px"|指定像素宽度的写法是生效的，并且这里即使写的很多的字也不会把这个单元格撑的更宽
|style="width:300px"|300px
|}
指定像素宽度的写法是生效的，并且这里即使写的很多的字也不会把这个单元格撑的更宽 300px

合并单元格（跨列:colspan）

演示内容 源码 实际效果

跨列演示，右侧
A所在单元格跨2列
G单元格跨2列
H单元格跨3列 

{| class="wikitable"
|-
|colspan=2|A
|B
|-
| C || D || E
|-
|F
|colspan=2|G
|-
|colspan=3|H
|}
A B
C D E
F G
H

合并单元格（跨行:rowspan）

演示内容 源码 实际效果

跨行演示，右侧
A所在单元格跨4行
C单元格跨2行
F单元格跨3行 

{| class="wikitable"
|-
|rowspan="4"|A
|B
|rowspan="2"|C
|D
|-
| E
|rowspan="3"|F
|-
| G
| H
|-
| I
| J
|}
A B C D
E F
G H
I J

内容对齐方向（text-align:）

控制表格整体对齐方向

演示内容 源码 实际效果

默认为左对齐 text-align:left 

{| class="wikitable" style="width:100%"
|-
| 居左 || 居左 || 居左
|}
居左 居左 居左

居中对齐 text-align:center 

{| class="wikitable" style="text-align:center;width:100%"
|-
| 居中 || 居中 || 居中
|}
居中 居中 居中

居右对齐 text-align:right 

{| class="wikitable" style="text-align:right;width:100%"
|-
| 居右 || 居右 || 居右
|}
居右 居右 居右

控制单元格内容对齐方向

演示内容 源码 实际效果
表头控制整个表格的单元格默认居右
第一行的所有单元格，默认居右
第二行第一个单元格设置居中，第二格设置局左，第三格默认居右 
{| class="wikitable" style="text-align:right;width:100%"
|-
| 居右 || 居右 || 居右
|-
|style="text-align:center"|居中
|style="text-align:left"|居左
|这一个格子没有指定方向默认使用表格整体方向
|}
居右 居右 居右
居中 居左 这一个格子没有指定方向默认使用表格整体方向
第一行的为表格中文字默认的位置
第二行为使用 vertical-align:top 控制同行内单元格顶对齐 
{| class="wikitable" style="width:100%"
|-
|示例<br>示例
|示例
|示例
|-
|style="vertical-align:top"|示例<br>示例
|style="vertical-align:top"|示例
|style="vertical-align:top"|示例
|}
示例
示例 		示例 示例
示例
示例 		示例 示例



单元格背景色（background-color:）

表格支持英文代码(red),16位代码(#FF0000)和RGB代码(255,0,0)

演示内容 源码 实际效果
控制单元格背景的颜色

第一个单元格使用英文代码 green 设置颜色
第一个单元格使用16位代码 #00FFFF 设置颜色
第一个单元格使用RGB代码 rgb(255,182,193) 设置颜色 

{| class="wikitable" style="width:100%"
|-
|style="background-color:green"|
|style="background-color:#00FFFF"|
|style="background-color:rgb(255,182,193)"|
|}

单元格字体颜色（color:）

同background-color一样,支持英文代码(red),16位代码(#FF0000)和RGB代码(255,0,0)

演示内容 源码 实际效果
控制单元格内文字的颜色

第一个单元格使用英文代码 green 设置颜色
第一个单元格使用16位代码 #00FFFF 设置颜色
第一个单元格使用RGB代码 rgb(255,182,193) 设置颜色 

{| class="wikitable" style="width:100%"
|-
|style="color:green"|
|style="color:#00FFFF"|
|style="color:rgb(255,182,193)"|
|}
|
示例 示例 示例
取自“https://wiki.biligame.com/wiki/index.php?title=帮助:表格进阶教程&oldid=11652”