网站设计与建设11.ppt

网 站 设 计 与 建 设Website design and developments 表在页面结构中的作用 表与框架的比较 11．1 HTML表格的基本结构 table border=1 tr td学号/td td姓名/td td成绩/td /tr tr td001/td td李明/td td85/td /tr tr td002/td td王刚/td td91/td /tr tr td003/td td张玲/tdtd78/td /tr /table table、tr、td、th是表格中最常用的四个标记 表格大小 table width=x1 height=x2 属性值的x1和x2可以是绝对值也可以是相对值 table border=1 bgcolor=#008080 caption标记来为表格增加标题。 通常情况下，caption标记位于 table标记的后面。 tr、td、th可以对行与单元格的相关属性进行设置 tr bgcolor=#008080 不规则表格 11．2 HTML表格与页面布局 需要注意的问题 ①无边界网页结构 表格的border属性值设置为0，从而使得表格的边界消失，但设计时表格边框会显示成浅灰色边框。 ②尺寸的定义方式 一般来说作为布局手段的表格，通常采用相对比例的方式确定表格大小。 ③图片的插入 如果某个图片本身比较大，最好将其进行切分，在图片显示位置上放置多个单元格，然后将整个图片拼接在这些单元格中。这是因为， ④多表格页面布局 在使用表格进行网页布局时，最好不要把整个页面的内容都放在一个表格中，应该用多个表格来分段显示整个网页的内容。这也是因为浏览器要显示表格内容的时候，要把表格中的所有内容都下载后再统一显示。 思考题： 11.1 表格中常用的标记有哪些？它们的作用分别是什么？ 11.3 表格和框架的区别是什么？ 11.7 rowspan、colspan功能是什么？ * * 第11章 HTML表格与页面结构 第三部分 网站设计技术 网页结构的布局手段：表、框架 表格是网页的基石，可创建复杂有效页面结构 表格能够完全控制页面及其元素 表和框架都可以构造网页的布局结构 表可以很容易地为页面加书签或添加到收藏夹，框架组合页面则不可以。 表布局结构在垂直或水平滚动时，页面所有内容滚动；框架布局允许创建彼此独立的页面区域。 body table border=2 tr td rowspan=2Cell 1/td tdCell 2/td /tr tr tdCell 3/td /tr /table /body /html table border=2 tr td rowspan=5Cell 1/td td colspan=3 align=centerCell 2/div/td /tr tr td colspan=3 align=centerCell 3/div/td /tr tr tdCell 4/td tdCell 5/td tdCell 6/td /tr tr td colspan=3Cell 7/td /tr tr td colspan=3Cell 8/td /tr /table /body /html body table WIDTH=100% HEIGHT=100% CELLSPACING=0 CELLPADDING=2 BORDER=0 tr td rowspan=2 WIDTH=20% BGCOLOR=yellow ALIGN=center VALIGN=middleCell 1/td td HEIGHT=20% BGCOLOR=lightblue ALIGN=center VALIGN=middleCell 2/td /tr tr td HEIGHT=80% BGCOLOR=beige ALIGN=center VALIGN=middleCell 3/td /tr /table /body /html cellpadding，是补白，是指单元格内文字与边框的距离 cellspacing，两个单元格之间的距离 单元格1 单 元 格 2 单元格3 单元格4 单元格5 单元格6 * *