帮助:表格

来自WikiFur
跳转至: 导航搜索


表格可以直接借助 HTML 的表格元件来制作,或是透过 wiki 格式语言在 wiki 网页予以定义。 HTML 表格元件与相关的使用方式在各式的网页都有详细的说明于此不再赘述。 使用 wiki 格式语言,相较于 HTML 表格元件的好处是当表格以字符符号架构出来的,使得你更容易的以文章编辑的角度看出表格的舖排样子。

经验上,除非必要,应尽量避免使用表格。表格的标示语言通常复杂化了页面的编辑。

Wiki 标示语言一览

{| 表格 起始
|+ 表格 标题, 选用; 每张表格只能出现一次且介于表格起始与第一行
|- 表格行, 第一行选用 -- wiki 引擎会假设是第一行
! 表格标题 储存格, 选用。 可以使用(!!)在同一行加入接续的表格标题或是单独使用 (!)换新的一行 。
| 表格资料 储存格, 必要! 可以使用(||)接续表格资料储存格或是单独使用 (|)。
|} 表格结束
  • 上述符号必须出现在新行的开头除了当在同一行中想要延续储存格所增用的双 || 与 !! 。
  • XHTML 属性。每一个符号,除了表格的末尾,可选择性的接受一或多个 XHTML 属性。 属性必须与符号在同一行。请使用一个空格隔开每一项属性。
    • 储存格与标题 (| 或是 ||,! 或是 !!,以及 |+) 持有表格内容。 所以要使用单线(|)来区隔属性与内容。储存格内容可以都位在同一行或是换到另一行。
    • 表格与行的符号({| 與 |-) 并不直接持有内容。 在它们的属性之后请不要加入管线(|)。 如果你在表格与行符号的属性之后错误的加入管线符号,剖析器会将之删除 以及之后任何触及该出错管线的属性!
  • 内容 (a) 可以任何选用的 XHTML 属性之后跟着同一行它的储存格标记或是 (b) 储存格标记的下一行。 使用 wiki 标示语言的内容本身需要自新的一行开始,例如清单,表头,或是表格内接的表格,必须在它自个儿的新行。

简单的表格

普通

下面这个表格没有外框与留白,但是显示了最简单的 wiki 表格标示语言的结构。

橘子 苹果
面包
奶油 冰淇凌
{|
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

另一种标记方式

想要排列得更像表格,可以使用 wiki 标示语言 || 将储存格分开但又并排于同一行。 这个方法对于储存格要放入比较长的文字内容,如段落时,其长短的调整并不佳。 它最适合用在简短的内容,例如此处所作的表格例子。

你也可以在储存格之间的 wiki 标示语言加入额外的空格,如同下面我对 wiki 标示语言所作的, 可以使得 wiki 标示语言本身排列的更好看但又不影响表格的产生。

HTML 属性可以被加入本页的表格示例。但是为了简化,在下述的例子中并没有写出来。

橘子 苹果 更多
面包 更多
奶油 冰淇凌 以及更多
{|
|   橘子   ||   苹果  ||   更多
|-
|   面包   ||   饼    ||   更多
|-
|   奶油   ||  冰淇凌  ||  以及更多
|}

搭配 HTML 属性

你可以加上 HTML 属性让你的表格看起来更漂亮

border="1"

橘子 苹果
面包
奶油 冰淇凌
{| border="1"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

align="center" border="1"

橘子 苹果
面包
奶油 冰淇凌
{| align="center" border="1"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

align="right" border="1"

你可以将属性加诸于个别的储存格。 例如数字靠右对齐会比较好看

橘子 苹果 12,333.00
面包 500.00
奶油 冰淇凌 1.00
{| border="1"
|橘子
|苹果
|align="right"|12,333.00
|-
|面包
|饼
|align="right"|500.00
|-
|奶油
|冰淇凌
|align="right"|1.00
|}


你也可以将属性加诸于个别的

橘子 苹果 12,333.00
面包 500.00
奶油 冰淇凌 1.00
{| border="1"
|橘子
|苹果
|align="right"|12,333.00
|-
|面包
|饼
|align="right"|500.00
|- style="font-style:italic;color:green;"
|奶油
|冰淇凌
|align="right"|1.00
|}

cellspacing="0" border="1"

橘子 苹果
面包
奶油 冰淇凌
{| cellspacing="0" border="1"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

cellpadding="20" cellspacing="0" border="1"

橘子 苹果
面包
奶油 冰淇凌
{| cellpadding="20" cellspacing="0" border="1"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

搭配 HTML 属性与 CSS 样式

CSS 样式属性可以同时搭配或不搭配其他 HTML 属性

style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"

橘子 苹果
面包
奶油 冰淇凌
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

搭配 TH 表头的表格

TH (HTML 表头的表格) 可以使用 ! 而非 | 来指明。 依照默认,表头通常是粗体字与置中对齐。

表头

各栏

好吃 更好吃
橘子 苹果
面包
奶油 冰淇凌
{| border="1" cellpadding="20" cellspacing="0"
!好吃
!更好吃
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

Colspan="2"

好吃的东西
橘子 苹果
面包
奶油 冰淇凌
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|好吃的东西
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

侧表头

默认

水果 橘子 苹果
主食 面包
甜点 奶油 冰淇凌
{| border="1" cellpadding="20" cellspacing="0"
!水果
|橘子
|苹果
|-
!主食
|面包
|饼
|-
!甜点
|奶油
|冰淇凌 
|}

靠右对齐

如下作出靠右对齐的效果

水果 橘子 苹果
主食 面包
甜点 奶油 冰淇凌
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |水果
|橘子
|苹果
|-
!align="right" |主食
|面包
|饼
|-
!align="right" |甜点
|奶油
|冰淇凌 
|}

标题

标题可以如下的方式加到任何表格的第一行

食品和配餐
橘子 苹果
面包
奶油 冰淇凌
{| border="1" cellpadding="20" cellspacing="0"
|+食品和配餐
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

属性也可以如下的方式放到标题内

食品和配餐
橘子 苹果
面包
奶油 冰淇凌
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''食品和配餐''
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

表格搭配 H1, H2, H3 等标题

你可以使用 ==等于== 号来制作 HTML H1, H2, H3, H4 等类型的标题,必须紧靠成行才有效果。

预览整个表格 如果你在表格之内的标题选取编辑标签编辑,预览,其母表格会因部份会断落而无法完整的显示出来。

保持标题架构与页面的其他部份一致来使得页面上方的目录能正确的显示。

最好吃的

橘子 苹果
面包
奶油 冰淇凌
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===最好吃的===
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}

注意事项

负数

如果你要在一行的第一个单元格中显示负数(例如 |-6 ),其中的负号可能会导致显示不正常。因为MediaWiki软件会认为你的标记并不是新单元格,而是新行 (|-)。

避免的方法是在负号前加空格 (| -6) 或者使用单行单元格标记(||-6)。