"使用說明:表格" 修訂間的差異

出自 房屋百科
前往: 導覽搜尋
(新页面: 下面介紹的表格符號必須在'''新的一行的開始'''使用(也有例外),並且可以使用一些在HTML表格標記中可用的參數。 ==表格標記== === Table ===...)
 
 
(未顯示同一使用者於中間所作的 2 次修訂)
行 1: 行 1:
下面介紹的表格符號必須在'''新的一行的開始'''使用(也有例外),並且可以使用一些在HTML表格標記中可用的參數。
+
下面介绍的表格符号必须在'''新的一行的开始'''使用(也有例外),并且可以使用一些在HTML表格标记中可用的参数。
  
==表格標記==
 
  
=== Table ===
+
==实例==
可以這樣描述一個表格:
+
===简单的例子===
<nowiki>{|</nowiki> ''參數''
+
<nowiki>|}</nowiki>
+
相當於
+
<table ''參數''>
+
</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>標題</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: 行 53:
 
|-
 
|-
 
| E
 
| E
| colspan=2 align="left"| F
+
| colspan=2 align="center"| F
 
|-  
 
|-  
 
| rowspan=3| G
 
| rowspan=3| G
行 116: 行 62:
 
| 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: 行 76:
 
|-
 
|-
 
| E
 
| E
| colspan=2 align="left"| F
+
| colspan=2 align="center"| F
 
|-  
 
|-  
 
| rowspan=3| G
 
| rowspan=3| G
行 139: 行 85:
 
| K
 
| K
 
|-
 
|-
| colspan=2 align="left"| L
+
| colspan=2 align="center"| L
 
|}
 
|}
  
行 165: 行 111:
 
|}
 
|}
  
===帶標題的表格===
+
===带标题的表格===
 
{| 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: 行 129:
 
| 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: 行 180:
 
{| 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:色彩列表|色彩列表]]''
  
===設定行高與列寬===
+
===设定行高与列宽===
整個表格的行高(height)和列寬(width),以及任意列的列寬可以進行設定。要設定任意行的行高,可以通過設定該行任意一個單元格的行高來實現。如果存在行、列的高、寬沒有設定,那麼表格的顯示結果可能隨瀏覽器的不同而不同。
+
整个表格的行高(height)和列宽(width),以及任意列的列宽可以进行设定。要设定任意行的行高,可以通过设定该行任意一个单元格的行高来实现。如果存在行、列的高、宽没有设定,那么表格的显示结果可能随浏览器的不同而不同。
 
<pre>
 
<pre>
 
{| style="width:75%; height:200px" border="1"
 
{| style="width:75%; height:200px" border="1"
行 306: 行 252:
 
</pre>
 
</pre>
  
將得到這樣的結果:
+
将得到这样的结果:
  
 
{| style="width:75%; height:200px" border="1"
 
{| style="width:75%; height:200px" border="1"
行 323: 行 269:
 
|}
 
|}
  
===層疊樣式表===
+
===层叠样式表===
WP內置了CSS,用於格式化表格,可以通過在<code>{|</code>之後加入<code>class="wikitable"</code>。例如:
+
WP内置了CSS,用于格式化表格,可以通过在<code>{|</code>之后加入<code>class="wikitable"</code>。例如:
<pre>{| class="wikitable" style="text-align:left"
+
<pre>{| class="wikitable" style="text-align:center"
 
|+乘法表
 
|+乘法表
 
|-
 
|-
行 339: 行 285:
 
| 3 || 6 || 9
 
| 3 || 6 || 9
 
|}</pre>得到:
 
|}</pre>得到:
{| class="wikitable" style="text-align:left"
+
{| class="wikitable" style="text-align:center"
 
|+乘法表
 
|+乘法表
 
|-
 
|-
行 355: 行 301:
  
  
[[category:幫助文檔|BG]]
+
[[category:帮助文档|BG]]

於 2008年9月2日 (二) 17:35 的最新修訂

下面介绍的表格符号必须在新的一行的开始使用(也有例外),并且可以使用一些在HTML表格标记中可用的参数。


实例

简单的例子

{| 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