BBSers.org

Wikipedia:表格

出自BBSers' Wiki

Wiki表格的語法與HTML表格的語法很相似。如果你想熟練的使用Wiki語法來製作表格,可能還需要一些HTML表格的語法知識。

2003年12月8日软件启用了新的表格符号,可用來代替<table>, <tr>, <td>, <th>, 和<caption>这些HTML标记。

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

MediaWiki也支持許多HTML标记,可以直接用在wikitext中。表格使用class="sortable"可以进行排序。

目录

表格标记

Table

這是一個典型的wiki表格

第一部分 第二部分
第三部分 第四部分

它的源文件是這樣的

{| border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}



有沒有發現,在典型的表格源文件中,最前和最後有
{|
|}
{|
border="1"
|-
|| 第一部分 || 第二部分
|-
|| 第三部分 || 第四部分
|}



它是做什麼用的? 我們把它擦掉看看

 border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分

得到: border="1" |- | 第一部分 || 第二部分 |- | 第三部分 || 第四部分 什麼都不是了

border

再来看看典型的wiki表格

第一部分 第二部分
第三部分 第四部分
{| border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}



如果將其中border="1"改成border="5",會看到這樣的情況。

{| 
border="5" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分



要是改成10呢。

{| border="10" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分



如果改成20

{| border="20" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分



改成100的话,電腦能裝下嗎?

{| border="100" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分



太大了。索性不要框框了。

{| border="0" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分



如果没有 border= ,会是什么样?

{| 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

跟border="0"是一样的。

因為表格的預設樣式沒有 border 。


TD

这个典型的表格,我觉得有不足的地方。

{| border="1" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分



让我改改。

{| border="1"
|- 
|| 第一部分 || 第二部分
|-  
|| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

哈哈,没有变。 这样改的好处就是,格子与格子之间都是

|| xxx

格子也叫单元格。

不如就用这样的格式,作为我们典型的格式好了。



如果我们要增添一横排的话,怎么做。

{| border="1"
|-
|| 第一部分 || 第二部分
|-
|| 第三部分 || 第四部分
|-
|| 第五部分 || 第六部分
|}
第一部分 第二部分
第三部分 第四部分
第五部分 第六部分

可以看出

|-

表示新增一横排,同时也能看出表格是以横排加横排的方式组成的。

|| xxx

则是一横排之中,新增一单元格,xxx是内容。



如果把 |- 去掉,就成这样了。

{| border="1"  
| 第一部分 || 第二部分  
| 第三部分 || 第四部分
|}
第一部分 第二部分 第三部分 第四部分

全部成了一行。



有的表格是这样写的。

{| border="1"
|- 
| 第一部分 
| 第二部分 
|- 
| 第三部分 
| 第四部分
|}
第一部分 第二部分
第三部分 第四部分

每增加一个格,要换一行用

| xx 

来表示。

但是,这样对于机器来说是能理解的,对于人来说,让人搞不懂横竖了。

TH

行列標題。

如果我们想创建这样一个乘法表

× 1 2 3
1 1 2 3
2 2 4 6



怎样才能做出行列標題(預設顯示粗体字)的效果呢,很简单。将[ | ]全部换成[ ! ]。

{| border="1"
|-
! × !! 1 !! 2 !! 3
|}
× 1 2 3

不过,第一个单元格只能有一个 ! ,两个 !! 会显示错误

{| border="1"
!! × !! 1 !! 2 !! 3
|}
! × 1 2 3



那么,行列標題和普通格子(表格資料)混合是如何制作的?如下

{| border="1"
|-
!1
|| 1 || 2 || 3
|}


1 1 2 3

行列標題的单元格必须和普通格子的单元格分开。



如果不分开。

{| border="1"
! 1 || 1 || 2 || 3
|}


1 1 2 3

就全成行列標題了。



现在来试着自己写出开头那样的乘法表吧。

Caption

表格總標題。

表格的标题
第一部分 第二部分
第三部分 第四部分

这是一个带有總标题的表格,它的源文件是。

{| border="1"
|+ 表格的标题
|- 
|| 第一部分 || 第二部分
|-  
|| 第三部分 || 第四部分
|}

记住總标题的位置。總标题預設在表格的顶端,所以 |+ 要写在 |- 的上面。



我们再来创建一个带有總标题的乘法表。

乘法表
× 1 2 3
1 1 2 3
2 2 4 6
{| border="1"
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1 
|| 1 || 2 || 3
|-
! 2
|| 2 || 4 || 6
|}

class

维基百科中最常用的表格是这样的。

乘法表
× 1 2 3
1 1 2 3
2 2 4 6
{| class="wikitable" 
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1 
|| 1 || 2 || 3
|-
! 2
|| 2 || 4 || 6
|}


或者使用模板{{wt{{#if:||{{{2}}}}}}}

Template:Wt |+ 乘法表 |- ! × !! 1 !! 2 !! 3 |- ! 1 || 1 || 2 || 3 |- ! 2 || 2 || 4 || 6 |}


{{wt}}
|+ 乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1 
|| 1 || 2 || 3
|-
! 2
|| 2 || 4 || 6
|}


这样就可以不去管border了。

TR

<tr> 标记在第一行会自动产生新w. 开始一个新行使用:

|-

或者

|--------------

或者

|-------------------

他们都相当于

<tr>

可以这样添加参数:

|- 参数

或者

|------- 参数

相当于

<tr 参数>

CAPTION

<caption> 标记可以这样使用:

|+ 标题

相当于

<caption>标题</caption>

你也可以使用参数:

|+ 参数|标题

相当于

<caption 参数>标题</caption>

实例

简单的例子

{| border=1 
| 单元1,行1
| 单元2,行1
| 单元3,行1
|-
| 单元1,行2
| 单元2,行2
| 单元3,行2
|-
| 单元1,行3
| 单元2,行3
| 单元3,行3
|}

将生成:

单元1,行1 单元2,行1 单元3,行1
单元1,行2 单元2,行2 单元3,行2
单元1,行3 单元2,行3 单元3,行3

复杂的例子

注意这个表格将右对齐。

{| align=right border=1
| 单元1, 行1
|rowspan=2| 单元2, 行1+2
| 单元3, 行1
|-
| 单元1, 行2
| 单元3, 行2
|-
| 单元1, 行3
| 单元2, 行3
| 单元3, 行3
|}
单元1, 行1 单元2, 行1+2 单元3, 行1
单元1, 行2 单元3, 行2
单元1, 行3 单元2, 行3 单元3, 行3

Template:Clear同时使用COLSPAN和ROWSPAN:

{| border="1" cellpadding="5" cellspacing="0"
|-
! 栏目一 !! 栏目二 !! 栏目三
|-
| rowspan=2| A
| colspan=2 align="center"| B
|-
| C
| D
|-
| colspan=2 align="center"| E
| 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=center
|+<font color=red>
 '''这是标题'''</font>
 请参看:
|[[独立]]||[[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" | 比較
| 不一樣
|}

生成:

這行是 藍字 黃背景
這行是 白字 深海藍
這行 比較 不一樣

像其他參數一樣,顏色參數指定的優先順序為:單格→一行(列)→整個表格。
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:50%; height:200px" border="1"
|- 
| abc
| def
| ghi
|- style="height:50px;width:50px"
| jkl
| style="width:120px" |mno
| pqr
|-
| stu
| vwx
| yz
|}

将得到这样的结果:

abc def ghi
jkl mno pqr
stu vwx yz

层叠样式表

WP内置了CSS,用于格式化表格,可以通过在{|之后加入class="wikitable"或使用{{wt{{#if:||{{{2}}}}}}}模板使用。例如:

{| class="wikitable" style="text-align:center"
|+乘法表
|-
! × !! 1 !! 2 !! 3
|-
! 1
| 1 || 2 || 3
|-
! 2
| 2 || 4 || 6
|-
! 3
| 3 || 6 || 9
|}
{{wt}} 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

XHTML HTML Wiki語法對照

 XHTML HTML & Wiki-td Wiki-pipe
Table <table></table> <table></table>
{|
|}
Caption <caption>caption</caption> <caption>caption</caption>
|+ caption
Row <tr></tr> <tr>
|-
Data cell

<td>cell1</td>
<td>cell2</td>

<td>cell1
<td>cell2

| cell1
| cell2
Data cell <td>cell1</td> <td>cell2</td> <td>cell3</td> <td>cell1 <td>cell2 <td>cell3
| cell1 || cell2 || cell3
Header cell <th>heading</th> <th>heading
! heading
Sample table
1 2
3 4
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td> 
      <td>4</td> 
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
</table>
{| 
| 1 || 2
|- 
| 3 || 4
|}
Sample table
1 2
3 4
5 6
<table>
   <tr>
      <td>1</td>
      <td>2</td>
   </tr> 
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
   <tr>
      <td>5</td>
      <td>6</td>
   </tr>
</table>
<table>
   <tr>
      <td> 1 <td> 2
   <tr>
      <td> 3 <td> 4
   <tr>
      <td> 5 <td> 6
</table>
{| 
| 1 || 2 
|- 
| 3 || 4 
|- 
| 5 || 6 
|}
Pros
  • Can be previewed/debugged with any XHTML editor
  • Can be formatted for easier reading
  • Well-known
  • Can be previewed/debugged with any HTML editor
  • Can be formatted for easier reading
  • Well-known
  • Takes less space than XHTML
  • Easy to write
  • Easy to read
  • Takes little space
Cons
  • Tedious
  • Takes a lot of space
  • Difficult to read quickly
  • Should not be used
  • Confusing, especially for people with little HTML experience
  • Poorly formed
  • Poorly delimited
  • Generally odd looking
  • May not have browser support in future
  • Unfamiliar syntax
  • Rigid structure
  • Cannot be indented
  • Text (as in HTML tags) may be easier for some people to read than series of pipes, plus signs, exclamation marks, etc.
  • Is nothing more than a shortcut for HTML-style tags. Not easily understood by those unfamiliar with HTML table concepts
 XHTML HTML & Wiki-td Wiki-pipe

外部链接

Template:H:f Helpbg:Уикипедия:Наръчник/Форматиране/Таблици cs:Wikipedie:Tabulky de:Wikipedia:Tabellen en:Wikipedia:How to use tables fr:Aide:Les tableaux hu:Wikipédia:Hogyan használd a táblázatokat? it:Aiuto:Come usare le tabelle ja:Wikipedia:表の作り方 ko:위키백과:표 pt:Wikipedia:Como usar tabelas ro:Wikipedia:Folosirea tabelelor ru:Википедия:Как делать таблицы uk:Довідка:Таблиці