挑战2

实验4 HTML表格一、简介 1、内容：创建表格、完善表格、div设置。 2、知识点：HTML表格概述、表格基础、高级表格特性和可访问性。二、知识点 1、创建表格 1.1）定义：表格就是很多小单元格，而这些小单元格有次序地排列；组成：标签、标签和

标签；用途：常用来绘制表格--如课程表、值日表、成绩表等；包含：文本、图片、列表、段落、表单、水平线、表格等。 1.2）基本标签：用于HTML文档创建表格，包含表名和表格本身内容代码；：定义每行；

：定义每列。例：

第一行第一列	第一行第二列
第二行第一列	第二行第二列

显示效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20190517-1558073564464) 添加border属性：

第一行第一列	第一行第二列
第二行第一列	第二行第二列

2、完善表格 2.1）caption元素定义表格标题

表格标题
第一行第一列	第一行第二列
第二行第一列	第二行第二列

2.2）添加表头

支出表
支出	备注
32	买苹果
24	买饮料

2.3）单元格跨行和跨列：colspan-合并行和rowspan-合并列。

单元跨两行

姓名	电话
张三	344 22 112	211 32 123
李四	433 31 212	234 21 654

单元跨两列

姓名	张三
电话	344 22 112
电话	234 21 654

注：rowspan=“2”，合并该列上两个单元格。同样可通过colspan来合并行。 3、div设置语法设置：

div和table区别： div布局：

实验楼

table布局：

实验楼

![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587284931489) 比较：div布局比表格灵活，但需要不同场景使用不同布局方式。 table优点：1、理解简单； 2、不同浏览器看到效果相同。缺点：1、显示样式和数据绑定在一起； 2、布局时候灵活度不高； 3、页面可能有大量table元素，代码冗余度高； 4、增加带宽； 5、搜索引擎不喜欢这样布局。 div布局优点：1、符合W3C标准； 2、搜索引擎更加友好； 3、样式调整更加方便，内容和样式分离，使页面和样式调整变得更加方便； 4、节省代宽，代码冗余度低； 5、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。三、小结本节主要学习了表格的创建、完善、div与table的比较。四、挑战2：课程表绘制目标： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587285408781) 源码（格式参考了答案）：挑战2

课程表
时间\日期		一	二	三	四	五
上午	9:30-10:15	语文	数学	外语	音乐	体育
上午	10:25-11:10	数学	数学	物理	化学	生物

下午	14:30-15:15	体育	语文	历史	政治	化学
下午	15:25-16:10	音乐	语文	数学	美术	语文

“HTML5 基础教程”实验报告