# 实现一个美食营养表

# 前言

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

# 课程目标

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

# 任务预览

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

# 阅读学习

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

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

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

# 任务作业

目前,你正在学习营养师,需要收集许多食物的营养组成成分。这个时候,你就需要一张 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 另一个重要的元素:表单,掌握表单的创建和验证。