一、知识回顾
-
4.1 图片标签
-
4.2 列表
-
4.3超链接
二、单元内容
-
5.1 表格标签及属性(重点)
-
5.2 表格标签的属性(难点)
-
5.3 行标签的属性(重点)
-
5.4 单元格标签的属性(难点)
5.1 表格的三对标签
5.1.1 表格标签 <table></table>
行标签 <tr></tr>
单元格标签 <td></td>
表格，是指按所需的内容项目画成格子，分别填写内容，便于统计查看。
课堂互动:提出问题谈谈对表格的理解，主动回答问题的三个同学加分
5.1.2 行标签
表格分为2部分，一部分是行一部分是列，横着的就为行用<tr></tr>来表示
5.1.3 单元格标签
表格里边有一个一个的小格每个小格就叫单元格，单元格标签是<td></td>来表示
5.1.4 绘制一个完整的表格练习
以班级人数为例制作一个表格(比如9个人就写一个三行三列表格)
课堂互动:每组抽取一个同学来谈谈自己对表格结构的理解并且写出来，班级同学做评委评选出一个说的最好的，并且在聊天区齐刷666和鼓掌
代码:
<html>
<head></head>
<body>
<table>
<tr>
<td>安其拉</td>
<td>李白</td>
<td>貂蝉</td>
</tr>
<tr>
<td>鲁班</td>
<td>张良</td>
<td>孙尚香</td>
</tr>
<tr>
<td>李元芳</td>
<td>后裔</td>
<td>东皇太一</td>
</tr>
</table>
</body>
</html>
效果图:
为什么和我们想象中的表格不一样呢？思考一下
想象中的表格
那么我们接下来继续来完善我们的表格
5.2 表格标签的属性
5.2.1 表格标签的边框属性和表格大小属性
<table width="宽" height="高" border="边框"></table>
5.2.2 表格标签的间距属性和边距属性
<table cellspacing="单元格之间的距离" cellpadding="内容到边框的距离"></table>
5.2.3 表格边框的边框颜色属性和背景颜色属性
<table bordercolor="颜色" bgcolor="颜色"></table>
5.2.4 表格标签背景图片属性和设置表格水平对齐方式属性
大家手机都有壁纸,壁纸是不是就是一张图片啊，那大家想一想我们能不能给我们的表格加一个壁纸呢?那怎么来实现呢非常的简单就一个词就可以搞定
<table background="图片路径"></table>
那看我们刚刚写这个表格是不是靠在我屏幕的左边呢，大家看一看在左边是不是不是很好看，那我们能不能让他移动一下呢？让他到屏幕的中间呢？答案肯定是能得，需要用到我们的一个属性，水平对齐方式属性，大家想一下什么叫水平啊？是不是横着的我们叫水平啊？所以我们想要让他跑到中间我们就得用这个属性
<table align="left(左) center(中) right(右)"></table>
课堂互动:表格标签所有属性讲完之后，找几个同学来进行一个表格标签属性有什么（类似于动物园里有什么的小游戏，来帮助大家更深刻的记住这些属性）
5.2.5 绘制一个新表格将属性添加进去
大家都擅长打游戏对吧，游戏里有好多角色，那大家根据这个游戏人物制作一个表格，看谁的有创意，谁做的好看最完美
代码
<html>
<head></head>
<body>
<table border="1px" width="400px" height="400px" cellspacing="0" align="center" background="img\22.jpg">
<tr>
<td>英雄</td>
<td>定位</td>
<td>称号</td>
<td>配音</td>
</tr>
<tr>
<td>安其拉</td>
<td>法师</td>
<td>暗夜萝莉</td>
<td>詹佳</td>
</tr>
<tr>
<td>鲁班</td>
<td>射手</td>
<td>机关造物</td>
<td>刘垚</td>
</tr>
<tr>
<td>李元芳</td>
<td>射手</td>
<td>王都密探</td>
<td>罗玉婷</td>
</tr>
</table>
</body>
</html>
5.3 行标签属性
5.3.1 行标签的背景颜色属性
我们刚刚讲过表格的背景颜色属性那大家想一想彩虹大家都知道吧是不是一行一个颜色啊？我们可不可以把我们的表格做成彩虹表格呢？根据推理彩虹表格就是给表格的每一行加上不同的颜色，那写法就相当简单了
<tr bgcolor="颜色"></tr>
课堂互动:看看谁最先做出彩虹表格，屏幕共享给大家演示，聊天区齐刷666
5.3.2 行标签的水平对齐方式属性
大家看我们做的表格是不是有点不太完美，表格中的字位置不太好看，那大家想一想我们怎么能调一下呢？
还记得我们上边改变表格的位置吧，那是不是同样的道理现在我们是改变内容的位置
<tr align="left(左) center(中) right(右)"></tr>
5.3.3 行标签的垂直对齐方式属性
大家现在思考这样一个问题，说如果我们在教室上课的时候说要找班里某一个人，那我们一般会说安其拉在貂蝉的左上方，说李白在鲁班的右下方，那这个效果我们能用代码实现吗？大家想一想，左右我们可以实现是不是就差一个上下啊?左右是我们的水平对齐方式属性，那上下就是我们的垂直对齐方式属性，那用代码实现也非常简单
<tr valign="top(上) middle(中) bottom(下)"></tr>
课堂互动:因为表格标签属性和行标签属性有一部分是相同的大家容易混淆，所以当行标签讲完之后，带大家玩一个杀人游戏，可能有7个人手里是表格标签属性，一个人或2个人是行标签属性(区别于表格标签的)，自己来形容自己拿到的词，帮大家区分记忆
5.3.4 行标签的属性练习
代码思路:
- 先查好是几行几列表格将表格的大致模样写出来
- 将内容添加到表格中
- 设置每行的样式和文字样式
代码
<html>
<head></head>
<body>
<table border="1px" cellspacing="0">
<tr align="center">
<td bgcolor="gray"></td>
<td><font color="orange">小茹</font></td>
<td><font color="orange">wewe</font></td>
<td><font color="orange">蚊子</font></td>
<td><font color="orange">Maggie</font</td>
<td><font color="orange">文琪</font></td>
<td><font color="orange">木木</font></td>
<td><font color="orange">小许</font></td>
</tr>
<tr align="center">
<td bgcolor="gray"身高/体重</td>
<td>160/46kg</td>
<td>163/50kg</td>
<td>168/50kg</td>
<td>161/55kg</td>
<td>165/57.7kg</td>
<td>162/60kg</td>
<td>170/66kg</td>
</tr>
<tr align="center">
<td bgcolor="gray"肩宽/骨架</td>
<td>36cm/偏小</td>
<td>37/正常</td>
<td>37/正常</td>
<td>38/正常</td>
<td>38/正常</td>
<td>39/正常</td>
<td>41/大</td>
</tr>
<tr align="center">
<td bgcolor="gray"胸围</td>
<td>82cm</td>
<td>83cm</td>
<td>84cm</td>
<td>86cm</td>
<td>88cm</td>
<td>92cm</td>
<td>95cm</td>
</tr>
<tr align="center">
<td bgcolor="gray"腰围</td>
<td>68cm</td>
<td>70cm</td>
<td>66cm</td>
<td>71cm</td>
<td>74cm</td>
<td>80cm</td>
<td>86cm</td>
</tr>
<tr align="center">
<td bgcolor="gray"臀围</td>
<td>89cm</td>
<td>90cm</td>
<td>90cm</td>
<td>93cm</td>
<td>95cm</td>
<td>98cm</td>
<td>105cm</td>
</tr>
<tr align="center">
<td bgcolor="gray"平时上衣尺寸</td>
<td>s</td>
<td>s-m</td>
<td>m</td>
<td>m-L</td>
<td>L</td>
<td>L-XL</td>
<td>XL</td>
</tr>
<tr align="center">
<td bgcolor="gray"平时裤子尺寸</td>
<td>26</td>
<td>26/27</td>
<td>26-27</td>
<td>28</td>
<td>28</td>
<td>30</td>
<td>30/31</td>
</tr>
<tr align="center">
<td bgcolor="gray"平时裙子尺寸</td>
<td>s</td>
<td>m</td>
<td>m</td>
<td>L</td>
<td>L</td>
<td>XL</td>
<td>XL</td>
</tr>
<tr align="center">
<td bgcolor="gray"试穿尺码</td>
<td>XS-S</td>
<td>M</td>
<td>M</td>
<td>L</td>
<td>L</td>
<td>XL</td>
<td>XL</td>
</tr>
<tr bgcolor="gray" align="center">
<td>试穿感受</td>
<td>合适</td>
<td>合适</td>
<td>合适</td>
<td>合适</td>
<td>合适</td>
<td>合适</td>
<td>合适</td>
</tr>
</table>
</body>
</html>
5.4 单元格标签的属性
5.4.1 单元格大小属性
我们之前学过改变表格的大小，那大家现在思考这样一个问题我们可不可以改变一下表格中每个小格子的大小呢?
<td width="宽" height="高"></td>
5.4.2 背景颜色和背景图片属性
我们上边学过改变整个表格的背景颜色背景图片那，也学过改变行的背景颜色，那我们能不能做一个类似于打乱的魔方呢？每个小格子是不同的颜色
<td bgcolor="颜色" background="图片路径"></td>
5.4.3 插入图片与背景图片区别
大家看一下这个图片是不是里边由很多个小图片组成的，这个是在我们每个小格中插入图片他不是我们整个表格的背景图片，插入图片的代码和背景图片是不一样的
<td background="背景图片路径"><img src="插入图片路径"></td>
5.4.4 水平对齐方式属性和垂直对齐方式属性
我们在上边的学习中呢，我们知道可以改变一行内容的位置，那大家想一想可不可以单独的改变某一小格的内容的位置呢？
<td valign="top middle bottom" align="left center right"></td>
课堂互动:区分水平和垂直，以十字路口为例，随机抽取同学给大家画图解释，并且给相应的加分
5.4.5 合并单元格属性
接下来我们要讲表格中的最后一个知识点，也是相对于来说比较难得知识点就是单元格的合并，那么什么叫单元格的合并呢，顾名思义就是将二个或多个小格子合到一起变成一个格子
就是我们这样的效果,要想实现并不难，合并我们可以看出来分为二种一种是上下2个格子合并，一种是左右2个格子合并，那我们用代码实现一下吧
<td colspan="横向合并的个数" rowspan="纵向合并的个数"></td>
代码
<html>
<head></head>
<body>
<table border="1px" width="200px" height="200px" bgcolor="aqua">
<tr>
<td colspan="3">结果</td>
<td>击败 死亡 助攻</td>
<td>装备</td>
</tr>
<tr>
<td>个人主页</td>
<td><img src="img\1.jpg"></td>
<td>胜利</td>
<td>3/5/2</td>
<td><img src="img\2.jpg"></td>
</tr>
</table>
</body>
</html>
课堂互动:大家经常看直播，经常会有说某某大主播和谁谁谁合体啦，找同学来解释下合体，进而说出合并，帮助大家理解
5.4.6 表格案例练习
今天作业:京东首页练习
代码思路:
- 先写出表格的模型，查好是几行几列的表格
- 将内容图片添加到表格里
- 对表格的行还有单元格进行设置
- 对表格文字内容进行设置
代码
<!--表格-->
<table border="0" cellpadding="0">
<tr>
<td bgcolor="orange" align="center" height="50px">
全部分类
</td>
<td colspan="2"><font color="orange"><b>食品饮料</b></td>
</tr>
<tr>
<td>
<font color="lightgray">
<b>坚果炒货</b><br>
夏威夷果/松子/三只松鼠
</font>
</td>
<!--单元格合并-->
<td rowspan="6"><img src="img/banner.jpg" height="410px"></td>
<td rowspan="3"><img src="img/ri_img2.jpg" height="200px" width="200px"></td>
</tr>
<tr>
<td>
<font color="lightgray">
<b>休闲食品</b><br>
薯片/旺旺/好丽友
</font>
</td>
</tr>
<tr>
<td>
<font color="lightgray">
<b>饼干蛋糕</b><br>
饼干/这蛋糕/奥利奥
</font>
</td>
</tr>
<tr>
<td>
<font color="lightgray">
<b>肉类肉铺</b><br>
猪肉铺/牛肉/周黑鸭
</font>
</td>
<td rowspan="3"><img src="img/ri_img1.png" height="200px" width="200px"></td>
</tr>
<tr>
<td>
<font color="lightgray">
<b>蜜饯果干</b><br>
芒果干/红枣/枸杞
</font>
</td>
</tr>
<tr>
<td>
<font color="lightgray">
<b>糖果巧克力</b><br>
巧克力/糖果/德芙
</font>
</td>
</tr>
</table>
课堂互动:表格标签属性，行标签属性，单元格标签属性都学完之后，来一个类似萝卜蹲的游戏，每个人代表一个属性，(align到align到align到完valign到)，鼓励大家积极参与游戏，游戏结束后带大家总结，并对同学们进行鼓励，聊天区小礼物走一波
课后作业
代码
<html>
<head></head>
<body>
<table border="1px" width="600px" height="600px" cellspacing="0">
<tr align="center">
<td>姓名</td>
<td> </td>
<td>性别</td>
<td></td>
<td>民族</td>
<td></td>
</tr>
<tr align="center">
<td>政治面貌</td>
<td></td>
<td colspan="4">户籍</td>
</tr>
<tr align="center">
<td>出生年月</td>
<td></td>
<td>婚姻状况</td>
<td></td>
<td>工作时间</td>
<td></td>
</tr>
<tr align="center">
<td>技术职称</td>
<td></td>
<td>文化程度</td>
<td></td>
<td>主修专业</td>
<td></td>
</tr>
<tr align="center">
<td>毕业学校</td>
<td colspan="3">南京大学</td>
<td>毕业时间</td>
<td></td>
</tr>
<tr align="center">
<td>英语水平</td>
<td></td>
<td>计算机水平</td>
<td></td>
<td>薪金要求</td>
<td></td>
</tr>
<tr align="center">
<td rowspan="2">本<br/>人要求</td>
<td>现从事工作</td>
<td colspan="4"></td>
</tr>
<tr align="center">
<td >欲从事工作</td>
<td colspan="4"></td>
</tr>
<tr align="center">
<td rowspan="2">联系<br/>方式</td>
<td>联系电话</td>
<td colspan="2"></td>
<td></td>
<td>邮政编码</td>
</tr>
<tr align="center">
<td>通信地址</td>
<td colspan="4"></td>
</tr>
<tr align="center">
<td>工作<br/>简历</td>
<td colspan="5"></td>
</tr>
<tr align="center">
<td>自我<br/>评价</td>
<td colapan="5"></td>
</tr>
</table>
</body>
</html>
扫一扫
434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
