解锁即可观看《前端工程师2020》完整课程视频

前端工程师2020

前端入门如同写字,如果你不知道从哪开始,那就选择前端。(含Vue3.0正式版)

【第1周】HTML5基础语法与标签
【第2周】CSS3基础语法与盒模型
【第3周】CSS3浮动定位与背景样式
【第4周】CSS3动画与穷游首页开发实战
【第5周】JS基础语法与表达式
【第6周】JS流程控制语句与数组
【第7周】JS函数与DOM
【第8周】面向对象
【第9周】项目实战:仿穷游JS特效开发
【第10周】ES6基础入门
【第11周】ES6语法扩展
【第12周】ES6之Promise与Class类
【第13周】ES6之Module模块与Babel编译
【第14-15周】HTTP 协议、存储、Ajax
【第16周】项目实战:仿穷游组件化开发
【第17周】移动基础
【第18周】移动进阶之高效开发
【第19周】项目实战:仿穷游移动webapp开发
【第20周】小程序基础与慕课小程序实战
【第21周】React.js基础语法与新闻网站实战
【第22-23周】Sass基础与Vue.js基础语法
【第24周】项目实战:Vue.js仿京东到家电商全栈项目前端开发(上)
【第25-26周】项目实战:Vue.js仿京东到家电商全栈项目前端(下)
【第27周】全栈必备基础Node.js
【第28周】koa2中间件与MongoDB数据库
【第29-30周】项目实战:node.js仿京东到家电商全栈项目后端开发
【第31周】就业必备基础技术面试分析
【第32周】就业必备框架与全栈技术面试分析
章节
问答
课签
笔记
评论
占位
占位

听说你要制定学习计划了-使用table家庭为网页添加表格

有时候我们需要在网页当中添加一些数据,如某公司想展示该公司员工的通信录,如下表:

那我们就需要用到表格标签了, 这一章我们来学习表格标签,那么这些标签有什么特点呢?让我们一起来探索吧。想要在网页中实现以上效果,我们可以使用以下代码:

上面代码解释:

创建表格的四个元素:table、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

3、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

4、<th>…</th>:表格的头部的一个单元格,表格表头。

5、表格中列的个数,取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框,属性值为数字。

注意:

1、table标签用来定义整个表格,为双标签,必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。

4、tr标签用来设置表格的行,tr里面只能放th或者td标签,一组tr标签代表一行。

5、th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列,一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

 

任务

根据上面所学的知识,请从右边编辑器的第10行开始输入代码,实现以下效果

 

?不会了怎么办
 <table border="1">
        <caption>前端三剑客</caption>
        <tr>
            <th>知识点</th>
            <th>重要程度</th>
            <th>难度</th>
            <th>学习周期</th>
        </tr>
        <tr>
            <td>html</td>
            <td>5星</td>
            <td>3星</td>
            <td>7天</td>
        </tr>
        <tr>
            <td>css</td>
            <td>5星</td>
            <td>4星</td>
            <td>10天</td>
        </tr>
        <tr>
            <td>js</td>
            <td>5星</td>
            <td>5星</td>
            <td>20天</td>
        </tr>
    </table>
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?