HTML表格制作公开课
- 格式:pptx
- 大小:1.81 MB
- 文档页数:14
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>课程表</title><style type="text/css">#a1{width:90px;height:35px;background-color:#66CCFF;float:left;padding:10px auto}#a2{width:90px;height:35px;background-color:#00CC66;float:left;padding:10px auto}#a3{width:120px;height:35px;background-color:#66CCFF;float:left;padding:10px auto} #a4{width:300px;height:35px;background-color:white;float:left;}.p1{font-size:15px;text-align:center}.p2{font-size:25px;font-family:黑体}body{marign-left:300}</style></head><body><center><p class="p2">2012-2013秋季学期课程表</p><div id="a4"> </div><div id="a3"><p class="p1">课程/时间</p></div><div id="a2"><p class="p1">周一</p></div><div id="a1"><p class="p1">周二</p></div><div id="a2"><p class="p1">周三</p></div><div id="a1"><p class="p1">周四</p></div><div id="a2"><p class="p1">周五</p></div><div id="a1"><p class="p1">周六</p></div><div id="a2"><p class="p1">周日</p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">支付与结算</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1">5、6、7</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">网页设计</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"></p></div><div id="a2"><p class="p1">9、10、11 </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">创业投资</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"></p></div><divid="a2"><p class="p1"> </p></div><div id="a1"><p class="p1">下3、4 </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">网络与通讯</p></div><div id="a2"><p class="p1">5、6、7 </p></div><div id="a1"><p class="p1"></p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">条码技术</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"></p></div><div id="a2"><p class="p1">3、4 </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">佛教艺术</p></div><div id="a2"><p class="p1">9、10 </p></div><div id="a1"><p class="p1"></p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">文物鉴赏</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1">9、10</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div><Br><br><div id="a4"> </div><div id="a3"><p class="p1">中美文化</p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"></p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1">9、10 </p></div><div id="a2"><p class="p1"> </p></div><div id="a1"><p class="p1"> </p></div><div id="a2"><p class="p1"> </p></div></center></body></html>。
HTML表格制作教学设计一、教学目标1.认知目标(1)了解表格中的基本概念及生活中表格的应用;(2)掌握用HTML语言创建表格的方法;(3)能熟练编写制作表格。
2.能力目标:(1)在利用HTML实际编写过程中,了解制作表格的方法,熟悉制作表格的过程。
(2)培养学生的动手能力、思维能力、研究能力、观察能力、和实践操作能力。
3.情感目标:(1)通过学生对表格的编写,激发学生对美的追求;通过成果展示培养学生们的自信心。
(2)通过拓展知识点,多种操作手段的讲解,培养学生的开放性思维及创新能力。
二、教学重点与难点(1)重点:表格制作的语法。
(2)难点:制作表格的方法。
三、教学准备1.计算机网络教室;2.PPT课件四、教学方法教法:1.直观演示法:采用教师直接演示,学生对比观察,得出结论的方法。
2.讲练结合法:教师用实例讲,学生完成实例操作,教师进行指导的形式布置课堂任务。
学法:以学生为中心,由简单到复杂,循序渐进,练习巩固。
五、教学过程(一)创设情境,引入课题老师:同学们,大家在什么地方看见过表格?同学们:课程表;老师:还有没有其他的地方看见过表格呢?同学们:成绩单老师:那这些表格是用什么制作出来的呢?同学们:Excel老师:今天我们用HTML语言来制作展示常见的HTML语言制作的表格,让学生知道表格在我们的生活中的广泛运用。
论坛,购物网站,门户网站……提问:使用表格和未使用表格布局有什么不一样呢?用表格布局:整洁未使用表格布局:杂乱无章总结:用表格布局这么做优点,今天我们就尝试用HTML制作表格。
学生回答同步进行ppt展示(二)进行新棵1.概念讲解要制作表格,首先需要了解表格的一些基本概念。
(介绍表头、单元格、行、列的概念)2.这是制作的表格语法,你能不能找出它们的规律来。
……学生回答教师指导,理解几个标记:<table>…</table><caption>..</caption><tr>..</tr><td>..</td><th>..</th>提问:表格的语法有什么规律没有呢?对学生回答归纳细化3、用ALIGN和VALIGN来设置表格标题的位置。
html表格制作教程HTML表格是一种非常常见的网页元素,用于展示和组织数据。
下面将为您提供一个500字的HTML表格制作教程。
HTML表格由三个主要部分组成:表格行(tr)、表头(th)和单元格(td)。
表头用于定义表格的标题,单元格用于展示数据。
以下是一个简单的HTML表格的示例:```html<table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></table>```在上面的示例中,`<table>`标签用于定义一个表格。
`<tr>`标签用于定义表格的行,`<th>`标签用于定义表格的表头,`<td>`标签用于定义表格的单元格。
要为表格添加样式,可以使用CSS样式表。
可以使用`style`属性来直接为表格和表格元素添加样式,或者为其创建一个单独的样式类。
例如:```html<style>table {width: 100%;border-collapse: collapse;}th, td {padding: 8px;border-bottom: 1px solid #ddd;}th {background-color: #f2f2f2;text-align: left;}</style><table><tr><th>姓名</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></table>```在上面的示例中,添加了一些基本的样式,如设置表格宽度为100%、合并边框、设置单元格的填充和边框样式、设置表头的背景颜色等。
课题第四章使用表格授课时间2013年10月11日授课类型新授课学时 1教学目标知识与技能学习表格的使用方法,达到在网页中能够正确的使用表格,使网页的整体布局实现美观、大方。
过程与方法任务下达→相关知识→任务完成→任务拓展→任务总结情感、态度与价值观通过表格的学习,让学生可以通过表格的灵活运用,达到解决实际问题的能力。
教学重点表格的制作过程教学难点根据需求创建样式多样的表格教学方法任务驱动教学法教具准备课件教学过程教学内容教师活动学生活动设计意图【知识导入】(2分钟)观看网页:【相关知识】4.1 创建表格4.1.1 创建表格的格式:<table><tr><td>单元格内容1</td><td>单元格内容2</td><td>单元格内容3</td></tr><tr><td>单元格内容4</td><td>单元格内容5</td><td>单元格内容6</td></tr>……</table>说明:表格由行、列和单元格3部分组成,一般通过3个标记来创建,分别是表格标记table、行标记tr 和单元格标记td。
使用<table>表示要创建表格,使用<tr>标记表示创建行,使用<td>标记表示创建行中的单元格。
案例1:读取代码,进行代码,观察结果(5分钟)<html><head><title>使用表格</title></head> 演示网页介绍表格的创建方法引导学生读代码,分析代码观看网页学习表格的创建独立思考,读程序,写结果学生读代码,分析代码,预想表格的显示效果通过演示网页,导入本节内容,并让学生明确,表格在网页中的作用通过代码的分析,让学生对于创建简哈一职公开课教案信息技术专业部孙昕。