第六章网页表格讲述.ppt

第六章 网页表格 本章内容 6.1 表格概述 6.2 表格的标题与表头 6.3 表格的行与单元格 6.4 页面实例——利用表格进行排版 6.1 表格概述 6.1.1 表格语法 6.1.2 表格属性 6.1.3 表格结构 6.1.4 表格嵌套 表格作用 表格是用于排列内容的最佳方式之一，之前绝大多数的HTML页面都是使用表格进行排版的。 HTML表格是由行和列构成的栅格。这些行和列构成一个个单元，在其中可以放置文本或图形。 表格有两个作用：第一，可以用可读的格式显示复杂的数控，传统上，表格化的信息比段落描述更有效；第二，可以用表格把复杂设计元素放进Web页面中。 表格标签 6.1.1 表格语法 语法解释 表格标签table…/table：table标签用于标识一个表格组件。一个表格组件，是由数个横行tr、单元格td所组成。 表格行标签tr…/tr：tr标签用于定义表格的一行。在一组tr标签内可建立一行表格，也可以包含数组由td标签所定义的单元格。 单元格标签td…/td：td标签用于定义表格的单元格，一组td标签将建立一个单元格。使用td标签时，必须将其放在tr标签内。 表头单元格标签 th…/th，定义表格内的表头单元格。 th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。 6.1.2 表格属性 一旦建立表格，就可以加入各种格式选项来改变其总体外观。通常 来说，可以对表格加入以下一些选项。 加入边框。 加入背景颜色和图形 调整单元格间隔和填充的程度。 调整单元格对齐方式。 调整单元格尺寸。 指定表格对齐方式。 １、边框 基本语法：table border= value 语法解释：边框是表格项目周围的直线，用于分开行、列和单元格。缺省情况下，大部分浏览器显示无边框表格，但有边框的表格更可读也更美观。通过border属性可以定义边框线的宽度，单位为像素。 2、边框颜色 基本语法：table bordercolor=color_value 语法解释：为表格设定不同的边框颜色。定义颜色的时候，可以使用英文颜色名称或十六进制颜色值。 3、亮边框颜色 基本语法：table bordercolorlight=color_value 语法解释：在表格中可以单独定义左上边框的颜色，这两个位置的边框色称之为亮边框颜色。定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。 4、暗边框颜色 基本语法：table bordercolordark=color_value 语法解释：在表格中也可以定义单元格中右下边框的颜色，这两个位置的边框色称之为暗边框颜色。定义颜色的时候，可以使用英文颜色名称或十六进制颜色值。 5、宽度和高度 基本语法：table width=value height=value 语法解释：通过width属性定义表格的宽度，height属性定义表格的高度，单位为像素或百分比。如果是百分比，则可分为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口而言；如果是嵌套表格，则百分比是相对于嵌套表格所在的单元格宽度。 6、背景颜色 基本语法： table bgcolor= color_value 语法解释：除了指定边框颜色外，还可以指定表格背景显示特定的颜色或图形。利用背景颜色和图形能改进表格外观，使表格显得更美观，如放置公司徽标和增加文本与图形颜色的对比度。通过bgcolor属性，可以设定表格的背景颜色。定义颜色的时候，可以使用英文颜色名称或十六进制颜色值表现。 7、背景图片 基本语法：table background= file_name 语法解释：为表格设置背景图像，可以使用任何的GIF或者JPEG格式图片文件。定义背景图像时，需要输入图片文件的完整路径或者相对路径。表格背景图形是平铺的，即在屏幕上不断重复，直到填满整个表格。 8、单元格间距 基本语法： table cellspacing= value 语法解释：表格的单元格之间，可以设定一定的间距，这样会使表格显得不过于紧凑。单元格的间距以像素为单位。 9、单元格边距 基本语法： table cellpadding= value 语法解释：设置单元格边距，指的是单元格内容和边框之间的距离。单元格的边距以像素为单位。 10、表格排列 基本语法： table align= value 语法解释：在水平方向上，可以设定表格的排列对齐方式，分别有居左、居中和居右3种。left为居左，center为居中，right为居右。 11、表格外边框的显示状态 基本语法： table frame= value 语法解释：使用frame