使用MW：表格

来自Wikioe
跳到导航 跳到搜索


摘要

符号 说明
{| 表格起始（必须）
|+ 表格名/表格属性（选用），每张表格只能出现一次且介于表格起始与第一行
! 表格表头（选用），可以使用（!!）在同一行加入接续的表格标题或是单独使用（!）换新的一行 。
|- 表格行（第一行可选用）
| 表格数据格（选用），可以使用（||）接续表格资料储存格或是单独使用（|）。
|} 表格末尾（必须）
  • 除了双“||”与“!!”，其余符号必须在新行的开头（行头的空格会被忽略）；
  • 表格符号可以于HTML属性搭配使用：
# HTML属性与表格符号必须在同一行
# 多个HTML属性时，属性之间应用空格隔开
# 直接持有内容的符号（“|”或是“||”，“!”或是“!!”，以及“|+”），应用“|”将属性与内容隔开
# 不直接持有内容的符号（“{|”与“|-”），它们的属性之后不能加“|”
  • 单元格内容也可以与HTML属性搭配：
# 可以在使用HTML属性的单元格标记之后，或者在单元格标记的下一行
# 单元格内容可以使用基础的MediaWiki语法或HTML标记（如：<nowiki></nowiki>、<br/>等）
# 使用wiki标示语言的内容本身需要自新的一行开始，例如清单，表头，或是表格内接的表格，必须在它自个儿的新行。

WikiEditor效果

