HTML07.ppt

主讲 梁光华 HTML网页制作 第7章使用表格显示数据 7 1创建表格 7 1 1表格基本构成表格由3个部分 table 表格标记 tr 行标记 td 列标记语法 定义表格 定义表行 定义表头 定义表元 表格的具体数据 举例 有边框 FoodDrinkSweetABC结果 举例 不带边框的表格 FoodDrinkSweetABC结果 7 1 2设置表格的标题caption语法 表格标题举例 表格标题FoodDrinkSweetABC 1 跨多列的表元语法 举例 MorningMenuFoodDrinkSweetABC 7 1 3跨多行 多列的表元 TableSpan 跨多列的表元 2 跨多行的表元语法 举例 MorningMenuFoodADrinkBSweetC 跨多行的表元 表格的色彩表元的背景色彩和背景图象语法 背景色彩 背景图象 rrggbb16进制RGB数码 或者是下列预定义色彩名称 Black Olive Teal Red Blue Maroon Navy Gray Lime Fuchsia White Green Purple Silver Yellow Aqua 举例 FoodDrinkSweetAB结果 3 表格边框的色彩语法 pre pre 举例 FoodDrinkSweetABC 7 2设置表格基本属性 1表格宽度width语法 说明 表格宽度值是像素或百分数2表格高度height语法 说明 表格高度值是像素或百分数 3表格对齐方式align语法 说明 表格对齐方式值 left center right7 3表格边框1表格边框宽度border语法 说明 边框宽度值的单位是象素 一般不超过5象素 2表格边框颜色语法 说明 十六进制数 3内边框宽度cellspacing语法 说明 内边框宽度值的单位是象素 4表格内文字与边框的距离cellpadding语法 说明 边框宽度值的单位是象素7 4表格背景7 4 1表格背景颜色语法 说明 表格底色 与background不要同用 举例 第一列第一栏第一列之第二栏及第三栏 第二列及第三列之第一栏第二列第二栏第二列第三栏第三列第二栏第三列第三栏 显示结果 举例 设表格列颜色第一列第一栏第一列第二栏第一列第三栏 第二列第一栏第二列第二栏第二列第三栏显示结果 TH 与同样是标示一个储存格 唯一不同的是所标示的储存格中的文字是以粗体出现 通常用于表格第一列以标示栏目 它的用法是取代的位置便可以 其参数设定请参考 当然若为所标示的储存格中的文字加上粗体标记便等如的效果 例子 Month ofIEvisitor ofNCvisitorAugust61 39 July54 46 June52 48 显示结果 的参数设定 常用 例如 width 400 表格宽度 接受绝对值 如80 及相对值 如80 border 1 表格边框厚度 不同浏览器有不同的内定值 故请指明 cellspacing 2 表格格线厚度 请看例子三 那是加厚到5的格线 cellpadding 2 文字与格线的距离 请看例子四 那是加至10的padding align CENTER 表格的摆放位置 水平 可选值为 left right center 请看例子五或六 那表格是放于中间的 为怕一些浏览器不支援 故特加上居中标记 只是多层保证而己 当然只用亦可 valign TOP 表格内字画等的摆放贴位置 垂直 可选值为 top middle bottom background myweb gif 表格纸 与bgcolor不要同用 bgcolor 0000FF 表格底色 与background不要同用 请看例子六 bordercolor FF00FF 表格边框颜色 NC与IE有不同的效果 请看例子六 bordercolorlight 00FF00 表格边框向光部分的颜色 请看例子二 只适用于IE bordercolordark 00FFFF 表格边框背光部分的颜色 请看例子二 使用bordercolorlight或bordercolordark时bordercolor将会失效 只适用于IE cols 2 表格栏位数目 只是让浏览器在下载表格是先画出整个表格而己 的参数设定 常用 例如 align RIGHT 该一列内字画等的摆放贴位置 水平 可选值为 left center right valign MIDDLE 该一列内字画等的摆放贴位置 垂直 可选值为 top middle bottom bgcolor 0000FF 该一列底色 请看例子五 bordercolor FF00FF 该一列边框颜色 请看例子三 只适用于IE bordercolorlight 808080 该一列边框向光部分的颜色 请看例子三 只适用于IE bordercolordark FF0000 该一列边框背光部分的颜色 请看例子三 使用bordercolorlight或bordercolordark时bordercolor将会失效 只适用于IE 的参数设定 常用 例如 tdwidth 48 height 400 colspan 5 rowspan 4 align RIGHT valign BOTTOM bgcolor FF00FF bordercolor 808080 bordercolorlight FF0000 bordercolordark 00FF00 background myweb gif width 48 该一储存格宽度 接受绝对值 如80 及相对值 如80 height 400 该一储存格高度 colspan 5 该一储存格向右打通的栏数 请看例子六 rowspan 4 该一储存格向下打通的列数 请看例子六HTML语言剖析 七 表格标记 align RIGHT 该一储存格内字画等的摆放贴位置 水平 可选值为 left center right valign BOTTOM 该一储存格内字画等的摆放贴位置 垂直 可选值为 top middle bottom bgcolor FF00FF 该一储存格底色 请看例子四 bordercolor 808080 该一储存格边框颜色 请看例子三 只适用于IE bordercolorlight FF0000 该一储存格边框向光部分的颜色 请看例子三 只适用于IE bordercolordar