haokandedianying

帮助:表格教程
来自胚胎学
跳到:导航, 搜索

介绍

马克·希尔博士

一个好的表格可以使读者总结和比较不同类别的信息,否则这些信息会丢失在您的页面文本中。对于新用户,甚至是经验丰富的用户,用Wiki代码编写和格式化表格有时都有些困难。请注意,如果您以前使用过HTML代码,并且发现该格式更易于使用,则也可以在页面上使用它。这两个版本如下所示。在许多情况下,您需要尝试使用外观和布局以使其正确。

  1. 从最简单的表格格式开始(在您的讨论页上)。
  2. 然后,在不删除第一个表的情况下,将整个代码复制并粘贴到第一个表下,现在您可以使用一个版本。
  3. 然后播放列的宽度和高度(不要那么高),以便它正确显示在您的页面上(其他用户的视屏幕大小和浏览器窗口而定)
  4. 他们使用颜色玩耍,不要使用难以阅读的颜色和文字组合。
  5. 还请尝试使页面上的所有表格保持类似的结构/颜色。
  6. 一旦您是专家,就可以尝试可排序表,仅在您希望读者重新组织表中的信息时有用。
  7. 另一个非常有用的工具是可折叠桌 坐在您的页面上,隐藏着其他信息,但又不会破坏现有内容的总体流程。

此页面的最后一部分典型表格模板 显示了本网站上使用的一般基本表格结构。使用这些模板可以在您自己的页面上开始使用。

当前页面上的某些内容被修改为AskDrWiki帮助:表格.


编辑链接: 编辑基础 | 图片 | 桌子 | 参照 | 期刊搜索 | 版权 | 字体颜色 | 虚拟幻灯片固定链接 | 我的偏好 | 一页Wiki卡 | 列印 | 电影 | 语言翻译 | 学生电影 | 使用OpenOffice | 互联网浏览器 | 面条 | 导航/贡献 | 术语链接 | 短网址 | 2018年考生

关于HTML的注意事项

在本文中,HTML和Wiki代码并排显示。原因是双重的:因此,那些有HTML经验的人可以查看HTML代码,并对发生的事情有一个更好的了解,而那些不了解HTML表代码的人可以同时学习两者。

还有一些在线工具,可以将HTML代码粘贴并转换为Wiki代码。

在线工具:HTML至Wiki转换器 | Wiki编辑工具

基本结构

建筑模块

在HTML中,表格标签用于开始和结束表格。维基代码中也有类似的想法,弯括号 开始和结束表格。请注意,这些必须是一行中的第一个字符,否则它们将被Wiki忽略。例子:

  • 的HTML
    • 打开表:<表>
    • 关闭表格:</表>
  • 维基
    • Open table: {|
    • Close table: |}

这形成了表格的包含主体。

接下来是行。在HTML中,需要使用开始和结束标记来开始和结束一行。在Wiki代码中这是不同的,因为一组短跑 (随后按一次Enter键),并且仅在新行的开头才需要。例子:

  • 的HTML
    • 开始行:<tr>
    • 结束行:</ tr>
  • 维基
    • 开始行:|-

行包含单元格。

最后,在基本结构中,有细胞。在HTML中,单元格是由其开始和结束标记定义的。与行一样,使用简单的Wiki等效项也有很大不同 开始一个细胞,然后双管 分隔同一行上的单元格。例:

  • 的HTML
    • 开始单元格:<d>
    • 结束单元格:</ td>
  • 维基
    • 开始单元格:
    • 单独的单元格: (或按Enter键)

单元格包含表的实际内容。

放在一起

