"使用說明:表格" 修訂間的差異
出自 房屋百科
行 1: | 行 1: | ||
− | + | 下面介绍的表格符号必须在'''新的一行的开始'''使用(也有例外),并且可以使用一些在HTML表格标记中可用的参数。 | |
− | == | + | ==表格标记== |
=== Table === | === Table === | ||
− | + | 可以这样描述一个表格: | |
− | <nowiki>{|</nowiki> '' | + | <nowiki>{|</nowiki> ''参数'' |
<nowiki>|}</nowiki> | <nowiki>|}</nowiki> | ||
− | + | 相当于 | |
− | <table '' | + | <table ''参数''> |
</table> | </table> | ||
=== TD === | === TD === | ||
− | + | 单元格可以这样产生: | |
− | | | + | |单元1 |
− | | | + | |单元2 |
− | | | + | |单元3 |
− | + | 或者这样也可以: | |
− | | | + | |单元1||单元2||单元3 |
− | + | 相当于 | |
− | <td> | + | <td>单元1</td><td>单元2</td><td>单元3</td> |
− | + | 其中“||”相当于“新起一行”+“|” | |
− | + | 在单元格中可以这样使用参数: | |
− | |'' | + | |''参数''|单元1 |
− | + | 相当于 | |
− | <td '' | + | <td ''参数''> |
=== TH === | === TH === | ||
− | + | 使用方法和TD类似,用“!”代替“|”,用“!!”代替“||”。但是参数仍然使用“|”。 | |
=== TR === | === TR === | ||
− | <tr> | + | <tr> 标记在第一行会自动产生新w. 开始一个新行使用: |
|- | |- | ||
或者 | 或者 | ||
行 37: | 行 37: | ||
或者 | 或者 | ||
|------------------- | |------------------- | ||
− | + | 他们都相当于 | |
<tr> | <tr> | ||
− | + | 可以这样添加参数: | |
− | |- '' | + | |- ''参数'' |
或者 | 或者 | ||
− | |------- '' | + | |------- ''参数'' |
− | + | 相当于 | |
− | <tr '' | + | <tr ''参数''> |
=== CAPTION === | === CAPTION === | ||
− | <caption> | + | <caption> 标记可以这样使用: |
− | |+ | + | |+ 标题 |
− | + | 相当于 | |
− | <caption> | + | <caption>标题</caption> |
− | + | 你也可以使用参数: | |
− | |+ '' | + | |+ ''参数''|标题 |
− | + | 相当于 | |
− | <caption '' | + | <caption ''参数''>Caption |
− | == | + | ==实例== |
− | === | + | ===简单的例子=== |
<nowiki>{| border=1 </nowiki> | <nowiki>{| border=1 </nowiki> | ||
− | <nowiki>| | + | <nowiki>| 单元1,行1</nowiki> |
− | <nowiki>| | + | <nowiki>| 单元2,行1</nowiki> |
<nowiki>|-</nowiki> | <nowiki>|-</nowiki> | ||
− | <nowiki>| | + | <nowiki>| 单元1,行2</nowiki> |
− | <nowiki>| | + | <nowiki>| 单元2,行2</nowiki> |
<nowiki>|}</nowiki> | <nowiki>|}</nowiki> | ||
− | + | 将生成: | |
{| border=1 | {| border=1 | ||
− | | | + | | 单元1,行1 |
− | | | + | | 单元2,行1 |
|- | |- | ||
− | | | + | | 单元1,行2 |
− | | | + | | 单元2,行2 |
|} | |} | ||
− | === | + | ===复杂的例子=== |
− | + | 注意这个表格将右对齐。 | |
<pre>{| align=right border=1 | <pre>{| align=right border=1 | ||
− | | | + | | 单元1, 行1 |
− | |rowspan=2| | + | |rowspan=2| 单元2, 行1 (和2) |
− | | | + | | 单元3, 行1 |
|- | |- | ||
− | | | + | | 单元1, 行2 |
− | | | + | | 单元3, 行2 |
|}</pre> | |}</pre> | ||
<div> | <div> | ||
{| align=right border=1 | {| align=right border=1 | ||
− | | | + | | 单元1, 行1 |
− | |rowspan=2| | + | |rowspan=2| 单元2, 行1 (和2) |
− | | | + | | 单元3, 行1 |
|- | |- | ||
− | | | + | | 单元1, 行2 |
− | | | + | | 单元3, 行2 |
|} | |} | ||
</div> | </div> | ||
− | + | 同时使用COLSPAN和ROWSPAN: | |
<pre> | <pre> | ||
{| border="1" cellpadding="5" cellspacing="0" | {| border="1" cellpadding="5" cellspacing="0" | ||
|- | |- | ||
− | ! | + | ! 栏目一 || 栏目二 || 栏目三 |
|- | |- | ||
| rowspan=2| A | | rowspan=2| A | ||
− | | colspan=2 align=" | + | | colspan=2 align="center"| B |
|- | |- | ||
| C | | C | ||
行 107: | 行 107: | ||
|- | |- | ||
| E | | E | ||
− | | colspan=2 align=" | + | | colspan=2 align="center"| F |
|- | |- | ||
| rowspan=3| G | | rowspan=3| G | ||
行 116: | 行 116: | ||
| K | | K | ||
|- | |- | ||
− | | colspan=2 align=" | + | | colspan=2 align="center"| L |
|}</pre> | |}</pre> | ||
− | + | 将有这样的效果: | |
{| border="1" cellpadding="5" cellspacing="0" | {| border="1" cellpadding="5" cellspacing="0" | ||
|- | |- | ||
− | ! | + | ! 栏目一 || 栏目二 || 栏目三 |
|- | |- | ||
| rowspan=2| A | | rowspan=2| A | ||
− | | colspan=2 align=" | + | | colspan=2 align="center"| B |
|- | |- | ||
| C | | C | ||
行 130: | 行 130: | ||
|- | |- | ||
| E | | E | ||
− | | colspan=2 align=" | + | | colspan=2 align="center"| F |
|- | |- | ||
| rowspan=3| G | | rowspan=3| G | ||
行 139: | 行 139: | ||
| K | | K | ||
|- | |- | ||
− | | colspan=2 align=" | + | | colspan=2 align="center"| L |
|} | |} | ||
行 165: | 行 165: | ||
|} | |} | ||
− | === | + | ===带标题的表格=== |
{| style="background:#F8FCFF;" | {| style="background:#F8FCFF;" | ||
|- | |- | ||
| | | | ||
<nowiki>{| border=1 align=right</nowiki> | <nowiki>{| border=1 align=right</nowiki> | ||
− | <nowiki>|+ ''' | + | <nowiki>|+ '''这是标题''' 请参看:</nowiki> |
− | <nowiki>| | + | <nowiki>|独立||1949年</nowiki> |
<nowiki>|-</nowiki> | <nowiki>|-</nowiki> | ||
− | <nowiki>| | + | <nowiki>|国家||中华人民共和国</nowiki> |
<nowiki>|-</nowiki> | <nowiki>|-</nowiki> | ||
− | <nowiki>| | + | <nowiki>|时区||UTC+8</nowiki> |
<nowiki>|-</nowiki> | <nowiki>|-</nowiki> | ||
− | <nowiki>| | + | <nowiki>|国歌||义勇军进行曲</nowiki> |
<nowiki>|-</nowiki> | <nowiki>|-</nowiki> | ||
<nowiki>|域名||.cn</nowiki> | <nowiki>|域名||.cn</nowiki> | ||
行 183: | 行 183: | ||
| width=50% align=right| | | width=50% align=right| | ||
{| align="right" border=1 | {| align="right" border=1 | ||
− | |+ ''' | + | |+ '''这是标题''' 请参看: |
− | | | + | |独立||1949年 |
|- | |- | ||
− | | | + | |国家||中华人民共和国 |
|- | |- | ||
− | | | + | |时区||UTC+8 |
|- | |- | ||
− | | | + | |国歌||义勇军进行曲 |
|- | |- | ||
|域名||.cn | |域名||.cn | ||
|} | |} | ||
|} | |} | ||
− | '' | + | ''以上这些条目实际不存在,只是用来说明。'' |
− | === | + | ===带顏色的表格=== |
− | + | 有两种方法让表格裡的字和背景出现顏色,下面是第一种: | |
<pre> | <pre> | ||
{| border=1 | {| border=1 | ||
− | | bgcolor=blue | <font color=yellow> | + | | bgcolor=blue | <font color=yellow> 字黄背景蓝 |
− | | | + | | 没设定顏色 |
− | | style="background:red; color:yellow" | | + | | style="background:red; color:yellow" | 字黄背景红 |
− | | | + | | 没设定顏色 |
|} | |} | ||
</pre> | </pre> | ||
生成: | 生成: | ||
{| border=1 | {| border=1 | ||
− | | bgcolor=blue | <font color=yellow> | + | | bgcolor=blue | <font color=yellow> 字黄背景蓝 |
− | | | + | | 没设定顏色 |
− | | style="background:red; color:yellow" | | + | | style="background:red; color:yellow" | 字黄背景红 |
− | | | + | | 没设定顏色 |
|} | |} | ||
− | + | 这种方法能指定单格的顏色和背景。如果要让一行、一列或一整个表格都是同样的顏色,则使用第二种方法: | |
<pre> | <pre> | ||
{| style="background:yellow; color:blue" border=1 | {| style="background:yellow; color:blue" border=1 | ||
|- | |- | ||
− | | | + | | 这行是 |
− | | | + | | 蓝字 |
− | | | + | | 黄背景 |
|- style="background:navy; color:white" | |- style="background:navy; color:white" | ||
− | | | + | | 这行是 |
| 白字 | | 白字 | ||
− | | | + | | 深海蓝 |
|- | |- | ||
− | | | + | | 这行 |
− | | style="background:white" | | + | | style="background:white" | 比较 |
− | | | + | | 不一样 |
|} | |} | ||
</pre> | </pre> | ||
行 234: | 行 234: | ||
{| style="background:yellow; color:blue" border=1 | {| style="background:yellow; color:blue" border=1 | ||
|- | |- | ||
− | | | + | | 这行是 |
− | | | + | | 蓝字 |
− | | | + | | 黄背景 |
|- style="background:navy; color:white" | |- style="background:navy; color:white" | ||
− | | | + | | 这行是 |
| 白字 | | 白字 | ||
− | | | + | | 深海蓝 |
|- | |- | ||
− | | | + | | 这行 |
− | | style="background:white" | | + | | style="background:white" | 比较 |
− | | | + | | 不一样 |
|} | |} | ||
− | + | 像其他参数一样,顏色参数指定的优先顺序為:单格→一行(列)→整个表格。<br>[[Help:HTML]]4.01制定16种顏色名称,附上16进位值如下所示: | |
{| border="0" | {| border="0" | ||
|- | |- | ||
|black | |black | ||
− | |align=" | + | |align="center" style="background:#000000; color:#ffffff; font-family:monospace;" width=15%|#000000 |
|width=5%| ||silver | |width=5%| ||silver | ||
− | |align=" | + | |align="center" style="background:#c0c0c0; color:#000000; font-family:monospace;" width=15%|#c0c0c0 |
|width=5%| ||maroon | |width=5%| ||maroon | ||
− | |align=" | + | |align="center" style="background:#800000; color:#ffffff; font-family:monospace;" width=15%|#800000 |
|width=5%| ||red | |width=5%| ||red | ||
− | |align=" | + | |align="center" style="background:#ff0000; color:#ffffff; font-family:monospace;" width=15%|#ff0000 |
|- | |- | ||
|navy | |navy | ||
− | |align=" | + | |align="center" style="background:#000080; color:#ffffff; font-family:monospace;"|#000080 |
|| ||blue | || ||blue | ||
− | |align=" | + | |align="center" style="background:#0000ff; color:#ffffff; font-family:monospace;"|#0000ff |
|| ||purple | || ||purple | ||
− | |align=" | + | |align="center" style="background:#800080; color:#ffffff; font-family:monospace;"|#800080 |
|| ||fuchsia | || ||fuchsia | ||
− | |align=" | + | |align="center" style="background:#ff00ff; color:#000000; font-family:monospace;"|#ff00ff |
|- | |- | ||
|green | |green | ||
− | |align=" | + | |align="center" style="background:#008000; color:#ffffff; font-family:monospace;"|#008000 |
|| ||lime | || ||lime | ||
− | |align=" | + | |align="center" style="background:#00ff00; color:#000000; font-family:monospace;"|#00ff00 |
|| ||olive | || ||olive | ||
− | |align=" | + | |align="center" style="background:#808000; color:#ffffff; font-family:monospace;"|#808000 |
|| ||Yellow | || ||Yellow | ||
− | |align=" | + | |align="center" style="background:#ffff00; color:#000000; font-family:monospace;"|#ffff00 |
|- | |- | ||
|teal | |teal | ||
− | |align=" | + | |align="center" style="background:#008080; color:#ffffff; font-family:monospace;"|#008080 |
|| ||aqua | || ||aqua | ||
− | |align=" | + | |align="center" style="background:#00ffff; color:#000000; font-family:monospace;"|#00ffff |
|| ||gray | || ||gray | ||
− | |align=" | + | |align="center" style="background:#808080; color:#ffffff; font-family:monospace;"|#808080 |
|| ||white | || ||white | ||
− | |align=" | + | |align="center" style="background:#ffffff; color:#000000; font-family:monospace;"|#ffffff |
|} | |} | ||
− | '' | + | ''请参见:[[Help:色彩列表|色彩列表]]'' |
− | [[category: | + | |
+ | ===设定行高与列宽=== | ||
+ | 整个表格的行高(height)和列宽(width),以及任意列的列宽可以进行设定。要设定任意行的行高,可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定,那么表格的显示结果可能随浏览器的不同而不同。 | ||
+ | <pre> | ||
+ | {| style="width:75%; height:200px" border="1" | ||
+ | |- | ||
+ | | abc | ||
+ | | def | ||
+ | | ghi | ||
+ | |- style="height:100px" | ||
+ | | jkl | ||
+ | | style="width:200px" |mno | ||
+ | | pqr | ||
+ | |- | ||
+ | | stu | ||
+ | | vwx | ||
+ | | yz | ||
+ | |} | ||
+ | </pre> | ||
+ | |||
+ | 将得到这样的结果: | ||
+ | |||
+ | {| style="width:75%; height:200px" border="1" | ||
+ | |- | ||
+ | | abc | ||
+ | | def | ||
+ | | ghi | ||
+ | |- style="height:100px" | ||
+ | | jkl | ||
+ | | style="width:200px" |mno | ||
+ | | pqr | ||
+ | |- | ||
+ | | stu | ||
+ | | vwx | ||
+ | | yz | ||
+ | |} | ||
+ | |||
+ | ===层叠样式表=== | ||
+ | WP内置了CSS,用于格式化表格,可以通过在<code>{|</code>之后加入<code>class="wikitable"</code>。例如: | ||
+ | <pre>{| class="wikitable" style="text-align:center" | ||
+ | |+乘法表 | ||
+ | |- | ||
+ | ! × !! 1 !! 2 !! 3 | ||
+ | |- | ||
+ | ! 1 | ||
+ | | 1 || 2 || 3 | ||
+ | |- | ||
+ | ! 2 | ||
+ | | 2 || 4 || 6 | ||
+ | |- | ||
+ | ! 3 | ||
+ | | 3 || 6 || 9 | ||
+ | |}</pre>得到: | ||
+ | {| class="wikitable" style="text-align:center" | ||
+ | |+乘法表 | ||
+ | |- | ||
+ | ! × !! 1 !! 2 !! 3 | ||
+ | |- | ||
+ | ! 1 | ||
+ | | 1 || 2 || 3 | ||
+ | |- | ||
+ | ! 2 | ||
+ | | 2 || 4 || 6 | ||
+ | |- | ||
+ | ! 3 | ||
+ | | 3 || 6 || 9 | ||
+ | |} | ||
+ | |||
+ | |||
+ | [[category:帮助文档|BG]] |
於 2008年9月2日 (二) 17:34 的修訂
下面介绍的表格符号必须在新的一行的开始使用(也有例外),并且可以使用一些在HTML表格标记中可用的参数。
目錄
表格标记
Table
可以这样描述一个表格:
{| 参数 |}
相当于
TD
单元格可以这样产生:
|单元1 |单元2 |单元3
或者这样也可以:
|单元1||单元2||单元3
相当于
<td>单元1</td><td>单元2</td><td>单元3</td>
其中“||”相当于“新起一行”+“|”
在单元格中可以这样使用参数:
|参数|单元1
相当于
<td 参数>
TH
使用方法和TD类似,用“!”代替“|”,用“!!”代替“||”。但是参数仍然使用“|”。
TR
<tr> 标记在第一行会自动产生新w. 开始一个新行使用:
|-
或者
|--------------
或者
|-------------------
他们都相当于
<tr>
可以这样添加参数:
|- 参数
或者
|------- 参数
相当于
<tr 参数>
CAPTION
|+ 标题
相当于
<caption>标题
你也可以使用参数:
|+ 参数|标题
相当于
Caption
实例
简单的例子
{| border=1 | 单元1,行1 | 单元2,行1 |- | 单元1,行2 | 单元2,行2 |}
将生成:
单元1,行1 | 单元2,行1 |
单元1,行2 | 单元2,行2 |
复杂的例子
注意这个表格将右对齐。
{| align=right border=1 | 单元1, 行1 |rowspan=2| 单元2, 行1 (和2) | 单元3, 行1 |- | 单元1, 行2 | 单元3, 行2 |}
单元1, 行1 | 单元2, 行1 (和2) | 单元3, 行1 |
单元1, 行2 | 单元3, 行2 |
同时使用COLSPAN和ROWSPAN:
{| border="1" cellpadding="5" cellspacing="0" |- ! 栏目一 || 栏目二 || 栏目三 |- | rowspan=2| A | colspan=2 align="center"| B |- | C | D |- | E | colspan=2 align="center"| 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 |
嵌套表格
{| border=1 |原有 | {| style="background:blue; color:white" border=2 |插入 |- |表格 |} |表格 |}
生成:
原有 |
|
表格 |
带标题的表格
{| border=1 align=right |+ '''这是标题''' 请参看: |独立||1949年 |- |国家||中华人民共和国 |- |时区||UTC+8 |- |国歌||义勇军进行曲 |- |域名||.cn |} |
|
以上这些条目实际不存在,只是用来说明。
带顏色的表格
有两种方法让表格裡的字和背景出现顏色,下面是第一种:
{| border=1 | bgcolor=blue | <font color=yellow> 字黄背景蓝 | 没设定顏色 | style="background:red; color:yellow" | 字黄背景红 | 没设定顏色 |}
生成:
字黄背景蓝 | 没设定顏色 | 字黄背景红 | 没设定顏色 |
这种方法能指定单格的顏色和背景。如果要让一行、一列或一整个表格都是同样的顏色,则使用第二种方法:
{| style="background:yellow; color:blue" border=1 |- | 这行是 | 蓝字 | 黄背景 |- style="background:navy; color:white" | 这行是 | 白字 | 深海蓝 |- | 这行 | style="background:white" | 比较 | 不一样 |}
生成:
这行是 | 蓝字 | 黄背景 |
这行是 | 白字 | 深海蓝 |
这行 | 比较 | 不一样 |
像其他参数一样,顏色参数指定的优先顺序為:单格→一行(列)→整个表格。
Help:HTML4.01制定16种顏色名称,附上16进位值如下所示:
black | #000000 | silver | #c0c0c0 | maroon | #800000 | red | #ff0000 | |||
navy | #000080 | blue | #0000ff | purple | #800080 | fuchsia | #ff00ff | |||
green | #008000 | lime | #00ff00 | olive | #808000 | Yellow | #ffff00 | |||
teal | #008080 | aqua | #00ffff | gray | #808080 | white | #ffffff |
请参见:色彩列表
设定行高与列宽
整个表格的行高(height)和列宽(width),以及任意列的列宽可以进行设定。要设定任意行的行高,可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定,那么表格的显示结果可能随浏览器的不同而不同。
{| style="width:75%; height:200px" border="1" |- | abc | def | ghi |- style="height:100px" | jkl | style="width:200px" |mno | pqr |- | stu | vwx | yz |}
将得到这样的结果:
abc | def | ghi |
jkl | mno | pqr |
stu | vwx | yz |
层叠样式表
WP内置了CSS,用于格式化表格,可以通过在{|
之后加入class="wikitable"
。例如:
{| class="wikitable" style="text-align:center" |+乘法表 |- ! × !! 1 !! 2 !! 3 |- ! 1 | 1 || 2 || 3 |- ! 2 | 2 || 4 || 6 |- ! 3 | 3 || 6 || 9 |}得到:
× | 1 | 2 | 3 |
---|---|---|---|
1 | 1 | 2 | 3 |
2 | 2 | 4 | 6 |
3 | 3 | 6 | 9 |