第六章 表格.docx

1、第六章 表格第六章 表格表格是网页制作中一种常用的页面布局工具。通过表格可以精确地控制网页各元素在网页中的位置，从而方便页面的排版和布局，所以，表格布局是网页排版的一种方式。1 表格简介表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。2 表格标记2.1 表格基本标记在HTML语法中，表格主要通过3个标签来构成：、。格式： 代表表格的开始，表示表格的结束 代表行的开始，代表行的结束。 .之间是单元格的内容，可以是文字，也可以是其它标记，如一个按钮等。标记必须放在标记内

2、在一个表格中，的个数代表表格的行数，每对之间的个数代表该行的单元格数。实例1.html，设计一个简单课程表格。定义表格 节 次 星期一 星期二 星期三 星期四 星期五 第12节 体育 大学英语 高等数学 电子商务网站运营 Web应用技术 第34节 大学英语 高等数学 电子商务案例 Web应用技术 电子商务安全 网页效果如图6-1所示。图6-1定义表格2.2 表格标题表格标题，就是对表格内容的简单说明，用标记实现。格式： 实例2.html。定义表格标题 课程表 节次 星期一 星期二 星期三 星期四 星期五 第12节 体育 大学英语 高等数学 数据结构实验 Web开发 第34节 大学英语 高等数学

3、 数据结构 数据结构 Web开发实验 网页效果如图6-2所示。图6-2设定表格标题2.3 表格表头表头，指表格的第一行，文字样式为居中、加粗显示，通过标签实现。格式： 实例3.html。定义表格 课程表 节 次 星期一 星期二 星期三 星期四 星期五 第12节 体育 大学英语 高等数学 电子商务网站运营 Web应用技术 第34节 大学英语 高等数学 电子商务案例 Web应用技术 电子商务安全 网页效果如图6-3所示。图6-3设定表格的表头2.4 设置划分结构的表格为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML语言规定了、3个标签分别对应于表格的表首、表主体和表尾。格式：

4、标记用于定义表格的表首样式，标记用于定义表格的主体的样式，标记用于定义表格的表尾的样式。 必须使用全部的元素，它们的出现次序是thead、tfoot、tbody，必须在table元素内使用这些标记。实例4.html，使用了上面的三个标记，将网页结构划分成了三个部分。定义表格结构 课程表 节 次 星期一 星期二 星期三 星期四 星期五 适用时间：20092010第二学期0901班 第12节 体育 大学英语 高等数学 电子商务网站运营 Web应用技术 第34节 大学英语 高等数学 电子商务案例 Web应用技术 电子商务安全 页脚中出现的标记，其中colspan属性表示合并6个单元格，这是为了和表头

5、标题保持一致。网页效果如图6-4所示。图6-4设定划分结构的表格3 表格属性表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。常见属性如表6-1所示。表6-1 表格标记的属性属性描述border设置边框粗细bordercolor设置边框颜色bordercolorlight设置亮边框颜色(左上边框颜色)bordercolordark设置暗边框颜色(右下边框颜色)width设置表格宽度height设置表格高度bgcolor设置背景颜色background设置背景图片frame设置边框样式rules设置内部边框样式cellspacing设置单元格间距cellpadding设置单元格边

6、距align设置表格水平对齐方式3.1 设置表格的边框属性默认情况下表格边框为0，可以通过给表格添加border、bordercolor、bordercolorlight、bordercolordark属性，为表格设置边框线以便美化表格。格式：实例5.html，设置了边框线border宽度为1、上边框颜色bordercolorlight和下边框颜色bordercolordark颜色。定义表格边框 课程表 节 次 星期一 星期二 星期三 星期四 星期五 适用时间：20092010第二学期0901班 第12节 体育 大学英语 高等数学 电子商务网站运营 Web应用技术 第34节 大学英语 高等数学

