表格介绍及页面布局.docVIP

表格一、表格的基本功能：1、创建数据表格。2、进行网页布局。二、表格的基础知识介绍（1）构成表格的基本元素：、(一)、标签属性属性说明值值说明举例align规定表格相对周围元素的对齐方式。(不被赞成使用)Left/center/right表格居左、居中、居右border规定表格(外)边框的宽度。n (px)关闭表格框线，相当于值为0开启表格框线，相当于值为1px值为0时，效果同无border属性frame规定外侧边框的哪个部分是可见的。void框线为无above/below/lhs/rhs有上/下/左/右框线nsides/vsides有上和下（水平方向）/左和右（垂直方向）框线bordercolor设置表格线颜色，在表格背景色基础上使用高色和暗色获得三效果。边框颜色rgb(x,x,x)#xxxxxxcolorname10进制的RGB颜色值16进制的颜色值参见颜色名表bgcolor=”rgb(255,0,0)”bordercolorlight边框亮色bgcolor=”#ff0000”bordercolordark边框暗色bgcolor=”red”bgcolor规定表格背景颜色。(不被赞成使用)rgb(x,x,x)#xxxxxxcolorname略略background规定表格背景图片。URL注意引用的图片相对路径。background=”images/bg.jpg”width规定表格的宽度。n %n (px)当设置百分比时，表格的大小随浏览器窗口大小的变化而自动适应。width=70%width=700height规定表格的高度。同width同width。cellspacing控制表格中相邻单元格之间以及单元格和表格边框线之间的间距。n (px)当border开启时，默认为2px。cellpadding控制单元格的边框和它里面的内容之间的距离。n (px)默认为1px。Rules规定内侧边框的哪个部分是可见的。nonegroupsrowscolsallsummary规定表格的摘要。text注：HTML 与 XHTML 之间的差异：在 HTML 4.01 中，table 元素的 align 和 bgcolor 属性是不被赞成使用的。在 XHTML 1.0 Strict DTD，table 元素的 align 和 bgcolor 属性是不被支持的。标准属性: id, class, title, style, dir, lang, xml:lang事件属性: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup表格边框及单元格框线宽度计算：1、表格组成： 表格由外边框（border）和单元格组成。如右图：外边框线border单元格框线cellspacingcellpadding单元格四周边框线与其内的内容之间的距离2、表格的两种边框线： （1）外边框线 border：可能通过设置一个整数值来调整其线宽。 （2）单元格框线：是一个像素（pix）的线宽。3、框线区域占的宽度的计算：（1外框区域占的宽度 = border + 单元格框线（1px）+ cellspacing（2单线格框线区域占的宽度= 单元格框线（1px）+ cellspacing + 单元格框线（1px）几种情况：A、当无border属性或border=”0”，且无cellspacing时，浏览器为外框区域和所有单元格框线区留2px的宽度；B、当有border属性或border=”1”，且无cellspacing时，框线间增加2个像素（相当于cellspacing=”2”），即外框区域和所有单元格框线区的宽度为1+2+1=4px；4、当表格的宽度或高度被固定后，改变border或cellspacing或cellpadding时，表格宽度或高度不会改变，但单元格内的内容区域大小会改变。 当表格的宽度或高度没有被设定（即为自动）时，改变border或cellspacing或cellpadding时，表格宽度或高度会被改变，但单元格内的内容区域大小不会改变。（二）、行标签可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.属性值描述DTDalignrightleftcenterjustifychar定义表格行的内容对齐方式。STFvaligntopmiddlebottombaseline规定表格行中内容的垂直对齐方式。STFbgcolorrgb(x,x,x)#xxxxxxcolorname不赞成使用。请使用样式取而代之。规定表格行的背景颜色。TFcharcharacter规定根据哪个字符来进行文本对齐。STFcharoffnumber规定第一个对齐字符的偏移量。STFHTML 与 XHTML 之间的差异在 HTML 4.01 中，tr 元素的 bgcolor 是不被赞成使用的。在 XHTML 1.0 Strict DTD 中，tr 元素的 bgcolor 是不被支持的。标准属性和事件属性参见属性介绍。（三）、单元格标签或和的区别：1、th一般用来作为表格标题行，其中内容默认为加粗，对齐方式默认为居中。2、td一般用来作为表格的数据行，对齐方式默认为居左。可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.属性值描述DTDalignleftrightcenterjustifychar规定单元格内容的水平对齐方式。STFvaligntopmiddlebottombaseline规定单元格内容的垂直排列方式。STFbgcolorrgb(x,x,x)#xxxxxxColorname不赞成使用。请使用样式取而代之。规定单元格的背景颜色。TFbackgroundurl规定单元格的背景图片TFwidthpixels%不赞成使用。请使用样式取而代之。规定表格单元格的宽度。TFheightpixels%不赞成使用。请使用样式取而代之。规定表格单元格的高度。TFrowspannumber规定单元格可横跨的行数。STFcolspannumber规定单元格可横跨的列数。STFabbrtext规定单元格中内容的缩写版本。STFaxiscategory_name对单元进行分类。STFcharcharacter规定根据哪个字符来进行内容的对齐。STFcharoffnumber规定对齐字符的偏移量。STFheadersheader_cells_id规定与单元格相关的表头。STFnowrapnowrap不赞成使用。请使用样式取而代之。规定单元格中的内容是否折行。TFscopecolcolgrouprowrowgroup定义将表头数据与单元数据相关联的方法。STFHTML 与 XHTML 之间的差异：在 HTML 4.01 中，td 元素的 bgcolor、height、width 以及 nowrap 是不被赞成使用的。在 XHTML 1.0 Strict DTD 中，td 元素的 bgcolor、height、width 以及 nowrap 是不被支持的。标准属性和事件属性参见属性介绍。三、利用表格布局网页1、选择相对或固定宽度。表格的宽度设置可采用百分比或像素值，即相对宽度和绝对宽度。表格width采用的值产生的效果优点缺点相对宽度（%）表格的大小将根据浏览器窗口的大小而自动改变。表格会适应不同大小的浏览器窗口及屏幕分辨率。无法控制用户最终看到的结果。绝对宽度（px）表格的大小忽略浏览器窗口的大小而保持不变。可以固定页面界面而不随浏览器窗口及屏幕分辨率的改变而变动，很好控制用户看到的结果。不能自动适应浏览器窗口大小或分辨率的改变而改变。标题列1列2例1：制作如下表格，表格宽度分别设置为100%及760px。列1宽120px，第1行高80px，第2行高400px。并比较相对宽度和固定宽度在浏览器窗口大小不同及分辨率不同时的变化和不同。参考代码： 页面布局1 标题 列1 列2 2、跨列与跨行：用来制作不规定表格，定制网页的界面。 方法：根据构想画好的界面样图；先制作规则表格；然后利用标签中的跨列属性（colspan）或跨行属性（rowspan）制不规则表格。例2：制作如下表格。（“厂”字型布局）标题列1列2参考代码： 页面布局1 标题 列1 列2 练习：标题区列1内容区列3标题区列1内容列3版权标题区导航区列1内容区列3版权区标题区广告条区导航区列1内容区列3版权区（注：要求导航区设置高度为25px）3、删除额外的空间：（1）与表格宽度相关的几个因素，即中的几个属性：border、cellspacing和cellpadding。参见前面的示意图。例3：制作如图表格中的图片型导航区，要求图片间没有间隙：Pic1Pic2Pic3Pic4Pic5则首先要去除表格中单元格间之间的间距，因为不设置这三个属性，表格默认有间距，所以一般的做法是设置表格的以上三个属性值为”0”，即： (2)精确计算宽度4、表格居中：可以用的center属性和块标签来设置。由于center为不推荐使用的属性，所以建议使用中align=”center”来设置。即如下：5、表格的排列浏览器在显示表格前，必须阅读完表格的所有代码，且表格之外的文本将先显示