零基础教你学前端——19、基础表格结构

陆荣涛 -
零基础教你学前端——19、基础表格结构

这节课,学习在网页中展示结构化数据的重要方式: 表格。

表格,在我们生活中随处可见,比如“王者荣耀赛事数据平台的全部英雄数据”, “”千锋教育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  在浏览器中打开页面, 一个基础的表格就制作好了, 现在这张表格的样子与你的期望还差很多,比如, 没有表格线 ,表头也没有突出显示等等 , 后面我们会继续的完善它。

图片

文章配套视频链接

特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

前端html5

扩展阅读

加个好友,技术交流

1628738909466805.jpg