这节课，学习在网页中展现结构化数据的重要形式： 表格。
表格，在咱们生存中随处可见，比方“王者光荣赛事数据平台的全副英雄数据”， “”千锋教育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 在浏览器中关上页面， 一个根底的表格就制作好了， 当初这张表格的样子与你的冀望还差很多，比方， 没有表格线 ，表头也没有突出显示等等 ， 前面咱们会持续的欠缺它。
文章配套视频链接