TP02列表、表格、框架.ppt

被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 * 讲解要点： 表格就是将页面中的内容按照指定的格式罗列显示出来，目的是让页面美观，内容整齐 讲解要点： 讲解要点： 讲解要点： 讲解要点： 讲解要点： * 因此，在页面局部布局中，形成了4种常用的块状结构： （1）div-ul(ol)-li：常用于分类导航或菜单等场合； （2）div-dl-dt-dd：常用于图文混编场合； （3）table-tr-td：常用于图文布局或显示数据的场合； （4）form-table-tr-td：常用于布局表单的场合； 2.学会按上面4种块结构来组织和规划页面的结构，是盒模型实现的关键，后续将进行详细讲解和深入学习。 表格的基本语法 TABLE border=1 TR TD 单元格内容 /TD …… /TR …… /TABLE TABLE.../ TABLE 定义表格 TD…/TD 定义列 TR…/TR 定义行 border用来设置表格边框尺寸大小 如何创建表格 TABLE border=2 TR TD移动/TD TD联通/TD TD铁通/TD /TR TR TDIBM /TD TD惠普/TD TD华硕/TD /TR /TABLE 查看源代码 什么是跨行跨列的表格 跨3列 跨3行 下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列? 跨多列的表格 TABLE border=2 TR TD colspan=3学生成绩表/TD /TR TR TD 英语/TD TD 数学/TD TD 语文/TD /TR TR TD95/TD TD98/TD TD89/TD /TR /TABLE COLSPAN=“n” 属性表示跨多少列？ 查看源代码 跨多行的表格 TABLE border=1 TR TD rowspan=“3” 早上菜谱 /TD TD 食物/TD TD 鸡蛋/TD /TR TR TD 饮料/TD TD 牛奶/TD /TR TR TD甜点/TD TD开心粉/TD /TR /TABLE rowspan =“n” 属性表示跨多少行？ 查看源代码 TABLE border=1 TR TD手机充值、IP卡 /TD TD colspan=2办公设备、文具/TD /TR TR TD rowspan=2各种卡的总汇/TD TD铅笔/TD TD彩笔/TD /TR TR TD打印/TD TD刻录/TD /TR /TABLE 如何创建跨行跨列的表格 查看源代码 小结1 编写如下图所示效果对应的html代码 第一行第一个格子跨了2行 此格子跨了3列 什么是表格的美化修饰 背景图片 背景色 表格的高度 表格的宽度 文字对 齐方式 根据理解,下面表格应该从哪些方面进行美化修饰？ 如何设置表格的尺寸和边框 TABLE width=“400” height=“200” border=“15” bordercolor=red TR TD colspan=4 品牌商城/TD /TR TR TD colspan=2 笔记本电脑/TD TD colspan=2 办公设备、文具、耗材/TD /TR TR TD 惠普/TD TD 华硕/TD TD 打印机/TD TD 刻录盘/TD /TR /TABLE width用来设置表格的宽度 height用来设置表格的高度 border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 查看源代码 如何设置背景 TABLE background=“images/type_back.jpg” width=“360 height=120 border=2 TR TD colspan=6nbsp;/TD /TR TR bgcolor=#EBEFFF TD colspan=3 笔记本电脑/TD TD colspan=“3” bgcolor=yellow 办公设备、文具、耗材/TD /TR …… /TABLE background属性用来设置表格的背景图片 bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种