說明:表格:修訂間差異

出自人物百科
跳至導覽 跳至搜尋
Napole留言 | 貢獻
無編輯摘要
Napole留言 | 貢獻
無編輯摘要
第1行: 第1行:
下面介的表格符在'''新的一行的始'''使用(也有例外),且可以使用一些在HTML表格標記中可用的參數
下面介的表格符在'''新的一行的始'''使用(也有例外),且可以使用一些在HTML表格标记中可用的参数


==表格標記==
==表格标记==


=== Table ===
=== Table ===
可以這樣描述一表格:
可以这样描述一表格:
  <nowiki>{|</nowiki> ''參數''
  <nowiki>{|</nowiki> ''参数''
  <nowiki>|}</nowiki>
  <nowiki>|}</nowiki>
當於
当于
  <table ''參數''>
  <table ''参数''>
  </table>
  </table>


=== TD ===
=== TD ===
元格可以這樣產生:
元格可以这样产生:
  |元1
  |元1
  |元2
  |元2
  |元3
  |元3
或者這樣也可以:
或者这样也可以:
  |元1||元2||元3
  |元1||元2||元3
當於
当于
  <td>元1</td><td>元2</td><td>元3</td>
  <td>元1</td><td>元2</td><td>元3</td>
其中||當於「新起一行+|
其中||当于“新起一行+|


元格中可以這樣使用參數
元格中可以这样使用参数
  |''參數''|元1
  |''参数''|元1
當於
当于
  <td ''參數''>
  <td ''参数''>


=== TH ===
=== TH ===
使用方法和TD似,用!代替|,用!!代替||。但是參數仍然使用|
使用方法和TD似,用!代替|,用!!代替||。但是参数仍然使用|


=== TR ===
=== TR ===
<tr> 標記在第一行動產生新w. 始一新行使用:
<tr> 标记在第一行动产生新w. 始一新行使用:
  |-
  |-
或者
或者
第37行: 第37行:
或者
或者
  |-------------------
  |-------------------
都相當於
都相当于
  <tr>
  <tr>
可以這樣添加參數
可以这样添加参数
  |- ''參數''
  |- ''参数''
或者
或者
  |------- ''參數''
  |------- ''参数''
當於
当于
  <tr ''參數''>
  <tr ''参数''>


=== CAPTION ===
=== CAPTION ===
<caption> 標記可以這樣使用:
<caption> 标记可以这样使用:
  |+ 標題
  |+ 标题
當於
当于
  <caption>標題</caption>
  <caption>标题</caption>
你也可以使用參數
你也可以使用参数
  |+ ''參數''|標題
  |+ ''参数''|标题
當於
当于
  <caption ''參數''>Caption
  <caption ''参数''>Caption


==例==
==例==
===簡單的例子===
===简单的例子===
  <nowiki>{| border=1 </nowiki>
  <nowiki>{| border=1 </nowiki>
  <nowiki>| 元1,行1</nowiki>
  <nowiki>| 元1,行1</nowiki>
  <nowiki>| 元2,行1</nowiki>
  <nowiki>| 元2,行1</nowiki>
  <nowiki>|-</nowiki>
  <nowiki>|-</nowiki>
  <nowiki>| 元1,行2</nowiki>
  <nowiki>| 元1,行2</nowiki>
  <nowiki>| 元2,行2</nowiki>
  <nowiki>| 元2,行2</nowiki>
  <nowiki>|}</nowiki>
  <nowiki>|}</nowiki>
生成:
生成:
{| border=1
{| border=1
| 元1,行1  
| 元1,行1  
| 元2,行1  
| 元2,行1  
|-  
|-  
| 元1,行2  
| 元1,行2  
| 元2,行2  
| 元2,行2  
|}
|}


===複雜的例子===
===复杂的例子===
注意這個表格對齊
注意这个表格对齐
<pre>{| align=right border=1
<pre>{| align=right border=1
| 元1, 行1
| 元1, 行1
|rowspan=2| 元2, 行1 (和2)
|rowspan=2| 元2, 行1 (和2)
| 元3, 行1
| 元3, 行1
|-
|-
| 元1, 行2
| 元1, 行2
| 元3, 行2
| 元3, 行2
|}</pre>
|}</pre>
<div>
<div>
{| align=right border=1
{| align=right border=1
| 元1, 行1  
| 元1, 行1  
|rowspan=2| 元2, 行1 (和2)  
|rowspan=2| 元2, 行1 (和2)  
| 元3, 行1  
| 元3, 行1  
|-  
|-  
| 元1, 行2  
| 元1, 行2  
| 元3, 行2  
| 元3, 行2  
|}
|}
</div>
</div>
使用COLSPAN和ROWSPAN:
使用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="left"| B
| colspan=2 align="center"| B
|-
|-
| C
| C
第107行: 第107行:
|-
|-
| E
| E
| colspan=2 align="left"| F
| colspan=2 align="center"| F
|-  
|-  
| rowspan=3| G
| rowspan=3| G
第116行: 第116行:
| K
| K
|-
|-
| colspan=2 align="left"| L
| 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="left"| B
| colspan=2 align="center"| B
|-
|-
| C
| C
第130行: 第130行:
|-
|-
| E
| E
| colspan=2 align="left"| F
| colspan=2 align="center"| F
|-  
|-  
| rowspan=3| G
| rowspan=3| G
第139行: 第139行:
| K
| K
|-
|-
| colspan=2 align="left"| L
| 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>|立||1949年</nowiki>
  <nowiki>|-</nowiki>
  <nowiki>|-</nowiki>
  <nowiki>|家||中人民共和</nowiki>
  <nowiki>|家||中人民共和</nowiki>
  <nowiki>|-</nowiki>
  <nowiki>|-</nowiki>
  <nowiki>|時區||UTC+8</nowiki>
  <nowiki>|时区||UTC+8</nowiki>
  <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年
