编辑指南-表格进阶教程

在表头定义整个表格样式

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

橘子	苹果
面包	饼
奶油	冰淇凌

</syntaxhighlight>

橘子	苹果
面包	饼
奶油	冰淇凌

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

控制表格整体宽度

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

演示内容	源码	实际效果
将表格的整体宽度占满整个空间	<syntaxhighlight lang=css> 橘子 苹果 面包 饼 奶油 冰淇凌 </syntaxhighlight>	橘子 苹果 面包 饼 奶油 冰淇凌

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

演示内容	源码	实际效果
外面的表格只占空间内的70%， 内部的表格占满整个空间（空隙是外部表格的内边距）	<syntaxhighlight lang=css> 只有70%宽的表格 即使是100%宽度 </syntaxhighlight>	只有70%宽的表格 即使是100%宽度

演示内容	源码	实际效果
使用 标签控制外部整宽为70%， 内部的表格则占满这70%的整个空间	<syntaxhighlight lang=html> 只有70%宽的div 即使是100%宽度 </syntaxhighlight>	只有70%宽的div 即使是100%宽度

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

控制单元格的宽度

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

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

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

演示内容	源码	实际效果
控制单个单元格的宽度 左侧70%，右侧宽度的由整宽100%-70%=30%	<syntaxhighlight lang=html> 这个单元个指定了宽度-70% 这个单元格没有指定宽度,但是因为表格整体宽度是100%,所以这个单元格的宽度是100-70=30% 这个单元格没有指定宽度,但是会追随该列最大宽度 这个也没有 </syntaxhighlight>	这个单元个指定了宽度-70% 这个单元格没有指定宽度,但是因为表格整体宽度是100%,所以这个单元格的宽度是100-70=30% 这个单元格没有指定宽度,但是会追随该列最大宽度 这个也没有
控制同一列2个单元格的宽度 左侧60%，右侧40%	<syntaxhighlight lang=html> 60% 40% </syntaxhighlight>	60% 40%
同一列，不同行设置的不同宽度，只会生效第一行的设置	<syntaxhighlight lang=html> 70% 30% 60%不会生效因为同列最大宽度已经变成70% 不会按照生效40%因为这一行左边的单元格实际生效宽度为70%,而整个表格最大宽度只有100%,所以这个单元格最大宽度只能按照100-70=30%来生效 </syntaxhighlight>	70% 30% 60%不会生效因为同列最大宽度已经变成70% 不会按照生效40%因为这一行左边的单元格实际生效宽度为70%,而整个表格最大宽度只有100%,所以这个单元格最大宽度只能按照100-70=30%来生效
不设置表头（即上一级元素）宽度时，单元格内设置的宽度不生效	<syntaxhighlight lang=html> 70 </syntaxhighlight>	70
同行内，不同列的一个单元格百分比，会按照另一个百分比的倍数显示宽度。	<syntaxhighlight lang=html> 70% </syntaxhighlight>	10% 70%
同行内，不同列设置多个百分比宽度时，相加超过整宽也无法生效。	<syntaxhighlight lang=html> 但是这里写的字足够多的情况下会把这个单元格撑起来看上去很宽的样子 2 </syntaxhighlight>	但是这里写的字足够多的情况下会把这个单元格撑起来看上去很宽的样子 2

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

源码	实际效果
<syntaxhighlight lang=html> 指定像素宽度的写法是生效的，并且这里即使写的很多的字也不会把这个单元格撑的更宽 300px </syntaxhighlight>	指定像素宽度的写法是生效的，并且这里即使写的很多的字也不会把这个单元格撑的更宽 300px

合并单元格（跨列:colspan）

演示内容	源码	实际效果
跨列演示，右侧 A所在单元格跨2列 G单元格跨2列 H单元格跨3列	<syntaxhighlight lang=html> A B C D E F G H </syntaxhighlight>	A B C D E F G H

合并单元格（跨行:rowspan）

演示内容	源码	实际效果
跨行演示，右侧 A所在单元格跨4行 C单元格跨2行 F单元格跨3行	<syntaxhighlight lang=css> A B C D E F G H I J </syntaxhighlight>	A B C D E F G H I J

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

控制表格整体对齐方向

演示内容	源码	实际效果
默认为左对齐 text-align:left	<syntaxhighlight lang=css> 居左 居左 居左 </syntaxhighlight>	居左 居左 居左
居中对齐 text-align:center	<syntaxhighlight lang=css> 居中 居中 居中 </syntaxhighlight>	居中 居中 居中
居右对齐 text-align:right	<syntaxhighlight lang=css> 居右 居右 居右 </syntaxhighlight>	居右 居右 居右

控制单元格内容对齐方向

演示内容	源码	实际效果
表头控制整个表格的单元格默认居右 第一行的所有单元格，默认居右 第二行第一个单元格设置居中，第二格设置局左，第三格默认居右	<syntaxhighlight lang=css> 居右 居右 居右 居中 居左 这一个格子没有指定方向默认使用表格整体方向 </syntaxhighlight>	居右 居右 居右 居中 居左 这一个格子没有指定方向默认使用表格整体方向
第一行的为表格中文字默认的位置 第二行为使用 vertical-align:top 控制同行内单元格顶对齐	<syntaxhighlight lang=css> 示例 示例 示例 示例 示例 示例 示例 示例 </syntaxhighlight>	示例 示例 示例 示例 示例 示例 示例 示例

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

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

演示内容	源码	实际效果
控制单元格背景的颜色 第一个单元格使用英文代码 green 设置颜色 第一个单元格使用16位代码 #00FFFF 设置颜色 第一个单元格使用RGB代码 rgb(255,182,193) 设置颜色	<syntaxhighlight lang=css> </syntaxhighlight>

单元格字体颜色（color:）

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

演示内容	源码	实际效果
控制单元格内文字的颜色 第一个单元格使用英文代码 green 设置颜色 第一个单元格使用16位代码 #00FFFF 设置颜色 第一个单元格使用RGB代码 rgb(255,182,193) 设置颜色	<syntaxhighlight lang=css>	</syntaxhighlight>	示例 示例 示例