描述 格式 效果
标题行、边框、可排序 
{| class="wikitable sortable"
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
标题文字 标题文字 标题文字
示例 示例 示例
示例 示例 示例
示例 示例 示例
标题行、可排序 
{| class="sortable"
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
标题文字 标题文字 标题文字
示例 示例 示例
示例 示例 示例
示例 示例 示例
标题行 
{|
|-
! 标题文字 !! 标题文字 !! 标题文字
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
标题文字 标题文字 标题文字
示例 示例 示例
示例 示例 示例
示例 示例 示例
边框 
{| class="wikitable"
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
示例 示例 示例
示例 示例 示例
示例 示例 示例

HTML属性

基础

  1. 除“||”与“!!”以外其余符号要在新行首；
  2. 单元格多余空格对显示无影响；
  3. 将“||”分开单元格但排在同一行，或“|”分开单元格在新行，二者等效
  4. 直接持有内容的符号（“|”或是“||”，“!”或是“!!”，以及“|+”），应用“|”将属性与内容隔开
  5. 不直接持有内容的符号（“{|”与“|-”），它们的属性之后不能加“|”
  6. 将表格属性添加到（“{|”）后将应用属性到整个表格。
格式 效果 
{| class="wikitable"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
橘子 苹果
面包 饼
奶油 冰淇凌 
{| class="wikitable"
|橘子 || 苹果
|-
|面包 || 饼
|-
|奶油 || 冰淇凌 
|}
橘子 苹果
面包 饼
奶油 冰淇凌 
{| class="wikitable"
| style="text-align: center; color: green;"|橘子 || 苹果
|-
| style="text-align: center; color: red;"|面包 
| 饼
|- style="text-align: center; color: yellow;"
|奶油 || 冰淇凌 
|}
橘子 苹果
面包 饼
奶油 冰淇凌 
{| class="wikitable" style="text-align: center; color: green;"
|橘子
|苹果
|12,333.00
|-
|面包
|饼
|500.00
|-
|奶油
|冰淇凌
|1.00
|}
橘子 苹果 12,333.00
面包 饼 500.00
奶油 冰淇凌 1.00

表格标题

格式 效果 
{| class="wikitable"
|+食品和配餐
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
食品和配餐
橘子 苹果
面包 饼
奶油 冰淇凌 
{| class="wikitable"
|+ style="caption-side:bottom; color:#e76700;"|'''食品和配餐'''
|-
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
食品和配餐
橘子 苹果
面包 饼
奶油 冰淇凌

表格头部

表格的头部可以通过使用“!”创建。 表头通常显示为粗体，并默认居中。

格式 效果 
{| class="wikitable"
! style="text-align:left;"| 项目
! 数量
! 价格
|-
|橘子
|10
|7.00
|-
|面包
|4
|3.00
|-
!总计
|
|10.00
|}
项目 数量 价格
橘子 10 7.00
面包 4 3.00
总计 10.00

多列合并和多行合并

在单元格可以使用HTML属性“colspan”（多列合并）与“rowspan”（多行合并）进行高级布局。
按照从左到右、从上到下写代码构建表格。

格式 效果 
 
{| class="wikitable"
! colspan="3"|购物清单
|-
| rowspan="5"|食物
| rowspan="2"|面包
| 全麦面包
|-
| 牛角面包
|-
| rowspan="3"|饮料
| 可乐
|-
| 雪碧
|-
| 咖啡
|}
购物清单
食物 面包 全麦面包
牛角面包
饮料 可乐
雪碧
咖啡 
 
{| class="wikitable"
!colspan="6"|购物清单
|-
|rowspan="2"|面包和奶油
|饼
|小圆面包
|丹麦甜糕饼
|colspan="2"|羊角面包
|-
|奶酪
|colspan="2"|冰淇凌
|奶油
|酸奶酪
|}
购物清单
面包和奶油 饼 小圆面包 丹麦甜糕饼 羊角面包
奶酪 冰淇凌 奶油 酸奶酪

列宽

格式 效果 
{| class="wikitable" style="width: 85%;"
| colspan="2" | 此列列宽为屏幕宽度的85%。
|-
| style="width: 30%"| '''此列列宽为屏幕宽度的85%中的30%'''
| style="width: 70%"| '''此列列宽为屏幕宽度的85%中的70%'''
|}
此列列宽为屏幕宽度的85%。
此列列宽为屏幕宽度的85%中的30% 此列列宽为屏幕宽度的85%中的70%

边距

边距通过HTML的“style="padding:10px"”进行设定。

格式 效果 
{|class=wikitable 
| style="padding: 10px" | style="padding:10px"的示例
|-
| style="padding: 50px" | style="padding:50px"的示例<br/><br/>指定'''每个单元格'''的padding
|-
| style="padding:100px" | style="padding:100px"的示例
|}
style="padding:10px"的示例
style="padding:50px"的示例

指定每个单元格的padding
style="padding:100px"的示例

表格边框

表格边框效果通过的“border="1""”进行设定。 表格边框宽度通过的“style="border-style: solid; border-width: 20px"”进行设定：

  • 如果“border-width:”的值只有一个的话，值将应用于所有边框。
  • 如果“border-width:”多于一个值时，分别代表顶部，右侧，底部，左侧的宽度（按顺序对应）。

您输入的

格式 效果 
{| border="3" style="border-collapse:collapse"
| 橘子
| 苹果
|-
| 面包
| 饼
|}
橘子 苹果
面包 饼 
{| border="5" style="border-collapse:collapse"
| 橘子
| 苹果
|-
| 面包
| 饼
|}
橘子 苹果
面包 饼 
{|style="border-style: solid; border-width: 20px"
| 橘子
| 苹果
|}
橘子 苹果 
{| style="border-style: solid; border-width: 10px 20px 100px 0
| 橘子
| 苹果
|}
橘子 苹果

HTML 属性与 CSS 样式

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

格式 效果 
{| class="wikitable" style="color:green; background-color:#ffffcc; font-weight:bold;" cellpadding="10"
|橘子
|苹果
|-
|面包
|饼
|-
|奶油
|冰淇凌 
|}
橘子 苹果
面包 饼
奶油 冰淇凌

表标题单元格的可访问性

使用表格标题单元格上的scope=“row”或scope=“col”属性，帮助浏览器确定哪个表格标题单元格应用于任何选定单元格的描述（以便在某个辅助功能帮助器中重复其内容）。
通常，对于表的第一行所有标题单元格使用scope=“col”，对以下第一列所有单元格使用scope=“row”。

格式 效果 
{| class="wikitable"
|-
! scope="col"| 项目
! scope="col"| 数量
! scope="col"| 价格
|-
! scope="row"| 面包
| 0.3 kg
| $0.65
|-
! scope="row"| 奶油
| 0.125 kg
| $1.25
|-
! scope="row" colspan="2"| 总计
| $1.90
|}
项目 数量 价格
面包 0.3 kg $0.65
奶油 0.125 kg $1.25
总计 $1.90

对齐

表格对齐

表格的对齐由外边距控制，通过使用CSS实现：

  • 如果另一侧的边距定义为auto，则一侧的固定边距将使表格与该侧对齐；
  • 使表格居中，你需要把两边的margin（外边距）属性都设为auto。
格式 效果 
{| class="wikitable" style="margin-left: 0px; margin-right: auto;"
| 橘子
| 苹果
|-
| 面包
| 饼
|}
橘子 苹果
面包 饼 
{| class="wikitable" style="margin: auto;"
| 橘子
| 苹果
|-
| 面包
| 饼
|}
橘子 苹果
面包 饼 
{| class="wikitable" style="margin-left: auto; margin-right: 0px;"
| 橘子
| 苹果
|-
| 面包
| 饼
|}
橘子 苹果
面包 饼

单元格对齐

单元格内容的对齐受两个不同CSS的属性控制“text-align”（左右位置）和“vertical-align”（垂直位置）控制。

  • “text-align”可以在表格、行或单个单元格中指定（“left”、“center”、“right”）；
  • “vertical-align”只能在单个行或单元格中指定（“top”、“middle”、“bottom”）。
格式 效果 
{| class="wikitable"
|- style="vertical-align:top;"
| style="height:100px; width:100px; text-align:left;" | A
| style="height:100px; width:100px; text-align:center;" | B
| style="height:100px; width:100px; text-align:right;" | C
|- style="vertical-align:middle;"
| style="height:100px; width:100px; text-align:left;" | D
| style="height:100px; width:100px; text-align:center;" | E
| style="height:100px; width:100px; text-align:right;" | F
|- style="vertical-align:bottom;"
| style="height:100px; width:100px; text-align:left;" | G
| style="height:100px; width:100px; text-align:center;" | H
| style="height:100px; width:100px; text-align:right;" | I
|}
A B C
D E F
G H I

文本环绕表格

如果将表格与页面的右侧或左侧对齐，表格后面的文本将在表格结尾处开始，并在表格周围留下空白。
要使表格在文本周围浮动,使用CSS的“float”属性来实现，该属性可以指定表浮动到右侧或左侧的位置。
使用float时，margins不控制表格对齐方式，可用于指定表格与周围文本之间的边距。

格式 效果 
{| class="wikitable" style="float:right; margin-left: 10px;"
| 橘子
| 苹果
|-
| 面包
| 饼
|-
| 奶油
| 冰淇凌 
|}

Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi 
enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis autem vel eum iriure dolor 
in hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facilisis at vero 
eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te 
feugait nulla facilisi.
橘子 苹果
面包 饼
奶油 冰淇凌

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

取自“http://wiki.eijux.com/index.php?title=使用MW：表格&oldid=5452”