第七章 TABLE表格.docVIP

第七章 TABLE表格 表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格 7-1 定义表格的基本语法 在html文档中，表格是通过table,th,tr,td标签来完成的，如下表所示： 表格标记 标 签 描 述 table.../table 用于定义一个表格开始和结束 th.../th 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，th标签必须放在tr标签内 tr.../tr 定义一行标签，一组行标签内可以建立多组由td或th标签所定义的单元格 td.../td 定义单元格标签，一组td标签将将建立一个单元格，td标签必须放在tr标签内 在一个最基本的表格中，必须包含一组table标签，一组标签tr和一组td标签或th。 实例：7-1.html HEADTITLE一个简单的表格/TITLE/HEADBODYcentertabletr td第1行中的第1列/td td第1行中的第2列/td td第1行中的第3列/td /trtr td第2行中的第1列/td td第2行中的第2列/td td第2行中的第3列/td /tr /table/center/BODY/HTML 7-2（1)表格table标签的属性 表格标签table有很多属性，最常用的属性有： table标签的属性 属 性 描 述 width 表格的宽度 height 表格的高度 align 表格在页面的水平摆放位置 background 表格的背景图片 bgcolor 表格的背景颜色 border 表格边框的宽度（以像素为单位） bordercolor 表格边框颜色 bordercolorlight 表格边框明亮部分的颜色 bordercolordark 表格边框昏暗部分的颜色 cellspacing 单元格之间的间距 cellpadding 单元格内容与单元格边界之间的空白距离的大小 实例：7-2-1.html htmlheadtitle无标题文档/title/headbodytable border=10 bordercolor=#006803 align=center bgcolor=#DDFFDD width=500 height=200bordercolorlight=#FFFFCC bordercolordark=#660000 background=../../imge/b0024.gif cellspacing=2 cellpadding=8 tr td第1行中的第1列/td td第1行中的第2列/td td第1行中的第3列/td /tr tr td第2行中的第1列/td td第2行中的第2列/td td第2行中的第3列/td /tr /table/body/html 7-2（2） 表格的边框显示状态 frame 表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态 语法格式：table frame=边框显示值 表格边框显示状态frame的值的设定 frame的值 描 述 box 显示整个表格边框 void 不显示表格边框 hsides 只显示表格的上下边框 vsides 只显示表格的左右边框 Aove 只显示表格的上边框 below 只显示表格的下边框 lhs 只显示表格的左边框 rhs 只显示表格的右边框 实例：7-2-2.html HTMLHEADTITLE表格边框的显示状态/TITLE/HEADBODY TABLE border=6 bgcolor=#FFFFCC frame=hsides bordercolor=#9900FF width=400 height=160TRTH姓名/THTH性别/THTH年龄/THTH专业/TH/TRTRTD卡卡/TDTD男/TDTD50/TDTD计算机/TD/TR/TABLE/BODY/HTML 7-4（3） 设置分隔线的显示状态 rules 语法格式：table rules=值 分隔线的显示状态rules的值的设定 rules的值 描 述 all 显示所有分隔线 groups 只显示组与组的分隔线 rows 只显示行与行的分隔线 cols 只显示列与列的分隔线 none 所有分隔线都不显示 实例:7-2-3.html htmlheadtitle无标题文档/title/headbodyTABLE border=6 bgcolor=#FFFFCC