搜索
表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.所以说要制作好网页,就要学好表格。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.htmlHTMLHEADTITLE一个简单的表格/TITLE/HEADBODYcentertabletrtd第1行中的第1列/tdtd第1行中的第2列/tdtd第1行中的第3列/td/trtrtd第2行中的第1列/tdtd第2行中的第2列/tdtd第2行中的第3列/td/tr/table/center/BODY/HTML7-2（1)表格table标签的属性表格标签table有很多属性，最常用的属性有：table标签的属性属性描述width表格的宽度height表格的高度align表格在页面的水平摆放位置background表格的背景图片bgcolor表格的背景颜色border表格边框的宽度（以像素为单位）bordercolor表格边框颜色bordercolorlight表格边框明亮部分的颜色bordercolordark表格边框昏暗部分的颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小实例：7-2-1.htmlhtmlheadtitle无标题文档/title/headbodytableborder=10bordercolor=#006803align=centerbgcolor=#DDFFDDwidth=500height=200bordercolorlight=#FFFFCCbordercolordark=#660000background=../../imge/b0024.gifcellspacing=2cellpadding=8trtd第1行中的第1列/tdtd第1行中的第2列/tdtd第1行中的第3列/td/trtrtd第2行中的第1列/tdtd第2行中的第2列/tdtd第2行中的第3列/td/tr/table/body/html7-2（2）表格的边框显示状态frame表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态语法格式：tableframe=边框显示值表格边框显示状态frame的值的设定frame的值描述box显示整个表格边框void不显示表格边框hsides只显示表格的上下边框vsides只显示表格的左右边框alove只显示表格的上边框below只显示表格的下边框lhs只显示表格的左边框rhs只显示表格的右边框实例：7-2-2.htmlHTMLHEADTITLE表格边框的显示状态/TITLE/HEADBODYTABLEborder=6bgcolor=#FFFFCCframe=hsidesbordercolor=#9900FFwidth=400height=160TRTH姓名/THTH性别/THTH年龄/THTH专业/TH/TRTRTD卡卡/TDTD男/TDTD50/TDTD计算机/TD/TR/TABLE/BODY/HTML7-4（3）设置分隔线的显示状态rules语法格式：tablerules=值分隔线的显示状态rules的值的设定rules的值描述all显示所有分隔线groups只显示组与组的分隔线rows只显示行与行的分隔线cols只显示列与列的分隔线none所有分隔线都不显示实例:7-2-3.htmlhtmlheadtitle无标题文档/title/headbodyTABLEborder=6bgcolor=#FFFFCCrules=colsbordercolor=#9900FFwidth=400height=160align=centerTRTH姓名/THTH性别/THTH年龄/THTH专业/TH/TRTRTD笨笨猫/TDTD女/TDTD99/TDTD计算机/TD/TR/TABLEpTABLEborder=6bgcolor=#FFFFCCrules=rowsbordercolor=#9900FFwidth=400height=160align=centerTRTH姓名/THTH性别/THTH年龄/THTH专业/TH/TRTRTD笨笨猫/TDTD女/TDTD99/TDTD计算机/TD/TR/TABLE/body/html7-3表格行的设定表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签tr，行标签用它的属性值来修饰，属性都是可选的。tr标签的属性属性描述align行内容的水平对齐valign行内容的垂直对齐bgcolor行的背景颜色bordercolo行的边框颜色bordercolorlight行的亮边框颜色bordercolordark行的暗边框颜色TR的参数设定（常用）：tralign=RIGHTvalign=MIDDLEbgcolor=#0000FFbordercolor=#FF00FFbordercolorlight=#808080bordercolordark=#FF0000实例：7-3.htmlHEADTITLE表格行的控制/TITLE/HEADBODYTABLEborder=1align=centerwidth=80%height=150TRALIGN=CENTERTH姓名/THTH性别/THTH年龄/THTH专业/TH/TRTRALIGN=CENTERbordercolor=#336600bgcolor=#C1FFC1TD咚咚/TDTD男/TDTD18/TDTD学生/TD/trtralign=centerheight=50bordercolor=navybgcolor=#86B8E1valign=bottombordercolorlight=#E1F0FDbordercolordark=#002346TD楠楠/TDTD女/TDTD17/TDTD学生/TD/TR/TABLE/BODY/HTML7-4单元格的设定th和td都是插入单元格的标签，这两个标签必须嵌套在tr标签内。是成对出现的。th用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签td就是该单元格中的具体数据内容,th和td标签的属性都是一样的，属性设定如下：th和td的属性属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（如80%）。colspan单元格向右打通的栏数rowspan单元格向下打通的列数align单元格内字画等的摆放贴，位置（水平），可选值为：left,center,right。valign单元格内字画等的摆放贴位置（垂直），可选值为：top,middle,bottom。bgcolor单元格的底色bordercolor单元格边框颜色bordercolorlight单元格边框向光部分的颜色bordercolordark单元格边框背光部分的颜色background单元格背景图片TD的参数设定格式：例如：tdwidth=48%height=400colspan=5rowspan=4align=RIGHTvalign=BOTTOMbgcolor=#FF00FFbordercolor=#808080bordercolorlight=#FF0000bordercolordark=#00FF00background=myweb.gif实例：7-4.htmlHTMLHEADTITLE单元格的设定/TITLE/HEADBODYTABLEborder=1align=centerheight=150width=80%TRTHwidth=70bgcolor=#FFCC00姓名/THTHbgcolor=#FFCCFF性别/THTHbackground=../../imge/b0024.gif年龄/THTHbackground=../../imge/aki-5.gif专业/TH/TRTRTDbordercolor=redalign=left笨笨猫/TDTDbordercolorlight=#FFCCFFbordercolordark=#FF0000align=center女/TDTDbgcolor=#FFFFCCvalign=bottomalign=center18/TDTDbgcolor=#CCFFFFalign=right学生/TD/TR/TABLE/BODY/HTML7-5设定跨多行多列单元格要创建跨多行、多列的单元格，只需在TH或TD中加入ROWSPAN或COLSPAN属性的属性值，默认值为1。表明了表格中要跨越的行或列的个数。跨多列的语法：thcolspan=#tdcolspan=#colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。跨多行的语法：throwspan=#tdrowspan=#rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。实例：7-5.htmlhtmlheadtitle跨多行跨多列的单元格/title/headbodycentertableborder=10width=80%align=centerheight=150background=../../imge/b0024.gifbordercolorlight=#9999FFbordercolordark=#9900CCTRALIGN=centerTHcolspan=3学生基本信息/THTHcolspan=2成绩/TH/TRTRALIGN=centerTH姓名/THTH性别/THTH专业/THTH课程/THTH分数/TH/TRTRALIGN=centerTD咚咚/TDTD男/TDTDrowspan=2计算机/TDTDrowspan=2程序设计/TDTD68/TD/TRTRALIGN=centerTD喃喃/TDTD女/TDTD89/TD/TR/table/b