diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/learn/html/tables | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/learn/html/tables')
| -rw-r--r-- | files/zh-cn/learn/html/tables/advanced/index.html | 461 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/tables/basics/index.html | 497 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/tables/index.html | 44 | ||||
| -rw-r--r-- | files/zh-cn/learn/html/tables/structuring_planet_data/index.html | 72 |
4 files changed, 1074 insertions, 0 deletions
diff --git a/files/zh-cn/learn/html/tables/advanced/index.html b/files/zh-cn/learn/html/tables/advanced/index.html new file mode 100644 index 0000000000..66726e276e --- /dev/null +++ b/files/zh-cn/learn/html/tables/advanced/index.html @@ -0,0 +1,461 @@ +--- +title: HTML表格高级特性和可访问性 +slug: Learn/HTML/Tables/Advanced +tags: + - HTML + - scope + - table + - tbody + - tfoot + - thead + - 初学者 + - 可访问性 + - 学习 + - 标题 + - 高级 +translation_of: Learn/HTML/Tables/Advanced +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> + +<p class="summary">这个模块的第二篇文章中，我们来看一下 HTML 表格更高级的功能，比如像 表格的标题/摘要，以及将你表格中的各行分组成头部、正文、页脚部分，提高视力受损用户的可访问性。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习本章节的前提条件:</th> + <td>HTML 的基础知识 (see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>).</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>学习 HTML 表格进一步的功能，以及表格的无障碍访问性。</td> + </tr> + </tbody> +</table> + +<h2 id="使用_<caption>_为你的表格增加一个标题">使用 <caption> 为你的表格增加一个标题</h2> + +<p>你可以为你的表格增加一个标题，通过 {{htmlelement("caption")}} 元素，再把 {{htmlelement("caption")}} 元素放入 {{htmlelement("table")}} 元素中. 你应该把它放在<code><table></code> 标签的下面。</p> + +<pre class="brush: html"><table> + <caption>Dinosaurs in the Jurassic period</caption> + + ... +</table></pre> + +<p>从上面简单的例子可以推断，标题意味着包含对于表格内容的描述，这对那些希望可以快速浏览网页中的表格对他们是否有帮助的读者们来说，是非常好的功能。特别是盲人用户，不需要让屏幕阅读设备读出很多单元格的内容，来让用户了解这张表格讲的是什么，而是可以依靠标题的内容，来决定是否需要了解更详细的内容。</p> + +<p>标题就放在 <code><table></code> 标签的下面。</p> + +<div class="note"> +<p><strong>注意</strong>: 这个 {{htmlattrxref("summary","table")}} 属性也可以在<code><table></code> 元素中使用，用来提供一段描述，同样可以被屏幕阅读设备阅读。我们推荐使用 <code><caption></code> 元素来代替使用，因为 <code>summary</code> 被 HTML5 规范， {{glossary("deprecated")}} (废除了)，也不能被视力正常的用户阅读。 (它不会出现在页面上)</p> +</div> + +<h3 id="动手练习_添加一个标题">动手练习: 添加一个标题</h3> + +<p>我们来试试看吧，回顾一下我们在之前的文章中第一次遇到的例子。.</p> + +<ol> + <li>打开你的语言老师的学校时间表，就是 <a href="/en-US/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML Table Basics</a> 结尾中的例子，或者把 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> 文件复制下面.</li> + <li>为表格添加一个合适的标题。</li> + <li>保存你的代码，然后用浏览器打开，看看你的表格是什么样的。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>:你也可以在 GitHub 上找到我们的版本 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html">see it live also</a>).</p> +</div> + +<h2 id="添加_<thead>_<tfoot>_和_<tbody>_结构">添加 <thead>, <tfoot>, 和 <tbody> 结构</h2> + +<p>由于你的表格在结构上有点复杂，如果把它们定义得更加结构化，那会帮助我们更能了解结构。一个明确的方法是使用 {{htmlelement("thead")}}, {{htmlelement("tfoot")}},和 {{htmlelement("tbody")}}, 这些元素允许你把表格中的部分标记为表头、页脚、正文部分。</p> + +<p>这些元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让 CSS 应用到表格上。给你一些有趣的例子，在长表格的情况下，你可以在每个打印页面上使表格页眉和页脚重复，你也可以让表格的正文部分显示在一个单独的页面上，并通过上下滚动来获得内容。</p> + +<p>试着使用它们:</p> + +<ul> + <li> <code><thead></code> 需要嵌套在 table 元素中，放置在头部的位置，因为它通常代表第一行，第一行中往往都是每列的标题，但是不是每种情况都是这样的。如果你使用了 {{htmlelement("col")}}/{{htmlelement("colgroup")}} 元素，那么 <code><thead></code>元素就需要放在它们的下面。</li> + <li> <code><tfoot></code> 需要嵌套在 table 元素中，放置在底部 (页脚)的位置，一般是最后一行，往往是对前面所有行的总结，比如，你可以按照预想的方式将<code><tfoot></code>放在表格的底部，或者就放在 <code><thead></code> 的下面。(浏览器仍将它呈现在表格的底部)</li> + <li> <code><tbody></code> 需要嵌套在 table 元素中，放置在 <code><thead></code>的下面或者是 <code><tfoot></code> 的下面，这取决于你如何设计你的结构。(<code><tfoot></code>放在<code><thead></code>下面也可以生效.)</li> +</ul> + +<div class="note"> +<p><strong>注意</strong>: <code><tbody></code> 总是包含在每个表中，如果你没有在代码中指定它，那就是隐式的。可以来验证一下，打开一个你之前没有包含 <code><tbody></code> 的例子，然后在你的 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> 中观察你的代码，你会看到浏览器为你添加了这个标签。你也许会想问，为什么你应该在所有表中都需要这个元素，因为它可以让你更好地控制表格结构和样式。</p> +</div> + +<h3 id="动手练习_添加表格结构">动手练习: 添加表格结构</h3> + +<p>让我们动手使用这些新元素。</p> + +<ol> + <li>首先，把 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> 拷贝到你的本地环境。</li> + <li>尝试在浏览器中打开它，你会发现看起来不错，但是它可以被改善得更好。 "SUM" 行包含了已经使用的金额的总和，不过它出现在了错误的位置，以及代码中还遗失了一些细节。</li> + <li>将明显的标题行改为使用 <code><thead></code> 元素，"SUM" 行使用 <code><tfoot></code> 元素，剩余的内容使用 <code><tbody></code> 元素。</li> + <li>先保存，再刷新。你会看到，添加了 <code><tfoot></code> 元素后，导致 "SUM" 这行跑到了表格的底部。</li> + <li>接着, 添加一个 {{htmlattrxref("colspan","td")}} 属性，使 "SUM" 单元格占 4 个单元格的位置，所以实际数字是显示在 “Cost” 列的底部。</li> + <li>让我们为表格添加一些简单的额外属性，能够让你理解这些属性是如何帮助更好地让表格应用 CSS 的。在你的 HTML 文件的 head 标签部分，你会看到一个空的 {{htmlelement("style")}} 元素. 在 style 元素中添加下列 CSS 代码： + <pre class="brush: css">tbody { + font-size: 90%; + font-style: italic; +} + +tfoot { + font-weight: bold; +} +</pre> + </li> + <li>先保存，再刷新，然后观察一下结果。如果没有 <code><tbody></code> 和 <code><tfoot></code> 元素，你也许会写更加复杂的选择器来应用同样的样式。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 我们并不期望目前你可以理解所有 CSS 的内容。当你经过我们的 CSS 模块的时候，你应该会了解更多 (<a href="/zh_CN/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> 是一个好的起点；我们也有专门的文章 <a href="/zh_CN/docs/Learn/CSS/Styling_boxes/Styling_tables">styling tables</a>).</p> +</div> + +<p>你完成的表格应该如下所示：</p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My spending record</title> + <style> + + html { + font-family: sans-serif; + } + + table { + border-collapse: collapse; + border: 2px solid rgb(200,200,200); + letter-spacing: 1px; + font-size: 0.8rem; + } + + td, th { + border: 1px solid rgb(190,190,190); + padding: 10px 20px; + } + + th { + background-color: rgb(235,235,235); + } + + td { + text-align: center; + } + + tr:nth-child(even) td { + background-color: rgb(250,250,250); + } + + tr:nth-child(odd) td { + background-color: rgb(245,245,245); + } + + caption { + padding: 10px; + } + + tbody { + font-size: 90%; + font-style: italic; + } + + tfoot { + font-weight: bold; + } + </style> + </head> + <body> + <table> + <caption>How I chose to spend my money</caption> + <thead> + <tr> + <th>Purchase</th> + <th>Location</th> + <th>Date</th> + <th>Evaluation</th> + <th>Cost (€)</th> + </tr> + </thead> + <tfoot> + <tr> + <td colspan="4">SUM</td> + <td>118</td> + </tr> + </tfoot> + <tbody> + <tr> + <td>Haircut</td> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> + </tr> + <tr> + <td>Lasagna</td> + <td>Restaurant</td> + <td>12/09</td> + <td>Regrets</td> + <td>18</td> + </tr> + <tr> + <td>Shoes</td> + <td>Shoeshop</td> + <td>13/09</td> + <td>Big regrets</td> + <td>65</td> + </tr> + <tr> + <td>Toothpaste</td> + <td>Supermarket</td> + <td>13/09</td> + <td>Good</td> + <td>5</td> + </tr> + </tbody> + </table> + + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>注意</strong>: 你也可以在 GitHub 上找到 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">see it live also</a>).</p> +</div> + +<h2 id="嵌套表格">嵌套表格</h2> + +<p>在一个表格中嵌套另外一个表格是可能的，只要你包含完整的结构，包括 <code><table></code> 元素。这样通常是不建议的，因为这种做法会使标记看上去很难理解，对使用屏幕阅读的用户来说，可访问性也降低了。以及在很多情况下，也许你只需要插入额外的 单元格/行/列 到已有的表格中。然而有时候是必要的，比如你想要从其他资源中更简单地导入内容。</p> + +<p>下面的代码演示了一个简单的嵌套表格:</p> + +<pre class="brush: html"><table id="table1"> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> +</table></pre> + +<p>输出看起来是这样的：</p> + +<table id="table1"> + <tbody> + <tr> + <th>title1</th> + <th>title2</th> + <th>title3</th> + </tr> + <tr> + <td id="nested"> + <table id="table2"> + <tbody> + <tr> + <td>cell1</td> + <td>cell2</td> + <td>cell3</td> + </tr> + </tbody> + </table> + </td> + <td>cell2</td> + <td>cell3</td> + </tr> + <tr> + <td>cell4</td> + <td>cell5</td> + <td>cell6</td> + </tr> + </tbody> +</table> + +<h2 id="对于视力受损的用户的表格">对于视力受损的用户的表格</h2> + +<p>让我们简要回顾一下如何使用数据表。一个表格可以是一个便利的工具，或者让我们快速访问数据，并允许我们查找不同的值。比如，你只需要稍微看一眼下列的表格，你就能得知 2016 年 8 月份在 Gent 出售了多少个 Rings (戒指)。为了理解信息，我们让数据与列标题或行标题之间建立视觉联系。</p> + +<table> + <caption>Items Sold August 2016</caption> + <tbody> + <tr> + <td></td> + <td></td> + <th colspan="3" scope="colgroup">Clothes</th> + <th colspan="2" scope="colgroup">Accessories</th> + </tr> + <tr> + <td></td> + <td></td> + <th scope="col">Trousers</th> + <th scope="col">Skirts</th> + <th scope="col">Dresses</th> + <th scope="col">Bracelets</th> + <th scope="col">Rings</th> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">Belgium</th> + <th scope="row">Antwerp</th> + <td>56</td> + <td>22</td> + <td>43</td> + <td>72</td> + <td>23</td> + </tr> + <tr> + <th scope="row">Gent</th> + <td>46</td> + <td>18</td> + <td>50</td> + <td>61</td> + <td>15</td> + </tr> + <tr> + <th scope="row">Brussels</th> + <td>51</td> + <td>27</td> + <td>38</td> + <td>69</td> + <td>28</td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">The Netherlands</th> + <th scope="row">Amsterdam</th> + <td>89</td> + <td>34</td> + <td>69</td> + <td>85</td> + <td>38</td> + </tr> + <tr> + <th scope="row">Utrecht</th> + <td>80</td> + <td>12</td> + <td>43</td> + <td>36</td> + <td>19</td> + </tr> + </tbody> +</table> + +<p>但假设你无法通过视觉关联这些数据呢? 那么你应该如何阅读上述的表格? 视力受损的用户经常使用一个屏幕阅读设备来为他们读出网页上的信息。对于盲人来说，阅读简单的文字没有什么问题，但是要理解一张表格的内容，这就有一些难度了。虽然，使用正确的标记，我们可以用程序化来代替视觉关联。</p> + +<div class="note"> +<p><strong>注意</strong>: 根据<a href="http://www.who.int/zh/news-room/fact-sheets/detail/blindness-and-visual-impairment" title="视力损害和盲症">世界卫生组织 2017 年的数据</a>，大约有 2.53 亿人患有视觉障碍。</p> +</div> + +<p>本篇文章提供了更一步的技术来使表格的可访问性尽可能地提高。</p> + +<h3 class="attTitle" id="使用列和行的标题">使用列和行的标题</h3> + +<p>屏幕阅读设备会识别所有的标题，然后在它们和它们所关联的单元格之间产生编程关联。列和行标题的组合将标识和解释每个单元格中的数据，以便屏幕阅读器用户可以类似于视力正常的用户的操作来理解表格。</p> + +<p>我们之前的文章就提到过这一点，可见 <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Adding headers with <th> elements</a>.</p> + +<h3 class="attTitle" id="scope_属性">scope 属性</h3> + +<p>本篇文章的一个新话题是 {{htmlattrxref("scope","th")}} 属性，可以添加在<code><th></code> 元素中，用来帮助屏幕阅读设备更好地理解那些标题单元格，这个标题单元格到底是列标题呢，还是行标题。比如： 回顾我们之前的支出记录示例，你可以明确地将列标题这样定义：</p> + +<pre class="brush: html"><thead> + <tr> + <th scope="col">Purchase</th> + <th scope="col">Location</th> + <th scope="col">Date</th> + <th scope="col">Evaluation</th> + <th scope="col">Cost (€)</th> + </tr> +</thead></pre> + +<p>以及每一行都可以这样定义一个行标题 (如果我们已经使用了 th 和 td 元素):</p> + +<pre class="brush: html"><tr> + <th scope="row">Haircut</th> + <td>Hairdresser</td> + <td>12/09</td> + <td>Great idea</td> + <td>30</td> +</tr></pre> + +<p>屏幕阅读设备会识别这种结构化的标记，并一次读出整列或整行，比如：</p> + +<p><code>scope</code> 还有两个可选的值 ： <code>colgroup</code> 和 <code>rowgroup</code>。这些用于位于多个列或行的顶部的标题。 如果你回顾这部分文章开始部分的 "Items Sold August 2016" 表格。你会看到 "Clothes" 单元格在"Trousers", "Skirts", 和 "Dresses" 单元格的上面。这几个单元格都应该被标记为 (<code><th></code>)，但是 "Clothes" 是一个位于顶部且定义了其他三个子标题的标题。 因此 "Clothes" 应该有一个 <code>scope="colgroup"</code>属性，而另外三个子标题应该有 <code>scope="col"</code>属性。</p> + +<h3 class="attTitle" id="id_和标题属性">id 和标题属性</h3> + +<p>如果要替代 <code>scope</code> 属性，可以使用 {{htmlattrxref("id")}} 和 {{htmlattrxref("headers", "td")}} 属性来创造标题与单元格之间的联系。使用方法如下:</p> + +<ol> + <li>为每个<code><th></code> 元素添加一个唯一的 <code>id</code> 。</li> + <li>为每个 <code><td></code> 元素添加一个 <code>headers</code> 属性。每个单元格的<code>headers</code> 属性需要包含它从属于的所有标题的id，之间用空格分隔开。</li> +</ol> + +<p>这会给你的HTML表格中每个单元格的位置一个明确的定义。像一个电子表格一样，通过 headers 属性来定义属于哪些行或列。为了让它工作良好，表格同时需要列和行标题。</p> + +<p>回到我们的花费成本示例，前两个片段可以重写为：</p> + +<pre class="brush: html"><thead> + <tr> + <th id="purchase">Purchase</th> + <th id="location">Location</th> + <th id="date">Date</th> + <th id="evaluation">Evaluation</th> + <th id="cost">Cost (€)</th> + </tr> +</thead> +<tbody> +<tr> + <th id="haircut">Haircut</th> + <td headers="location haircut">Hairdresser</td> + <td headers="date haircut">12/09</td> + <td headers="evaluation haircut">Great idea</td> + <td headers="cost haircut">30</td> +</tr> + + ... + +</tbody></pre> + +<div class="note"> +<p><strong>注意</strong>: 这个放进为标题单元格和数据单元格之间创造了非常精确的联系。但是这个方法使用了大量的标记，所以容错率比较低。使用 <code>scope</code> 的方法对于大多数表格来说，也够用了。</p> +</div> + +<h3 id="动手练习_使用_scope_和_headers">动手练习: 使用 scope 和 headers</h3> + +<ol> + <li>对于这个最后的练习，首先把 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a>,拷贝到你的本地环境。</li> + <li>现在尝试添加适当的 <code>scope</code> 属性来让表格变得更加恰当。</li> + <li>最后，尝试把未添加 <code>scope</code> 属性的源文件再复制一份。这次使用 <code>id</code> 和 <code>headers</code> 属性让表格变得更加恰当。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 你可以根据我们完成的例子检查你的工作，请看 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">also see this live</a>) 和 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">see this live too</a>).</p> +</div> + +<h2 id="总结">总结</h2> + +<p>关于 HTML 表格你还可以学习其他一些东西，但是我们目前已经把大部分你需要知道的内容都告诉你了。在此刻，如果你想学习关于 HTML 表格的样式，可以阅读 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling Tables</a>.</p> + +<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div> diff --git a/files/zh-cn/learn/html/tables/basics/index.html b/files/zh-cn/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..1198158b86 --- /dev/null +++ b/files/zh-cn/learn/html/tables/basics/index.html @@ -0,0 +1,497 @@ +--- +title: HTML 表格 入门 +slug: Learn/HTML/Tables/Basics +tags: + - colgroup + - colspan + - row + - rowspan + - 初学者 + - 单元格 + - 基础 + - 学习 + - 表格 +translation_of: Learn/HTML/Tables/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">本文将从HTML表格开始，介绍一些基本的内容，如行和单元格、标题、使单元格跨越多个列和行，以及如何将列中的所有单元组合在一起进行样式化。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前置知识:</th> + <td>HTML基本概念 (参见 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>)。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解熟悉HTML表格基本知识。</td> + </tr> + </tbody> +</table> + +<h2 id="什么是表格？">什么是表格？</h2> + +<p>表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表 。</p> + +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>表格在人类社会中很常见，而且已经存在很长时间了，下面这张1800年的美国人口普查文件中就可以证明：</p> + +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>因此，HTML的创建者们提供了一种方法来构建和呈现web上的表格数据，这也就不足为奇了。</p> + +<h3 id="表格如何工作？">表格如何工作？</h3> + +<p>表格的一个特点就是严格. 通过在行和列的标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来。观察下面的示例表格，然后找一个单数人称代词，这个单数人称代词是用于第三人称的, 用于女性的, 用作句子中的对象. 你可以把相应的行和列的标题关联起来，找到答案。</p> + +<p>人称代词</p> + +<table> + <tbody> + <tr> + <th colspan="3"></th> + <th scope="col">Subject</th> + <th scope="col">Object</th> + </tr> + <tr> + <th rowspan="5" scope="rowgroup">单数</th> + <th colspan="2" scope="row">第一人称</th> + <td>I</td> + <td>me</td> + </tr> + <tr> + <th colspan="2" scope="row">第二人称</th> + <td>you</td> + <td>you</td> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">第三人称</th> + <th class="symbol" scope="row">♂</th> + <td>he</td> + <td>him</td> + </tr> + <tr> + <th class="symbol" scope="row">♀</th> + <td>she</td> + <td>her</td> + </tr> + <tr> + <th class="symbol" scope="row">o</th> + <td>it</td> + <td>it</td> + </tr> + <tr> + <th rowspan="3" scope="rowgroup">复数</th> + <th colspan="2" scope="row">第一人称</th> + <td>we</td> + <td>us</td> + </tr> + <tr> + <th colspan="2" scope="row">第二人称</th> + <td>you</td> + <td>you</td> + </tr> + <tr> + <th colspan="2" scope="row">第三人称</th> + <td>they</td> + <td>them</td> + </tr> + </tbody> +</table> + +<p>正确完成后, 即使是盲人也可以解析 HTML 表格中的数据，一个成功的 HTML 表格应该做到无论用户是视力正常还是视力受损，都能提高用户的体验。</p> + +<h3 id="表格风格">表格风格</h3> + +<p>你可以在 GitHub 上找到上面表格的 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html">HTML源码</a> ; 先去看看, 当然也可以看看这个 <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html">look at the live example</a>! 你也许会注意到一件事情，那就是这个表格看上去可读性不是很好，那是因为现在这个页面上面的那个表格通过 MDN 站点添加了一些样式, 而 GitHub 上面的并没有添加。</p> + +<p>不要幻想; 为了能够让表格在网页上有效, 你需要提供一些 CSS 的样式信息，以及尽可能好的 HTML 固定结构. 在这个模块中，我们将专注于 HTML 部分; 在你完成这里的内容之后，你可以浏览 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a> 来了解 CSS 的部分。</p> + +<p>虽然在这个模块中我们不会专注于 CSS, 但是我们提供了一个较小的 CSS 样式表让你使用，和默认的没有采用任何 CSS 样式的表相比，表格会更加可读。 你可以在 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">stylesheet here</a> 获取样式表，以及在 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML template</a> 获取 HTML 文件来应用样式表，这些会让你在 “测试 HTML 表格” 中有一个好的起点。</p> + +<div class="note"> +<p><strong>注意</strong>: 也可以看下 <a href="http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">personal_pronouns table with this styling applied</a> 这个版本, 这个是应用了 CSS 以后表格看上去的样子。</p> +</div> + +<h3 id="什么时候你不应该使用_HTML_表格">什么时候你不应该使用 HTML 表格?</h3> + +<p>HTML 表格 应该用于表格数据 ，这正是 HTML 表格设计出来的用途. 不幸的是, 许多人习惯用 HTML 表格来实现网页布局， e.g. 一行包含 header, 一行包含几列内容, 一行包含 footer, etc. 你可以在我们的 <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Module</a> 中的 <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Page Layouts</a> 获得更多细节内容和一个示例。这种做法以前是很常见的，因为以前 CSS 在不同浏览器上的兼容性比较糟糕 ; 表格布局现在不太普遍，但您可能仍然会在网络的某些角落看到它们。</p> + +<p>简单来说, 使用表格布局而不使用 <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout techniques</a> 是很糟糕的. 主要的理由有以下几个:</p> + +<ol> + <li><strong>表格布局减少了视觉受损的用户的可访问性</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">屏幕阅读器</a>, 被盲人所使用, 解析存在于 HTML 页面上的标签，然后为用户读出其中的内容。因为对于布局来说，表格不是一个正确的工具， 使用的标记比使用 CSS 布局技术更复杂, 所以屏幕阅读器的输出会让他们的用户感到困惑。</li> + <li><strong>表格会产生很多标签</strong>: 正如刚才提到的, 表格布局通常会比正确的布局技术涉及更复杂的标签结构，这会导致代码变得更难于编写、维护、调试.</li> + <li><strong>表格不能自动响应</strong>: 当你使用正确的布局容器 (比如 {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, 或是 {{htmlelement("div")}}), 它们的默认宽度是父元素的 100%. 而表格的的默认大小是根据其内容而定的。因此，需要采取额外的措施来获取表格布局样式，以便有效地在各种设备上工作。</li> +</ol> + +<h2 id="动手练习_创建你的第一个表格">动手练习: 创建你的第一个表格</h2> + +<p>对于表格的理论知识，我们已经说了很多了，所以, 让我们来看一个使用的例子，并建立一个简单的表格.</p> + +<ol> + <li>首先, 将 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> 拷贝到你的本地环境上。</li> + <li>每一个表格的内容都包含在这两个标签中 : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. 在你的 HTML 的 {{htmlelement("body")}} 中添加这些内容。</li> + <li>在表格中，最小的内容容器是单元格, 是通过 <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> 元素创建的 ('td' 代表 'table data'). 把下面的内容添加到你的表格标签中: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>如果我们想要一行四个单元格，我们需要把这组标签拷贝三次，更新你表中的内容，让它看起来是这样的: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> +<td>I'm your second cell.</td> +<td>I'm your third cell.</td> +<td>I'm your fourth cell.</td></pre> + </li> +</ol> + +<p>你会看到, 单元格不会放置在彼此的下方, 而是自动与同一行上的其他单元格对齐. 每个 <code><td></code> 元素 创建一个单独单元格，它们共同组成了第一行。我们添加的每个单元格都使行的长度变长。</p> + +<p>如果想让这一行停止增加，并让单元格从第二行开始，我们需要使用 <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> 元素 ('tr' 代表 'table row'). 让我们现在来证实一下。</p> + +<ol> + <li>把你已经创建好的 4 个单元格放入 <code><tr></code> 标签, 就像: + + <pre class="brush: html notranslate"><tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> +</tr></pre> + </li> + <li>现在你已经实现了一行，可以继续增加至两行、三行。每一行都需要一个额外的 <code><tr></code> 元素来包装，每个单元格的内容都应该写在 <code><td></code>中。</li> +</ol> + +<p>这样会产生一个如下所示的表:</p> + +<table> + <tbody> + <tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> + </tr> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注意</strong>: 你也可以在 GitHub 中查看 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p> +</div> + +<h2 id="使用_<th>_元素添加标题">使用 <th> 元素添加标题</h2> + +<p>现在，让我们把注意力转向表格标题，表格中的标题是特殊的单元格，通常在行或列的开始处，定义行或列包含的数据类型 (举个例子, 看到本篇文章中第一个示例中的 "单数" 或者 "Object" ). 为了说明它们为什么这么有用, 来看下面这个例子，首先是源代码:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> +</table></pre> + +<p>这是表格实际呈现的效果:</p> + +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> + </tbody> +</table> + +<p>这里的问题是：虽然你可以弄清楚发生了什么，但是尽可能的交叉参考数据并不容易。如果列和行的标题以某种方式出现，那将会更好。</p> + +<h3 id="动手练习_表格标题">动手练习: 表格标题</h3> + +<p>让我们来改进这个表格.</p> + +<ol> + <li>首先, 把 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> 文件保存到你的本地环境，HTML 文件包含上文你看到的几种狗的数据。</li> + <li>为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用 <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> 元素 ('th' 代表 'table header'). 用法和 <code><td></code>是一样的，除了它表示为标题，不是普通的单元格以外。进入你的 HTML 文件, 将表格中应该是标题的 <code><td></code> 元素标记的内容，都改为用 <code><th></code> 元素标记。</li> + <li>保存你的 HTML 文件，然后在浏览器中加载，然后你应该会看到，现在的标题更像标题了。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 你可以在 GitHub 中找到完成的版本 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">see it live also</a>).</p> +</div> + +<h3 id="为什么标题是有用的">为什么标题是有用的?</h3> + +<p>我们已经给出了部分答案，当标题明显突出的时候，你可以更加简单地找到你想找的数据，设计上也会看起来更好。</p> + +<div class="note"> +<p><strong>注意</strong>: 即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示。</p> +</div> + +<p>表格标题也有额外的好处，随着 <code>scope</code> 属性 (我们将在下一篇文章中了解到)，这个属性允许你让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联。屏幕阅读设备能一次读出一列或一行的数据，这是非常有帮助的。</p> + +<h2 id="允许单元格跨越多行和列">允许单元格跨越多行和列</h2> + +<p>有时我们希望单元格跨越多行或多列。以下是一个简单的例子，显示了一些常见动物的名字。在某些情况下，我们要显示动物名称旁边的男性和女性的名字。有时候我们又不需要，那不需要的情况下，我们希望写着动物的名字的单元格的宽度可以是两个单元格的宽度 (因为写着名字的行会有两列，而没有写名字的行只有一列，行的宽度是不一样的)。</p> + +<p>一开始的标记写法是这样的:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Hen</td> + </tr> + <tr> + <td>Rooster</td> + </tr> +</table></pre> + +<p>但是输出的结果不是我们想要的:</p> + +<table> + <tbody> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Hen</td> + </tr> + <tr> + <td>Rooster</td> + </tr> + </tbody> +</table> + +<p>我们需要一个方法，让 "Animals", "Hippopotamus", 和 "Crocodile" 的单元格的宽度变为两个单元格， "Horse" 和 "Chicken" 的高度变为两行 (因为要拥有一个男性名字和女性名字，可以先看效果图)。幸好, 表格中的标题和单元格有 <code>colspan</code> 和 <code>rowspan</code> 属性，这两个属性可以帮助我们实现这些效果。这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。比如, <code>colspan="2"</code> 使一个单元格的宽度是两个单元格。</p> + +<p>让我们使用 <code>colspan</code> 和 <code>rowspan</code> 来改进现有的表格。</p> + +<ol> + <li>首先，把 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> 文件复制到你的本地环境，HTML 文件中包含了你刚才看到的动物示例的数据。</li> + <li>接着，使用 <code>colspan</code> 让 "Animals", "Hippopotamus", 和 "Crocodile" 占 2 个单元格的宽度。</li> + <li>最后，使用 <code>rowspan</code> 让 "Horse" 和 "Chicken" 占 2 个单元格的高度。</li> + <li>保存后，用浏览器打开你写的 HTML 文件，看看改进的地方。</li> +</ol> + +<div class="note"> +<p><strong>注意</strong>: 你也可以在 GitHub 上找到完成的版本 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">see it live also</a>).</p> +</div> + +<table id="tabular" style="background-color: white;"> +</table> + +<h2 id="为表格中的列提供共同的样式">为表格中的列提供共同的样式</h2> + +<p>在我们继续介绍之前，我们将介绍本文中的最后一个功能。HTML有一种方法可以定义整列数据的样式信息：就是 <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> 和 <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> 元素。 它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个 <code><td></code> 或 <code><th></code> 上定义样式，或者使用一个复杂的选择器，比如 {{cssxref(":nth-child()")}}。</p> + +<p>下面是一个简单的示例:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table></pre> + +<p>下面就是上述代码的结果:</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>这样不太理想，因为我们不得不在列中的每个单元格中重复那些样式信息 (在真实的项目中，我们或许会设置一个 <code>class</code> 包含那三个单元格 ，然后在一个单独的样式表中定义样式). 为了舍弃这种做法，我们可以只定义一次，在 <code><col></code> 元素中。<code><col></code> 元素被规定包含在 <code><colgroup></code> 容器中，而 <code><colgroup></code>就在 <code><table></code> 标签的下方。我们可以通过如下的做法来创建与上面相同的效果:</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>我们使用了两个 <code><col></code>来定义“列的样式”，每一个<code><col></code>都会制定每列的样式，对于第一列，我们没有采取任何样式，但是我们仍然需要添加一个空的 <code><col></code> 元素，如果不这样做，那么我们的样式就会应用到第一列上，这和我们预想的不一样。</p> + +<p>如果你想把这种样式信息应用到每一列，我们可以只使用一个 <code><col></code> 元素，不过需要包含 span 属性，像这样：</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p>就像 <code>colspan</code> 和 <code>rowspan</code>, <code>span</code> 需要一个无单位的数字值，用来制定你想要让这个样式应用到表格中多少列</p> + +<h3 id="动手练习_colgroup_and_col">动手练习: colgroup and col</h3> + +<p>又到了需要你自己独立完成的时间了。</p> + +<p>下面你可以看到一位语言老师的时间表。星期五，她有一个新的课程，全天教荷兰语，但是在星期二和星期四的几个时间点，她也教德语。她想把那些包含她教学的日子的列高亮显示。</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>通过下面这些步骤来重构这个表格。</p> + +<ol> + <li>首先，把 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> 文件复制到你的本地环境。这个 HTML 文件包含你在上文中看到的表格，不过是减去样式信息的。</li> + <li>在 table 的顶部添加一个 <code><colgroup></code> 元素，就放在 <code><table></code> 标签下面，<code><colgroup></code>可以添加 <code><col></code> 元素 (继续看下面剩余的步骤)。</li> + <li>第一列和第二列不需要应用样式。</li> + <li>为第三列添加一个背景颜色。<code>style</code> 属性是 <code>background-color:#97DB9A;</code></li> + <li>为第四列设置一个独立的宽度，<code>style</code> 属性是 <code>width: 42px;</code></li> + <li>为第五列添加一个背景颜色。<code>style</code> 属性是 <code>background-color: #97DB9A;</code></li> + <li>为第六列添加不同的背景颜色和边框，表示这是一个特殊的日子，表示她正在教一个新的课。 <code>style</code> 属性是 <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> + <li>最后两天是休息日，所以只需将它们设置为无背景颜色，但需要设置宽度；<code>style</code> 属性是 <code>width: 42px;</code></li> +</ol> + +<p>看看你是否能完成这个示例，如果你遇到了困难，或想要核对你完成的作品，你可以在 GitHub 上找到完成的版本 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">see it live also</a>)。</p> + +<h2 id="小结">小结</h2> + +<p>本章节仅仅包含了 HTML 表格的基础。在下一篇文章中，我们将介绍一些稍微更高级的表格功能，并开始考虑方便视力障碍的人士的访问</p> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<div></div> + +<h2 id="在本单元中">在本单元中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></li> +</ul> + +<div> +<article> +<ul> +</ul> +</article> +</div> diff --git a/files/zh-cn/learn/html/tables/index.html b/files/zh-cn/learn/html/tables/index.html new file mode 100644 index 0000000000..0bcc6695d7 --- /dev/null +++ b/files/zh-cn/learn/html/tables/index.html @@ -0,0 +1,44 @@ +--- +title: HTML 表格 +slug: Learn/HTML/Tables +tags: + - HTML + - Landing + - Module + - NeedsTranslation + - TopicStub + - 初学者 + - 指引 + - 文章 + - 表格 +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">在HTML中一个很普通的任务是构建表格数据，有大量的元素和属性是来满足这种需求的。只需要一点儿的CSS来设定风格，HTML让在web上显示表格数据变的很容易，例如你的学校的教学计划，你当地的游泳馆的时刻表， 或者是关于你最爱的恐龙或足球队的统计数据。这个模块会教给你所有你需要知道的关于用HTML构建表格数据的知识。</p> + +<h2 id="先决条件">先决条件</h2> + +<p>在你开始这一模块之前，你需要已经了解了HTML的基础知识——看<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: 如果你是在计算机/平板电脑等其他你无法创建文件的设备上的话，你可以尝试在在线代码编辑平台上运行代码例如 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="向导">向导</h2> + +<p>本模块包含以下的文章</p> + +<dl> + <dt><a href="/zh-CN/docs/Learn/HTML/Tables/Basics">HTML 表格基础</a></dt> + <dd>本文将帮助你学习如何使用 HTML 格式，包括如行、列、表头、跨列的行或跨行的列等基本特性，以及如何将多行进行分组进行样式化。</dd> + <dt><a href="/zh-CN/docs/Learn/HTML/Tables/Advanced">HTML 表格高级功能与可访问性</a></dt> + <dd>在本模块第二篇文章中，我们将了解一些 HTML 表格的高级功能 —— 比如表名称/表摘要，因为可访问性的原因，将表格内容划分为表头、主体以及脚部等章节。</dd> +</dl> + +<h2 id="练习">练习</h2> + +<dl> + <dt><a href="/zh-CN/docs/Learn/HTML/Tables/Structuring_planet_data">构造行星的数据结构</a></dt> + <dd>在表格的练习中，我们向你提供了一些在我们太阳系的行星的数据，不妨你把它构造成一个HTML的表格吧。</dd> +</dl> diff --git a/files/zh-cn/learn/html/tables/structuring_planet_data/index.html b/files/zh-cn/learn/html/tables/structuring_planet_data/index.html new file mode 100644 index 0000000000..30a2e40606 --- /dev/null +++ b/files/zh-cn/learn/html/tables/structuring_planet_data/index.html @@ -0,0 +1,72 @@ +--- +title: 作业：构建行星数据 +slug: Learn/HTML/Tables/Structuring_planet_data +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">在我们的表格评定中，我们为你提供有关太阳系中行星的一些数据，并让你将其结构化成HTML表。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">学习本章的前提条件:</th> + <td>在尝试这个评定之前，你应该已经把这个模块的所有文章都学习完成了。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>检测对 HTML 表格及相关功能的理解。</td> + </tr> + </tbody> +</table> + +<h2 id="起点">起点</h2> + +<p>要进行本测验，将 <a href="https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a> 和 <a href="https://github.com/roy-tian/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> 拷贝到本地。</p> + +<div class="note"> +<p><strong>注意</strong>: 另外， 你可以使用 <a class="external external-icon" href="https://jsbin.com/">JSBin</a> 或 <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> 来做你的测验。你可以把 HTML, CSS 和 JavaScript 粘贴到其中一个网上编辑器里。如果你使用的网上编辑器不支持 JavaScript/CSS 文件链接到 HTML 中使用，那么也可以使用 <code><script></code>/<code><style></code> 元素将它们直接写在你的 HTML 页面里。</p> +</div> + +<h2 id="项目概要">项目概要</h2> + +<p>你在学校工作; 目前，你的学生正在学习太阳系的行星，然后你想为他们提供一份简单的易于追踪的数据集合，来查找有关行星的数字和情况。一张 HTML 数据表将是理想的，你需要先获得可用的数据，然后把它变成一张表格，跟着下面的步骤。</p> + +<p>完成后的表格看上去应该是这样的:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p> + +<p>你也可以 <a class="external-icon" href="https://roy-tian.github.io/learning-area/html/tables/assessment-finished/planets-data.html">在线查看</a> (不要偷看源代码，不要作弊哦!)</p> + +<ul> +</ul> + +<h2 id="要完成的步骤">要完成的步骤</h2> + +<p>下面的步骤描述了：为了完成这个示例的表格，你所要做的事情 。所有你需要的数据都包含在<code>planets-data.txt</code> 文件中。如果你在获得这些数据时遇到了问题，也看看上面的实例，或者尝试绘制一个图。</p> + +<ol> + <li>打开在你本地环境中的 <code>blank-template.html</code>副本，提供一个外部容器来初始化表格，一个表格 header，一个表格 body。在这个例子中，你不需要表格 footer 。</li> + <li>为你的表格添加我们提供的标题。</li> + <li>在表格的 header 中添加一行，用来包括所有列的标题。</li> + <li>在表格的 body 部分创建所有内容行，记住要让所有是行标题的单元格语义化。</li> + <li>确保所有内容都插入了正确的单元格，在原始数据中，每行行星数据都显示在其相关行星的旁边。</li> + <li>添加一些属性，让行标题和列标题更加明确地与和它们有关的单元格进行关联，使用 rowgroups 让子标题和父标题也进行关联。</li> + <li>为包含所有行星标题的行标题的那一列数据，添加一个黑色边框</li> +</ol> + +<h2 id="要点和提示">要点和提示</h2> + +<ul> + <li>标题行的第一个单元格需要是空白的，然后宽度为 2 个单元格。</li> + <li>行的主标题 (e.g. <em>Jovian planets</em>) 以及放置在行星名称行左侧的标题 (e.g. <em>Saturn</em>) 整理出来有点麻烦， — 你需要确保每个单元格都有正确的高度和宽度。(即横跨正确的行数和列数)</li> + <li>将标题与其行/列相关联的一种方法比其他方法容易得多。</li> +</ul> + +<h2 id="评定">评定</h2> + +<p>如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行评改。 如果您是自学习的，那么您可以通过询问 <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, 或在 <a href="irc://irc.mozilla.org/mdn">#mdn</a>的IRC频道 <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> 中轻松获得标记指南. 首先尝试练习 - 作弊对你没有益处！</p> + +<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p> |