共计 982 个字符，预计需要花费 3 分钟才能阅读完成。
这节课，学习在网页中展现结构化数据的重要形式：表格。
表格，在咱们生存中随处可见，比方“王者光荣赛事数据平台的全副英雄数据”，“”千锋教育 HTML5 大前端待业榜、“前端工程师的工资条”等等。
那表格在网页中如何实现呢？在学习表格之前，要先理解表格的几个根底概念：表格、行、列、单元格。什么是表格呢？表格能够了解为一个矩阵，比方军训站军姿的队伍方阵。在这个队伍方阵中横排能够了解成表格的行，队伍方阵中的纵向为列。在这个队伍方阵中，每一个人都能够看做独立的一个小的单元格，这些的小的单元格形成了一个残缺的表格。网页中的表格如何定义呢？表格根底标签都遵循双标签的根本构造。最外层标签 table table 外面蕴含在这里 tr 是 table row 的缩写，释义为表格行 tr 外面蕴含 td 子标签 尖角号 td 尖角号 /td 在这里 td 是 table data cell 的缩写 释义为表格数据单元。
以上三对标签组成了表格的根本语法。须要留神的是 这三层标签肯定要嵌套正确 table 外面包裹 tr tr 外面包裹 td 不要在 table 和 tr 中包裹其余标签 比方 h1 标签 p 标签 b 标签等等 如果想要加强表现力 能够将这些标签增加到 td 标签里个别表格会蕴含多行多列 一个 tr 代表的是一行 一个 td 代表的是一个单元格 所以要实现多行多列 须要在 tr 里增加多个 td 在 table 里增加多个 tr 另外 一个一般的表格 每个 tr 里的 td 个数是相等的
理解了表格根底语法和根本构造，接下来带着大家一起做个案例。这是一个王者光荣英雄人物信息介绍表，可能看出这是一个四行五列的表格，应用 html 绘制这张表格，得须要用到一个 table 标签，4 个 tr 标签，每一个 tr 标签外面蕴含 5 个 td 标签。
咱们来实现一下。关上编辑器，新建一个 table_demo.html 页面，编写实现根底代码，在 body 外面编写 emmet 语句：table 大于号 tr 乘以 4 大于号 td 乘以 5 (table>tr4>td5) 按下 tab 主动补全代码，一个四行五列的表格构造就实现了，而后迅速的在每个 td 里，填充好单元格内容，保留。
alt + b 在浏览器中关上页面，一个根底的表格就制作好了，当初这张表格的样子与你的冀望还差很多，比方，没有表格线，表头也没有突出显示等等，前面咱们会持续的欠缺它。
文章配套视频链接