|立||1949年
|-
|-
|家||中人民共和
|家||中人民共和
|-
|-
|時區||UTC+8
|时区||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位值如下所示:
像其他参数,顏色参数指定的序為:格→一行(列)→整表格。<br>[[Help:HTML]]4.01制定16顏色名,附上16位值如下所示:
{| border="0"  
{| border="0"  
|-
|-
|black
|black
|align="left" style="background:#000000; color:#ffffff; font-family:monospace;" width=15%|#000000
|align="center" style="background:#000000; color:#ffffff; font-family:monospace;" width=15%|#000000
|width=5%| ||silver
|width=5%| ||silver
|align="left" style="background:#c0c0c0; color:#000000; font-family:monospace;" width=15%|#c0c0c0
|align="center" style="background:#c0c0c0; color:#000000; font-family:monospace;" width=15%|#c0c0c0
|width=5%| ||maroon
|width=5%| ||maroon
|align="left" style="background:#800000; color:#ffffff; font-family:monospace;" width=15%|#800000
|align="center" style="background:#800000; color:#ffffff; font-family:monospace;" width=15%|#800000
|width=5%| ||red
|width=5%| ||red
|align="left" style="background:#ff0000; color:#ffffff; font-family:monospace;" width=15%|#ff0000
|align="center" style="background:#ff0000; color:#ffffff; font-family:monospace;" width=15%|#ff0000
|-
|-
|navy
|navy
|align="left" style="background:#000080; color:#ffffff; font-family:monospace;"|#000080
|align="center" style="background:#000080; color:#ffffff; font-family:monospace;"|#000080
|| ||blue
|| ||blue
|align="left" style="background:#0000ff; color:#ffffff; font-family:monospace;"|#0000ff
|align="center" style="background:#0000ff; color:#ffffff; font-family:monospace;"|#0000ff
|| ||purple
|| ||purple
|align="left" style="background:#800080; color:#ffffff; font-family:monospace;"|#800080
|align="center" style="background:#800080; color:#ffffff; font-family:monospace;"|#800080
|| ||fuchsia
|| ||fuchsia
|align="left" style="background:#ff00ff; color:#000000; font-family:monospace;"|#ff00ff
|align="center" style="background:#ff00ff; color:#000000; font-family:monospace;"|#ff00ff
|-
|-
|green
|green
|align="left" style="background:#008000; color:#ffffff; font-family:monospace;"|#008000
|align="center" style="background:#008000; color:#ffffff; font-family:monospace;"|#008000
|| ||lime
|| ||lime
|align="left" style="background:#00ff00; color:#000000; font-family:monospace;"|#00ff00
|align="center" style="background:#00ff00; color:#000000; font-family:monospace;"|#00ff00
|| ||olive
|| ||olive
|align="left" style="background:#808000; color:#ffffff; font-family:monospace;"|#808000
|align="center" style="background:#808000; color:#ffffff; font-family:monospace;"|#808000
|| ||Yellow
|| ||Yellow
|align="left" style="background:#ffff00; color:#000000; font-family:monospace;"|#ffff00
|align="center" style="background:#ffff00; color:#000000; font-family:monospace;"|#ffff00
|-
|-
|teal
|teal
|align="left" style="background:#008080; color:#ffffff; font-family:monospace;"|#008080
|align="center" style="background:#008080; color:#ffffff; font-family:monospace;"|#008080
|| ||aqua
|| ||aqua
|align="left" style="background:#00ffff; color:#000000; font-family:monospace;"|#00ffff
|align="center" style="background:#00ffff; color:#000000; font-family:monospace;"|#00ffff
|| ||gray
|| ||gray
|align="left" style="background:#808080; color:#ffffff; font-family:monospace;"|#808080
|align="center" style="background:#808080; color:#ffffff; font-family:monospace;"|#808080
|| ||white
|| ||white
|align="left" style="background:#ffffff; color:#000000; font-family:monospace;"|#ffffff
|align="center" style="background:#ffffff; color:#000000; font-family:monospace;"|#ffffff
|}
|}
''請參見:[[Help:色彩列表|色彩列表]]''
''请参见:[[Help:色彩列表|色彩列表]]''
[[category:助文|BG]]
 
===设定行高与列宽===
整个表格的行高(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

相当于

单元1单元2单元3

其中“||”相当于“新起一行”+“|”

在单元格中可以这样使用参数:

|参数|单元1

相当于

TH

使用方法和TD类似,用“!”代替“|”,用“!!”代替“||”。但是参数仍然使用“|”。

TR

标记在第一行会自动产生新w. 开始一个新行使用: |- 或者 |-------------- 或者 |------------------- 他们都相当于 可以这样添加参数: |- 参数 或者 |------- 参数 相当于

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
|}
这是标题 请参看:
独立 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