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

出自 房屋百科
前往: 導覽搜尋
(新页面: 下面介紹的表格符號必須在'''新的一行的開始'''使用(也有例外),並且可以使用一些在HTML表格標記中可用的參數。 ==表格標記== === Table ===...)
 
行 286: 行 286:
 
|}
 
|}
 
''請參見:[[Help:色彩列表|色彩列表]]''
 
''請參見:[[Help:色彩列表|色彩列表]]''
 
===設定行高與列寬===
 
整個表格的行高(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:left"
 
|+乘法表
 
|-
 
! × !! 1 !! 2 !! 3
 
|-
 
! 1
 
| 1 || 2 || 3
 
|-
 
! 2
 
| 2 || 4 || 6
 
|-
 
! 3
 
| 3 || 6 || 9
 
|}</pre>得到:
 
{| class="wikitable" style="text-align:left"
 
|+乘法表
 
|-
 
! × !! 1 !! 2 !! 3
 
|-
 
! 1
 
| 1 || 2 || 3
 
|-
 
! 2
 
| 2 || 4 || 6
 
|-
 
! 3
 
| 3 || 6 || 9
 
|}
 
 
 
 
[[category:幫助文檔|BG]]
 
[[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="left"| B
|-
| C
| D
|-
| E
| colspan=2 align="left"| F
|- 
| rowspan=3| G
| H
| I
|- 
| J
| K
|-
| colspan=2 align="left"| 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

請參見:色彩列表