FANDOM


尽管在维基百科中可以使用HTML语法创建表格,但是Wiki语法通常会更加简便。以下所讲的语法在2003年12月8日为MediaWiki所支持。如果想要熟练地使用Wiki语法制作表格,可能还是需要一些HTML语法知识。

一段最简单的表格代码是这样的:

{| class="wikitable"
|-
!  表头1
!  表头2
!  表头3
|-
|  第1行第1列的单元格
|  第1行第2列的单元格
|  第1行第3列的单元格
|-
|  第2行第1列的单元格
|  第2行第2列的单元格
|  第2行第3列的单元格
|}

它会显示成:

表头1 表头2 表头3
第1行第1列的单元格 第1行第2列的单元格 第1行第3列的单元格
第2行第1列的单元格 第2行第2列的单元格 第2行第3列的单元格

将其中的样例文字替换为您想要的内容,即可成为一个具有实际作用的表格。

基本语法

{| 和 |}

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

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

得到:

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

什麼都不是了。说明这两个标记定义了表格的起止,稱為表格起止符号

简单表格

  • 任何一个Wiki表格都需要通过“{|”和“|}”两个记号界定其起止,如下:
{|
  表格内容代码
|}
  • 表格的开头可以通过“|+”记号添加一个标题,此标题位于表格之外,如下:
{|
|+ 表格标题
  表格内容代码
|}
  • 使用标记“|-”可以添加一个新行,而其中的单元格会在其后加入:
{|
|+ 表格标题
|-
  单元格内容代码
|-
  单元格内容代码
|}
  • 每一个记号“|”开始一个单元格:
{|
|+ 表格标题
|-
| 单元格内容
|-
| 下一行的单元格
| 另一列的单元格
|}
  • 其中,隔行的标记“|”可以替换为不用换行的“||”,如:
{|
|+ 表格标题
|-
|单元格 || 单元格 || 单元格
|-
|单元格
|单元格
|单元格
|}
  • 注意,如果在同一行中包含多个“|”标记,则会产生一些意想不到的问题,如:
 {| border="1"
 |-
 |格式修饰符(不显示) |这些  |(包括“|”标记) |进入了  |第一格
 |-
 |}
 

会显示为

这些 |(包括“|”标记) |进入了 |第一格
  • 注意,上面提到的格式修饰符很有用!例如:
 {| border="1"
 |-
 |第一格(不用修饰符——没有对齐)
 |-
 |align="right" |第二格(右对齐)
 |-
 |}
 

会显示为:

第一格(不用修饰符——没有对齐)
第二格(右对齐)
  • 将表格中的管道符“|”置换为“!”,||”置换为“!!”,则会显示加粗的表头。

border参数

再来看看典型的wiki表格。

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

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

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

要是改成10呢?

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

如果改成20……

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

改成100的话,屏幕能裝下嗎?……

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

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

  • 如不需要邊框,可以設定border為0:
{| border="0" 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分
  • 如果没有 border ,跟border="0"是一样的:
{| 
|- 
| 第一部分 || 第二部分 
|- 
| 第三部分 || 第四部分
|}
第一部分 第二部分
第三部分 第四部分

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

行和单元格

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

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

让我改改:

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

哈哈,没有变。不过这样改的好处是,使得格子与格子之间都是“|| xxx”

  • “格子”的学名叫单元格
  • 不如就用这样的格式,作为我们的典型格式好了。
  • 如果我们要增添一横排的话,怎么做?
{| border="1"
|-
|| 第一部分 || 第二部分
|-
|| 第三部分 || 第四部分
|-
|| 第五部分 || 第六部分
|}
第一部分 第二部分
第三部分 第四部分
第五部分 第六部分

因此可以看出,“|-”表示新增一横排,同时也能看出表格是以横排加横排的方式组成的。

而“|| xxx”则是在一横排之中新增一个单元格,内容就是xxx。

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

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

全部成了一行。

  • 开始一个新行,可以使用“|-”,或者“|-----------”,或者“|-------------------”。它们都相当于HTML中的<tr>。

可以这样添加参数:“|- 参数”,或者“|------- 参数”。相当于“<tr 参数>”。

有的表格是这样写的:

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

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

| xx 

来表示。

但是,虽然机器读得懂这种方式,但却让人搞不懂横竖了。

行列標題

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

× 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

就全成行列標題了。

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

表格标题

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

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

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

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

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

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

标题的参数可以这样添加:

|+ 参数 标题

class参数

最常用的表格是这样的:

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

由於wikitable參數存在預設值,这样就可以不去管border了。

常用的class參數

  • wikitable
  • article-table
  • navbox
  • infobox

......等等。

实例

简单的例子

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

使用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

請參見:Help:顏色

设定行高与列宽

整个表格的行高(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

层叠样式表

使用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

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 
|}
優點
  • 能以任何XHTML編輯器預覽以及除錯
  • 能以容易閱讀的方式來編排格式
  • 廣為人知
  • 沒有「|」符號會與樣版或是語法分析器碰撞
  • 能以任何HTML編輯器預覽以及除錯
  • 能以容易閱讀的方式來編排格式
  • 廣為人知
  • 沒有「|」符號會與樣版或是語法分析器碰撞
  • 使用的空間比XHTML少
  • 易寫
  • 易讀
  • 僅使用些許空間
缺點
  • 冗長
  • 使用許多空間
  • 編輯時難以閱讀
  • 不應使用
  • 容易混淆,尤其對於有一點HTML使用經驗的人
  • 格式不夠嚴謹
  • 標籤界線不夠清楚
  • 样子看起来总是很奇怪
  • 未來可能沒有瀏覽器會支援
  • 較為不熟悉的語法
  • 結構僵硬
  • 不能縮排
  • HTML標籤對於某些人來說會比一連串的垂直條(vertical slash,|),加號,驚嘆號等符號來的好讀
  • 無法直接從HTML型式的標籤複製。對於HTML表格概念不熟悉的人不容易理解。
  • 指定到樣板參數時,含有「|」的部份需要改用Template:!
  • 對於換行很敏感;因為有時候是從樣版中的參數傳來,某些情形下須要特殊的技巧去處理在使用樣版時的參數問題。參考Metawiki:Help:Newlines and spaces
XHTML HTML & Wiki-td Wiki

外部链接

除了特别提示,社区内容遵循CC-BY-SA 授权许可。

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+