haokandedianying
HTML表格 维基表
步骤1-启动表格
为了开始我们的基本HTML表格,我们从开始标记开始,<表>。我希望在此标签后立即按Enter键,以便更轻松地找到表格的开头。
<表> 
要开始我们的基本Wiki表,我们从开头的字符开始,{|。除非您在此处放置标签,否则必须按Enter键。
{|
第2步-开始一行
接下来,我们必须使用<tr> 标签。
<表>
 <tr> 
接下来,我们必须使用字符添加第一行|-。同样,除非您在此处放置标签,否则必须按Enter键。
{|
|-
第3步-添加单元
接下来,我们必须使用<d></ td> 标签。我们还将在它们之间添加一些内容。
<表>
 <tr>
  <d>这是内容</ td> 
接下来,我们必须使用| 字符。除非您在此处放置标签,否则内容将紧随其后。不需要结束的“标签”。
{|
|-
| 这是内容
步骤4-添加另一个单元格。
注意:如果您不想添加其他单元格,请跳过此步骤。
接下来,我们将使用<d></ td> 再次标记。我们还将在它们之间添加一些内容。
<表>
 <tr>
  <d>这是内容</ td>
  <d>这是更多内容</ td> 
接下来,我们将按Enter键添加第二个单元格,并使用| 再次字符。我们也会在这里放置一些内容。另外,也可以按Enter键并添加新的|,您可以直接添加|| 在同一行上,然后在其中添加内容。右边的示例使用前一种方法。
{|
|-
| 这是内容
| 这是更多内容
第5步-完成该行。
要结束该行,只需添加</ tr> 标签。
<表>
 <tr>
  <d>这是内容</ td>
  <d>这是更多内容</ td>
 </ tr> 
使用Wiki表代码不需要此步骤。
{|
|-
| 这是内容
| 这是更多内容
 
第6步-添加另一行。
注意:如果您不想添加另一行,请跳过此步骤。
要添加另一行,请重复步骤2至5。
<表>
 <tr>
  <d>这是内容</ td>
  <d>这是更多内容</ td>
 </ tr>
 <tr>
  <d>这是更多的内容</ td>
  <d>这是更多内容</ td>
 </ tr>  
要添加另一行,请重复步骤2至5。
{|
|-
| 这是内容
| 这是更多内容
|-
| 这是更多的内容
| 这是更多内容

步骤7-整理表格。
</表> 最后,您就完成了!点击预览以查看您的工作。
<表>
 <tr>
  <d>这是内容</ td>
  <d>这是更多内容</ td>
 </ tr>
 <tr>
  <d>这是更多的内容</ td>
  <d>这是更多内容</ td>
 </ tr>
</表>  
|} 最后,您就完成了!点击预览以查看您的工作。
{|
|-
| 这是内容
| 这是更多内容
|-
|这是更多的内容 | 这是更多内容 |}
步骤8-成品。按照上述步骤,表格应类似于这些表格。它可能会更宽,填满整个页面,并且可能因浏览器而异。


这是内容这是更多内容
这是更多的内容这是更多内容




这是内容 这是更多内容
这是更多的内容 这是更多内容


替代表格格式

{| class="pretty table"

haokandedianying
表标题
第1行 第2栏
第1行 第2栏

高级格式化

通常,可以将完全相同的属性添加到HTML表格标签和Wiki表格中,以产生相同或相似的结果。

背景颜色

以下适用于HTML和Wiki语法:

bgcolor="#00ff00"
-要么-
bgcolor="green"

以下内容也可以在HTML和Wiki表上使用,并使用“样式”语句。

style="background:#00ff00"
-要么-
style="background:green"

上面的内容将更改整个表格,行或单个单元格的背景颜色,具体取决于放置位置。请注意,十六进制颜色代码 要么 颜色名称 可以使用。强烈建议使用名称。行的颜色将覆盖表格的颜色,单元格的颜色将覆盖行的颜色。要为列着色,您必须单独设置每个单元格的颜色。

例:

HTML代码(顶部)和Wiki代码(底部) 结果
<表>
 <trbgcolor="#bbbbbb">
  <d>该行中的单元格</ td>
  <d>浅灰色</ td>
 </ tr>
 <trstyle="background:grey">
  <d>该行中的单元格</ td>
  <d>只是灰色</ td>
 </ tr>
</表>
该行中的单元格 浅灰色
该行中的单元格 只是灰色
{| 
|-bgcolor="#bbbbbb" 
| 该行中的单元格
| 浅灰色
|-style="background:grey"
| 该行中的单元格
| 只是灰色
|}
<表style="background:yellow">
 <tr>
  <d>这个桌子是黄色的</ td>
  <dbgcolor="green" >但是这个细胞是绿色的</ td>
 </ tr>
 <trbgcolor="blue">
  <d>这排是蓝色的</ td>
  <dstyle="background:red">这个细胞是红色的</ td>
 </ tr>
</表>
这个桌子是黄色的 但是这个细胞是绿色的
这排是蓝色的 这个细胞是红色的
{| style="background:yellow"
|-
| 这个桌子是黄色的
| bgcolor="green" |但是这个细胞是绿色的
|- bgcolor="blue"
| 这排是蓝色的
| style="background:red" |这个细胞是红色的
|}

宽度和高度

您可以设置整个表格的宽度和高度,列的宽度和行的高度。要设置列的宽度,必须指定该列上单个单元格的宽度。

语法是

width="80%" height="100px"
-要么-
style="width:80%; height:100px"

这些方法中的任何一个都将创建一个表格,该表格水平填充80%的屏幕,并且高度大约为100像素。


使用“样式”语法的示例:

{| style="width:80%; height:100px" border="1"
|-  
| 该表将填充其可用空间的80%,
| 高度为100像素
|- style="height:50px" 
| style="width:75%" |This column takes 75% of the table
| 该行高50像素
|-
| 我真的快用完了
| 话要说
|}
该表将填充其可用空间的80%, 高度为100像素
该列占表的75% 该行高50像素
我真的快用完了 话要说


单元格间距和填充

单元格的填充和间距是表的两个主要被忽略的功能。 Cellpadding是单元格的边距,cellspacing是它们之间的距离。注意以下几点。


细胞间隔 细胞填充
正常 的细胞间距
10像素
正常 的细胞填充
10像素
单元格X 单元格Y
单元格Z 单元格Q
单元格X 单元格Y
单元格Z 单元格Q
单元格X 单元格Y
单元格Z 单元格Q
单元格X 单元格Y
单元格Z 单元格Q
上面的Wiki代码
{| border="1px" cellspacing="10"
|-
|单元格X
|单元格Y
|-
|单元格Z
|单元格Q
|}
{| border="1px" cellpadding="10"
|-
|单元格X
|单元格Y
|-
|单元格Z
|单元格Q
|}
上面的HTML代码
<table border="1px" cellspacing="10">
 <tr>
  <d>单元格X</ td>
  <d>单元格Y</ td>
 </ tr>
 <tr>
  <d>单元格Z</ td>
  <d>单元格Q</ td>
 </ tr>
</表>
<table border="1px" cellpadding="10">
 <tr>
  <d>单元格X</ td>
  <d>单元格Y</ td>
 </ tr>
 <tr>
  <d>单元格Z</ td>
  <d>单元格Q</ td>
 </ tr>
</表>

定位

您可以放置 整个表,单个行的内容或单个单元格的内容。您可以定义水平或垂直方向的定位。

对齐

对齐 关键字控制水平位置。通常,所有内容都位于左侧。对齐 有两个可能的值:中央.

的位置对齐 单词控制单词的范围。请参阅以下示例以进行澄清。


整张桌子,右

{| border="1" align="right"
|-
|文字||文字||文字
|-
|长文本||长文本||甚至更长的文本
|-
|中||大||特大
|}


结果:

文本 文本 文本
长文本 较长的文字 更长的文字
超大

请注意,将表右对齐可能会导致某些浏览器出现意外结果。在某些情况下,表格会与页面上的其他元素重叠。


整桌中央

{| border="1" align="center"
|-
|文字||文字||文字
|-
|长文本||长文本||甚至更长的文本
|-
|中||大||特大
|}


结果:

文本 文本 文本
长文本 较长的文字 更长的文字
超大


右行:

{| border="1" 
|- align="right"
|文字||文字||文字
|-
|长文本||长文本||甚至更长的文本
|-
|中||大||特大
|}


结果:

文本 文本 文本
长文本 较长的文字 更长的文字
超大

行,中心:

{| border="1" 
|- align="center"
|文字||文字||文字
|-
|长文本||长文本||甚至更长的文本
|-
|中||大||特大
|}


结果:

文本 文本 文本
长文本 较长的文字 更长的文字
超大


注意,在两个示例中,仅第一行受到了影响。为了将其他行也对齐到右边,您需要将对齐 到每一行,或替代使用文字对齐风格:

文字对齐:

{| border="1" style="text-align:center"
|-
|文字||文字||文字
|-
|长文本||长文本||甚至更长的文本
|-
|中||大||特大
|}


结果:

文本 文本 文本
长文本 较长的文字 更长的文字
超大


单元格遵循相同的原理,对齐 只会影响一个细胞。否则它们将作为行工作。

垂直对齐

垂直对齐, 要么垂直对齐,控制文本的垂直位置。垂直对齐 can have to values, 最佳 要么底部.

比较这两个示例。在左边,没有垂直对齐 使用标签。在右边,两者最佳底部 tags are used, 最佳 对于中间的行和底部 对于最下面的行。如左图所示,垂直对齐的默认值为中间。

{| border="1" 
|- 
|文字||文字||文字
|-
|最小||最大||一些<br>真<br>长<br>文本
|-
|中||大<br>大||额外<br>大<br>额外<br>大<br>额外<br>大
|}
{| border="1" 
|- 
|文字||文字||文字
|- valign="top"
|最小||最大||一些<br>真<br>长<br>文本
|- valign="bottom"
|中||大<br>大||额外<br>大<br>额外<br>大<br>额外<br>大
|}
文本 文本 文本
最高 一些


文本

额外

额外

额外
文本 文本 文本
最高 一些


文本

额外

额外

额外

行和列跨度

There are two attributes, 行跨和列跨,可以分别遍历行和列的单元格。

语法范例

rowspan="3"
-和-
colspan="5"

这些放置在单元格属性将要放置的位置,如以下示例所示。

HTML代码(顶部)和Wiki代码(底部) 结果
<table border="1">
 <tr>
  <d>第1列,第1列</ td>
  <d>第1列,第2列</ td>
  <d>第1行,第3列</ td>
  <d>第1行,第3列</ td>
 </ tr>
 <tr>
  <dcolspan="3">第2行,第1-3列</ td>
  <d>第2列第4列</ td>
 </ tr>
</表>
第1列,第1列 第1列,第2列 第1行,第3列 第1列,第4列
第2行,第1-3列 第2列第4列
{| border="1"
|- 
| 第1列,第1列
| 第1列,第2列
| 第1行,第3列
| 第1列,第4列
|- 
| colspan="3" |第2列第1-3行
| 第2列第4列
|}
<table border="1">
 <tr>
  <drowspan="2">第1列1-2行</ td>
  <d>第1列,第2列</ td>
  <d>第1行,第3列</ td>
  <d>第1行,第3列</ td>
 </ tr>
 <tr>
  <d>第2列,第2列</ td>
  <d>第2行,第3列</ td>
  <d>第2行,第3列</ td>
 </ tr>
</表>
第1列1-2行 第1列,第2列 第1行,第3列 第1列,第4列
第2列,第2列 第2行,第3列 第2列第4列
{| border="1"
|- 
| rowspan="2" |第1-2行,第1列
| 第1列,第2列
| 第1行,第3列
| 第1列,第4列
|- 
| 第2列,第2列
| 第2行,第3列
| 第2列第4列
|
<table border="1">
 <tr>
  <d>第1列,第1列</ td>
  <d>第1列,第2列</ td>
  <d>第1行,第3列</ td>
  <d>第1列,第4列</ td>
 </ tr>
 <tr>
  <drowspan="2" colspan="2">第2-3行,第1-2列</ td>
  <d>第2行,第3列</ td>
  <d>第2行,第3列</ td>
 </ tr>
 <tr>
  <d>第3列第3行</ td>
  <d>第3列第3行</ td>
 </ tr>
</表>
第1列,第1列 第1列,第2列 第1行,第3列 第1列,第4列
第2-3行,第1-2列 第2行,第3列 第2列第4列
第3列第3行 第3列第4列
{| border="1"
|- 
| 第1列,第1列
| 第1列,第2列
| 第1行,第3列
| 第1列,第4列
|- 
| rowspan="2" colspan="2" |第2-3行,第1-2列
| 第2行,第3列
| 第2列第4列
|- 
| 第3列第3行
| 第3列第4列
|
|}


可排序表

  • 可以选择在标头中包含一小段代码,以便对表内容进行排序。
  • 这只应由有经验的人员使用。
  • 可以使用数字,字母和+到++++的值。
可排序表
地区 强度
A 3
B 1
C 4
D 2

可折叠桌子

新代码,您可以判断表格是否有新代码,因为它将打开并具有“ EXPAND”

{| class="wikitable mw-collapsible mw-collapsed" 


作者评论 
这是您想说或显示的更多内容,但又不想立即显示出来。


关于这些可折叠桌子 
马克·希尔
是否曾经想过向读者提供其他信息,但又希望在线资料不被您的有用(但冗长的)解释所困扰?随之而来可折叠桌子。是的,所有这些重要的评论,链接,图片,电影或扩展的说明都可以隐藏,并等待读者单击“显示”。通过单击“隐藏”,同样可以再次快速折叠信息。一个非常有用的工具,别忘了给表起一个暗示其内容的名称。


关于开放式可折叠桌子 
只需从第一行中删除“ mw-collapsed”,并且在打开页面时,表格也将默认设置为打开。单击“隐藏”仍可以再次折叠信息。


典型表格模板

  • 下面显示的是本网站上使用的典型格式。
  • 我尝试使用细微的背景柔和阴影(蓝色)指示标题(深蓝色),然后以白色和浅蓝色交替显示行。
  • 完成显示为浅蓝色的表格最后一行的内容(如果不按顺序添加空白行,则该行将变为彩色)。


要使用此模板:

  1. 视图 此页面部分处于编辑模式。
  2. 复制 文字下方的表格。
  3. 页面上的模板。
  4. 最适合您数据的表格宽度(当前为600像素)和列宽度(当前为300像素)。
  5. 更换 模板中的文本,保留颜色代码(不在括号内)。

1列模板

标头部分 (using bgcolor="CEDFF2")
第一行(未指定颜色)
Second Row (using bgcolor="F5FAFF")
第三行(未指定颜色)
Fourth Row (using bgcolor="F5FAFF")


2列模板

标题栏1 (using bgcolor="CEDFF2") 标题栏2
第一行第1列(未指定颜色) 第一列2
Second Row Column 1 (using bgcolor="F5FAFF") 第二行第2列
第三行第1列(未指定颜色) 第三行第2列
Fourth Row Column 1 (using bgcolor="F5FAFF") 第四行第2列

3栏模板

标题栏1 (using bgcolor="CEDFF2") 标题栏2 标题栏3
第一行第1列(未指定颜色) 第一列2 第一排第3列
Second Row Column 1 (using bgcolor="F5FAFF") 第二行第2列 第二行第3列
第三行第1列(未指定颜色) 第三行第2列 第三行第3列
Fourth Row Column 1 (using bgcolor="F5FAFF") 第四行第2列 第四行第3列

其他背景色

文本 “ FAF5FF”
深绿色 “ A3BFB1”
浅绿色 “ F5FFFA”
浅灰色 “ FCFCFC”
浅灰色 “ FCFCFC”
浅蓝 “ F5FAFF”
深蓝 “ CEDFF2”
深紫色 “ DDCEF2”
浅紫色 “ FAF5FF”


词汇表链接

词汇表: A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | 号码 | 符号 | 术语链接



引用此页:马萨诸塞州希尔(2020年,10月23日)胚胎学 表教程. Retrieved from /embryology/index.php/Help:Table_Tutorial

这里有什么链接?
? Dr Mark Hill 2020, 新南威尔士州胚胎学 ISBN:978 0 7334 2609 4-UNSW CRICOS提供者代码00098G
网站地图