第六章 表格.docx

第六章 表格.docx

《第六章 表格.docx》由会员分享，可在线阅读，更多相关《第六章 表格.docx（36页珍藏版）》请在冰豆网上搜索。

第六章表格

第六章表格

表格是网页制作中一种常用的页面布局工具。

通过表格可以精确地控制网页各元素在网页中的位置，从而方便页面的排版和布局，所以，表格布局是网页排版的一种方式。

1表格简介

表格在网站应用中非常广泛，几乎所有的HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。

2表格标记

2.1表格基本标记

在HTML语法中，表格主要通过3个标签来构成：

✓

✓在一个表格中，

--表格第一行-->

--表格第二行-->

--表格第二行-->

网页效果如图6-1所示。

图6-1定义表格

2.2表格标题

表格标题，就是对表格内容的简单说明，用标记实现。

格式：

…

实例2.html。

课程表

--表格第一行-->

节次

星期一

星期二

星期三

星期四

星期五

--表格第二行-->

第12节

体育

大学英语

高等数学

数据结构实验

Web开发

--表格第二行-->

第34节

大学英语

高等数学

数据结构

数据结构

Web开发实验

网页效果如图6-2所示。

图6-2设定表格标题

2.3表格表头

表头，指表格的第一行，文字样式为居中、加粗显示，通过标签实现。

格式：

…

…

…

实例3.html。

课程表

--表格第一行-->

节次

星期一

星期二

星期三

星期四

星期五

--表格第二行-->

第12节

体育

大学英语

高等数学

电子商务网站运营

Web应用技术

--表格第二行-->

第34节

大学英语

高等数学

电子商务案例

Web应用技术

电子商务安全

网页效果如图6-3所示。

图6-3设定表格的表头

2.4设置划分结构的表格

为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML语言规定了、、3个标签分别对应于表格的表首、表主体和表尾。

格式：

…

…

…

✓标记用于定义表格的表首样式，标记用于定义表格的主体的样式，标记用于定义表格的表尾的样式。

✓必须使用全部的元素，它们的出现次序是thead、tfoot、tbody，必须在table元素内使用这些标记。

实例4.html，使用了上面的三个标记，将网页结构划分成了三个部分。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

--表格页脚-->

适用时间：

2009～2010第二学期0901班

--表格表体-->

第12节

体育

大学英语

高等数学

电子商务网站运营

Web应用技术

--表格第二行-->

第34节

大学英语

高等数学

电子商务案例

Web应用技术

电子商务安全

页脚中出现的标记，其中colspan属性表示合并6个单元格，

这是为了和表头标题保持一致。

网页效果如图6-4所示。

图6-4设定划分结构的表格

3表格属性

表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。

常见属性如表6-1所示。

表6-1表格标记的属性

属性

描述

border

设置边框粗细

bordercolor

设置边框颜色

bordercolorlight

设置亮边框颜色（左上边框颜色）

bordercolordark

设置暗边框颜色（右下边框颜色）

width

设置表格宽度

height

设置表格高度

bgcolor

设置背景颜色

background

设置背景图片

frame

设置边框样式

rules

设置内部边框样式

cellspacing

设置单元格间距

cellpadding

设置单元格边距

align

设置表格水平对齐方式

3.1设置表格的边框属性

默认情况下表格边框为0，可以通过给表格添加border、bordercolor、bordercolorlight、bordercolordark属性，为表格设置边框线以便美化表格。

格式：

实例5.html，设置了边框线border宽度为1、上边框颜色bordercolorlight和

下边框颜色bordercolordark颜色。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

--表格页脚-->

适用时间：

2009～2010第二学期0901班

--表格表体-->

第12节

体育

大学英语

高等数学

电子商务网站运营

Web应用技术

--表格第二行-->

第34节

大学英语

高等数学

电子商务案例

Web应用技术

电子商务安全

网页效果如图6-5所示。

图6-5定义表格

3.2设置表格的宽度和高度

格式：

✓width和height的属性值可以是像素或百分比。

✓对于非嵌套表格，百分比表示的是表格应该占据的浏览器窗口的百分比；对于嵌套表格，百分比表示的是相对嵌套表格所在的单元格宽度。

✓用百分比设置大小的表格会随着浏览器窗口或嵌套表格所在的单元格的大小变化而调整，而用像素设置大小的表格时绝对大小。

✓默认情况下，表格的宽度和高度会根据内容自动调整。

实例6.html，课程表格的宽度一直保持为600像素，但高度设定了200像素，

每行的高度自动增加了。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

--表格页脚-->

适用时间：

2009～2010第二学期0901班

--表格表体-->

第12节

体育

大学英语

高等数学

电子商务网站运营

Web应用技术

………………

网页效果如图6-6所示。

图6-6设置表格的宽度和高度

3.3设置表格背景颜色

表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。

格式：

bgcolor属性的值可以是6位十六进制数或该颜色的英文单词。

实例7.html。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

……………..

网页效果如图6-7所示。

图6-7定义表格背景颜色

3.4设置表格的背景图像

表格背景图像可以是GIF、JPEG或PNG三种图像格式。

格式：

background属性值是背景图片文件的相对路径或完整路径。

实例8.html。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

………..

网页效果如图6-8所示。

图6-8设置表格的背景图像

3.5设置边框样式

使用border属性时，每个单元格之间以及表格本身会出现边框，可以利用frame属性控制应该显示哪些表格边框，利用rules属性控制应该显示哪些内部边框。

格式：

frame属性值如表6-2所示。

表6-2frame属性

属性值

描述

above

显示上边框

below

显示下边框

hsides

显示上下边框

lhs

显示左边框

rhs

显示右边框

vsides

显示左右边框

border

显示上下左右边框

void

不显示边框

表6-3rules属性

属性值

描述

all

显示所有内部边框

none

不显示内部边框

cols

仅显示列边框

rows

仅显示行边框

groups

显示介于行列间的边框

实例9.html，设定表格边框样式，只显示上下边框，将属性frame的值设置为hsides，隐藏左右边框，同时定义内部仅显示行边框，属性rules设置为rows。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

--表格页脚-->

适用时间：

2009～2010第二学期0901班

--表格表体-->

第12节

体育

大学英语

高等数学

电子商务网站运营

Web应用技术

………………

网页效果如图6-9所示。

图6-9设定表格边框样式

3.6设置表格单元格间距

通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。

格式：

单元格的间距以像素以单位，默认值是2。

实例10.html。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

……………..

网页效果如图6-10所示。

图6-10设定表格单元格间距

3.7设置表格单元格边距

单元格边距是指单元格中的内容与单元格边框的距离。

格式：

单元格的边距以像素为单位。

实例11.html。

课程表

--表格标题-->

节次

星期一

星期二

星期三

星期四

星期五

………..

网页效果如图6-11所示。

图6-11设置表格的背景图像

3.8设置表格的水平对齐属性

在水平方向上，可以设置表格的对齐方式为：

居左、居中、居右。

如果没特别进行设置，则默认为居左排列。

格式：

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应用技术