7、 电子商务案例 Web应用技术 电子商务安全 网页效果如图6-5所示。图6-5定义表格3.2 设置表格的宽度和高度格式： width和height的属性值可以是像素或百分比。 对于非嵌套表格，百分比表示的是表格应该占据的浏览器窗口的百分比；对于嵌套表格，百分比表示的是相对嵌套表格所在的单元格宽度。 用百分比设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格的大小变化而调整，而用像素设置大小的表格时绝对大小。 默认情况下，表格的宽度和高度会根据内容自动调整。实例6.html，课程表格的宽度一直保持为600像素，但高度设定了200像素，每行的高度自动增加了。设置表格的宽度和高度 课程表 节 次

8、星期一 星期二 星期三 星期四 星期五 适用时间：20092010第二学期0901班 第12节 体育 大学英语 高等数学 电子商务网站运营 Web应用技术 网页效果如图6-6所示。图6-6设置表格的宽度和高度3.3 设置表格背景颜色表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。格式：bgcolor属性的值可以是6位十六进制数或该颜色的英文单词。实例7.html。定义表格背景颜色 课程表 节 次 星期一 星期二 星期三 星期四 星期五 . 网页效果如图6-7所示。图6-7定义表格背景颜色3.4 设置表格的背景图像表格背景图像可以是GIF、JP

9、EG或PNG三种图像格式。格式： background属性值是背景图片文件的相对路径或完整路径。实例8.html。定义表格背景图像 课程表 节 次 星期一 星期二 星期三 星期四 星期五 . 网页效果如图6-8所示。图6-8设置表格的背景图像3.5 设置边框样式使用border属性时，每个单元格之间以及表格本身会出现边框，可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。格式：frame属性值如表6-2所示。表6-2 frame属性属性值描述above显示上边框below显示下边框hsides显示上下边框lhs显示左边框rhs显示右边框vsides显示

10、左右边框border显示上下左右边框void不显示边框表6-3 rules属性属性值描述all显示所有内部边框none不显示内部边框cols仅显示列边框rows仅显示行边框groups显示介于行列间的边框实例9.html，设定表格边框样式，只显示上下边框，将属性frame的值设置为hsides，隐藏左右边框，同时定义内部仅显示行边框，属性rules设置为rows。设置表格的宽度和高度 课程表 节 次 星期一 星期二 星期三 星期四 星期五 适用时间：20092010第二学期0901班 第12节 体育 大学英语 高等数学 电子商务网站运营 Web应用技术 网页效果如图6-9所示。图6-9设定表格

11、边框样式3.6 设置表格单元格间距通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。格式：单元格的间距以像素以单位，默认值是2。实例10.html。定义表格单元格间距 课程表 节 次 星期一 星期二 星期三 星期四 星期五 . 网页效果如图6-10所示。图6-10设定表格单元格间距3.7 设置表格单元格边距单元格边距是指单元格中的内容与单元格边框的距离。格式： 单元格的边距以像素为单位。实例11.html。定义表格单元格边距 课程表 节 次 星期一 星期二 星期三 星期四 星期五 . 网页效果如图6-11所示。图6-11设置表格的背景图像3.8

12、 设置表格的水平对齐属性在水平方向上，可以设置表格的对齐方式为：居左、居中、 居右。如果没特别进行设置，则默认为居左排列。格式：align的值可以分别为left、right、center实例12.html。设定表格水平对齐 课程表 节 次 星期一 星期二 星期三 星期四 星期五 . 网页效果如图6-12所示。图6-12设定表格水平对齐4 设置表格行的属性的属性用于设定表格中某一行的属性。表6-4 标记的属性属性描述align行内容的水平对齐valign行内容的垂直对齐bgcolor行的背景颜色background行的背景图像bordercolor行的边框颜色bordercolorlight行的亮边框颜色bordercolordark行的暗边框颜色4.1 行内容水平对齐格式：实例13.html。设定表格行的水平对齐 课程表 节 次 星期一 星期二 星期三 星期四 星期五 第12节 体育 大学英语 高等数学 电子商务网站运营 Web应用技术 第34节 大学英语 高等数学 电子商务案例 Web应用技术