实现一个美食营养表

前言

上一节我们初步学习了表格的入门知识，今天我们继续深入学习表格。如果您还没有学习表格的基础知识，建议您先学习表格基础 (opens new window),再开始今天的学习。

课程目标

我们希望你能够通过简单的实践，更加清楚地掌握表格更多高阶知识，比如像表格的标题/摘要，以及将你表格中的各行分组成头部、正文、页脚部分，能更加熟练的运用表格元素展示我们丰富的数据.

任务预览

今天我们的任务是运用表格元素制作一个美食营养表，这个表格内容比较复杂，那我们就开始吧

阅读学习

为了让我们的表格更加有可访问性，我们需要给表格增加更多的语义化特性,比如:

1. 用 <caption> 用来表示表格的标题，表格结构很复杂的时候
2. 使用 <thead> ,<tbody>,<tfoot> 是表格结构更加清晰明了.
3. 对于视觉有障碍的用户，为了理解信息，我们让数据与列标题或行标题之间建立视觉联系,您可以使用 scope 属性来明确这是行标题还是列表题。

学习下面的材料，掌握怎么让表格更具有语义化特性。

• HTML 表格高级特性和可访问性 (opens new window)
• Table in HTML (opens new window)
• 表格元素 (opens new window)

任务作业

目前，你正在学习营养师，需要收集许多食物的营养组成成分。这个时候，你就需要一张 HTML 数据表方便你自己查找，跟着下面的步骤完成这个食物营养表格。 你完成后的表格看上去应该是这样的:

• 任务步骤

  • 为了完成这个示例的表格，你需要先获取你需要的数据，这些数据都包含在foodData.txt (opens new window) 文件中。如果你在获得这些数据时遇到了问题，也看看上面的实例，自己添加一些数据。
  • 图片数据在 img (opens new window) 文件夹中,你如果需要也可以拷贝下来。
  • 打开你的本地环境，创建一个 table.html ，你需要用合适的语义化标签来结构化表格：一个表格 header，一个表格 body。在这个例子中，你不需要表格 footer 。
  • 为你的表格添加标题。
  • 在表格的 header 添加标题行，包含所有这个表格需要的列标题。
  • 在表格的 body 部分创建所有内容行，记住要让所有是行标题的单元格语义化。
  • 确保所有内容都插入了正确的单元格，在原始数据中，每行食物营养数据都显示在其相关食物的旁边。
  • 添加一些属性，让行标题和列标题更加明确地与和它们有关的单元格进行关联，使用 rowgroups 让子标题和父标题也进行关联。
  • 为包含所有美食标题的行标题的那一列数据，添加一个边框

• 要点和提示

  • 标题行的第一个单元格需要是空白的，然后宽度为 2 个单元格。
  • "FAT"标题下还有四个子标题
  • 注意跨行和跨列，确保横跨正确的行数和列数，需要你提前行和列算好再去设置属性，可能会容易一点

自测问题

下面的问题，需要您进行一个自我思考，然后进行自我回答来检验自己本次学习的理论知识掌握程度。

• scope 可以取的值有哪些，它有什么作用？
• <thead>，<tbody>，<tfoot>有什么含义？应该在哪里使用它们？
• 表格标题用什么元素表示？
• <th>， <thead> ，<tr>有什么区别？
• 表格跨两行，跨两列应该怎么表示？

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

• 日期，今天的学习总用时，今天学习的目标是什么，是否达成
• 哪些东西今天了解得比较透彻，说说自己的理解
• 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
• 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

  如果你有余力，不妨去 W3C 读一些英文文章 (opens new window)。或者阅读下面的材料，丰富一下自己的知识

预告

下一节我们将学习 HTML 另一个重要的元素:表单,掌握表单的创建和验证。