Toggle navigation
剑灵百科-剑灵wiki
页面
页面
讨论
编辑
查看历史
编辑源代码
操作
刷新
工具
页面信息
特殊页面
相关更改
链入页面
未登录
讨论
贡献
Toggle navigation
剑灵百科-剑灵wiki
编辑“
编辑指南-表格进阶教程
”
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==在表头定义整个表格样式== 通常在<code>{|</code>后接<font color=green>class="类样式名"</font>,可以引入早已经预制好的样式来定义表格的样式。这些样式可能预制在MediaWiki皮肤里也可能预制在[[MediaWiki:Common.css]]页面中。 <syntaxhighlight lang=css> {|class=wikitable |橘子 |苹果 |- |面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格--> |- |奶油 |冰淇凌 |} </syntaxhighlight> {|class=wikitable |橘子 |苹果 |- |面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格--> |- |奶油 |冰淇凌 |} ==控制宽度(style="width:")== ===控制表格整体宽度=== <code>{|</code>后除了接<font color=green>class="类样式名"</font>,还可以接<font color=green>style="..."</font>定义整个表格的元素。 {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 将表格的整体宽度占满整个空间 | <syntaxhighlight lang=css> {|class=wikitable style="width:100%" |橘子 |苹果 |- |面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格--> |- |奶油 |冰淇凌 |} </syntaxhighlight> | {|class=wikitable style="width:100%" |橘子 |苹果 |- |面包||饼<!--如果想把表格内容写在一行里的话要使用 || 来分割单元格--> |- |奶油 |冰淇凌 |} |} <p>这个"<font color=green>width:100%</font>"指表格的整体宽度占'''<font color=Magenta>上一级元素</font>'''宽度百分比。假如这个表格写在一个宽度只有70%的单元格或者<font color=Magenta><nowiki><div></nowiki></font>里例如:</p> {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 外面的表格只占空间内的70%,<br>内部的表格占满整个空间(空隙是外部表格的内边距) | <syntaxhighlight lang=css> {|class=wikitable style="width:70%" |只有70%宽的表格 |- | {|class=wikitable style="width:100%" |- |即使是100%宽度 |} |} </syntaxhighlight> | {|class=wikitable style="width:70%" |只有70%宽的表格 |- | {|class=wikitable style="width:100%" |- |即使是100%宽度 |} |} |} {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 使用<div>标签控制外部整宽为70%,<br>内部的表格则占满这70%的整个空间 | <syntaxhighlight lang=html> <div style="width:70%">只有70%宽的div {|class=wikitable style="width:100%" |- |即使是100%宽度 |} </div> </syntaxhighlight> | <div style="width:70%">只有70%宽的div {|class=wikitable style="width:100%" |- |即使是100%宽度 |} </div> |} 以上以百分比宽度来举例,因为百分比宽度兼容不同的设备更好一些,也可以写成<font color=green>'''100px'''</font>这种具体像素宽度,只不过在调整页面的时候会非常痛苦。 ===控制单元格的宽度=== 和控制表格整体宽度一样,也是通过<font color=green>style="width:"</font>来实现,这里要额外说明几点: *如果表格整体没有定义宽度,那么单元格的百分比宽度就会失效。 *单元格的最大宽度影响整列最大宽度。 *缺省值默认补齐或寻找当前列的最大宽度。 具体的可以看如下的例子。 {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 控制单个单元格的宽度<br>左侧70%,右侧宽度的由整宽100%-70%=30% | <syntaxhighlight lang=html> {|class=wikitable style="width:100%" |style="width:70%"|这个单元个指定了宽度-70%<!--如果写成这个形式最好就不要表格里一行的所有单元格写在一行,而是每个单元格单起一行比较容易阅读--> |这个单元格没有指定宽度,但是因为表格整体宽度是100%,所以这个单元格的宽度是100-70=30% |- |这个单元格没有指定宽度,但是会追随该列最大宽度 |这个也没有 |} </syntaxhighlight> | {|class=wikitable style="width:100%" |style="width:70%"|这个单元个指定了宽度-70%<!--如果写成这个形式最好就不要表格里一行的所有单元格写在一行,而是每个单元格单起一行比较容易阅读--> |这个单元格没有指定宽度,但是因为表格整体宽度是100%,所以这个单元格的宽度是100-70=30% |- |这个单元格没有指定宽度,但是会追随该列最大宽度 |这个也没有 |} |- | 控制同一列2个单元格的宽度<br>左侧60%,右侧40% | <syntaxhighlight lang=html> {|class=wikitable style="width:100%" |- |style="width:60%"|60% |style="width:40%"|40% |} </syntaxhighlight> | {|class=wikitable style="width:100%" |- |style="width:60%"|60% |style="width:40%"|40% |} |- | 同一列,不同行设置的不同宽度,只会生效第一行的设置 | <syntaxhighlight lang=html> {|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%来生效 |} </syntaxhighlight> | {|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%来生效 |} |- | 不设置表头(即上一级元素)宽度时,单元格内设置的宽度不生效 | <syntaxhighlight lang=html> {|class=wikitable <!--这里不定义表格宽度--> |style="width:70%"|70<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的--> |<!--这里不写内容就是一个空表格--> |} </syntaxhighlight> | {|class=wikitable <!--这里不定义表格宽度--> |style="width:70%"|70<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的--> |<!--这里不写内容就是一个空表格--> |} |- | 同行内,不同列的一个单元格百分比,会按照另一个百分比的倍数显示宽度。 | <syntaxhighlight lang=html> {|class=wikitable <!--这里不定义表格宽度--> |style="width:10%"|70% |style="width:70%"|<!--这个单元格的宽度将会按照左边格子实际宽度的7倍--> |} </syntaxhighlight> | {|class=wikitable <!--这里不定义表格宽度--> |style="width:10%"|10% |style="width:70%"|70%<!--这个单元格的宽度将会按照左边格子实际宽度的7倍--> |} |- | 同行内,不同列设置多个百分比宽度时,相加超过整宽也无法生效。 | <syntaxhighlight lang=html> {|class=wikitable <!--这里不定义表格宽度--> |style="width:90%"|<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的-->但是这里写的字足够多的情况下会把这个单元格撑起来看上去很宽的样子 |style="width:40%"|2<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的--> |} </syntaxhighlight> | {|class=wikitable <!--这里不定义表格宽度--> |style="width:90%"|<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的-->但是这里写的字足够多的情况下会把这个单元格撑起来看上去很宽的样子 |style="width:40%"|2<!--因为没有指定上一级元素宽度,所以这个百分比宽度是不生效的--> |} |} 也可以使用固定的像素宽度来控制,但需要注意手机端等窄屏幕的显示适应问题。 {| class="wikitable" style="width:100%" |- ! style="width:30%" | 源码 ! style="width:70%" | 实际效果 |- | <syntaxhighlight lang=html> {|class=wikitable <!--这里不定义表格宽度--> |style="width:300px"|指定像素宽度的写法是生效的,并且这里即使写的很多的字也不会把这个单元格撑的更宽 |style="width:300px"|300px |}</syntaxhighlight> | {|class=wikitable <!--这里不定义表格宽度--> |style="width:300px"|指定像素宽度的写法是生效的,并且这里即使写的很多的字也不会把这个单元格撑的更宽 |style="width:300px"|300px |} |} ==合并单元格(跨列:colspan)== {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 跨列演示,右侧 <br> '''A'''所在单元格跨2列<br> '''G'''单元格跨2列<br> '''H'''单元格跨3列 | <syntaxhighlight lang=html> {| class="wikitable" |- |colspan=2|A |B |- | C || D || E |- |F |colspan=2|G |- |colspan=3|H |} </syntaxhighlight> | {| class="wikitable" |- |colspan=2|A |B |- | C || D || E |- |F |colspan=2|G |- |colspan=3|H |} |} ==合并单元格(跨行:rowspan)== {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 跨行演示,右侧 <br> '''A'''所在单元格跨4行<br> '''C'''单元格跨2行<br> '''F'''单元格跨3行 | <syntaxhighlight lang=css> {| class="wikitable" |- |rowspan="4"|A |B |rowspan="2"|C |D |- | E |rowspan="3"|F |- | G | H |- | I | J |} </syntaxhighlight> | {| class="wikitable" |- |rowspan="4"|A |B |rowspan="2"|C |D |- | E |rowspan="3"|F |- | G | H |- | I | J |} |} ==内容对齐方向(text-align:)== ===控制表格整体对齐方向=== {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 默认为左对齐 text-align:left | <syntaxhighlight lang=css> {| class="wikitable" style="width:100%" |- | 居左 || 居左 || 居左 |} </syntaxhighlight> | {| class="wikitable" style="width:100%" |- | 居左 || 居左 || 居左 |} |- | 居中对齐 text-align:center | <syntaxhighlight lang=css> {| class="wikitable" style="text-align:center;width:100%" |- | 居中 || 居中 || 居中 |} </syntaxhighlight> | {| class="wikitable" style="text-align:center;width:100%" |- | 居中 || 居中 || 居中 |} |- | 居右对齐 text-align:right | <syntaxhighlight lang=css> {| class="wikitable" style="text-align:right;width:100%" |- | 居右 || 居右 || 居右 |} </syntaxhighlight> | {| class="wikitable" style="text-align:right;width:100%" |- | 居右 || 居右 || 居右 |} |} ===控制单元格内容对齐方向=== {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 表头控制整个表格的单元格默认居右<br>第一行的所有单元格,默认居右<br>第二行第一个单元格设置居中,第二格设置局左,第三格默认居右 | <syntaxhighlight lang=css> {| class="wikitable" style="text-align:right;width:100%" |- | 居右 || 居右 || 居右 |- |style="text-align:center"|居中 |style="text-align:left"|居左 |这一个格子没有指定方向默认使用表格整体方向 |} </syntaxhighlight> | {| class="wikitable" style="text-align:right;width:100%" |- | 居右 || 居右 || 居右 |- |style="text-align:center"|居中 |style="text-align:left"|居左 |这一个格子没有指定方向默认使用表格整体方向 |} |- | 第一行的为表格中文字默认的位置<br>第二行为使用 '''vertical-align:top''' 控制同行内单元格顶对齐 | <syntaxhighlight lang=css> {| class="wikitable" style="width:100%" |- |示例<br>示例 |示例 |示例 |- |style="vertical-align:top"|示例<br>示例 |style="vertical-align:top"|示例 |style="vertical-align:top"|示例 |} </syntaxhighlight> | {| class="wikitable" style="vertical-align:top;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) {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 控制单元格'''背景'''的颜色<br> 第一个单元格使用'''英文代码''' green 设置颜色<br> 第一个单元格使用'''16位代码''' #00FFFF 设置颜色<br> 第一个单元格使用'''RGB代码''' rgb(255,182,193) 设置颜色 | <syntaxhighlight lang=css> {| class="wikitable" style="width:100%" |- |style="background-color:green"| |style="background-color:#00FFFF"| |style="background-color:rgb(255,182,193)"| |} </syntaxhighlight> | {| 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) {| class="wikitable" style="width:100%" |- ! style="width:30%" | 演示内容 ! style="width:35%" | 源码 ! style="width:35%" | 实际效果 |- | 控制单元格内'''文字'''的颜色<br> 第一个单元格使用'''英文代码''' green 设置颜色<br> 第一个单元格使用'''16位代码''' #00FFFF 设置颜色<br> 第一个单元格使用'''RGB代码''' rgb(255,182,193) 设置颜色 | <syntaxhighlight lang=css> {| class="wikitable" style="width:100%" |- |style="color:green"| |style="color:#00FFFF"| |style="color:rgb(255,182,193)"| |} | </syntaxhighlight> | {| class="wikitable" style="width:100%" |- |style="color:green"|示例 |style="color:#00FFFF"|示例 |style="color:rgb(255,182,193)"|示例 |} |}
摘要:
请注意,您对剑灵百科-剑灵wiki的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
bnswiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)