第6章 使用表格

6.5

表格的行属性
不仅可以对表格整体设置相关属性，还可以对单独 的一行单元格设置相关属性。下面就介绍行的高度、 行的边框颜色、行的背景和行里内容的对齐方式设 置等。
6.5.1

高度控制height
使用height可以设置行的高度。
6.5.2

边框颜色bordercolor
可以使用bordercolor属性设置行的边框颜色。

单元格除了可以在水平方向上跨列，还可在垂直方 向上跨行。
6.6.4

对齐方式align、valign
单元格的对齐方式设置与行的对齐方式设置方法相 似。
6.6.5

单元格的背景颜色
为了增加表格的美观性，可以为单元格设置不同的 背景颜色。
6.6.6

单元格的边框颜色bordercolor
单元格的边框颜色可以通过bordercolor来设置。
第6章 使用表格
教学内容：表格是网页制作中使用最多的工具之一 ，在制作网页时，使用表格可以更清晰地排列数据 。但在实际制作过程中，表格更多地用在网页布局 定位上。很多网页都是以表格布局的，这是因为表 格在文本和图像的位ቤተ መጻሕፍቲ ባይዱ控制方面都有很强的功能。 灵活、熟练地使用表格，在网页制作时会有如虎添 翼的感觉。
6.5.5

行文字的垂直对齐方式valign
<tr>的valign属性用来控制表格当前行的垂直对齐方 式。垂直对齐方式有3种，分别是top、middle和 bottom。
6.6

单元格属性
单元格是表格中最基本的单位。<td>单元格全部包 含在行<tr>中，一个行里面可以有任意多个单元格。 可以自定义设置单元格的各项属性，这些样式将覆 盖<table>和<tr>已经定义的样式。
6.2.1

表格宽度width
可以使用表格的width属性来设置表格的宽度。如果 不指定表格宽度，浏览器就会根据表格内容的多少 自动调整宽度。
6.2.2

表格高度height
可以使用表格的height属性来设置表格的高度。
6.2.3

表格对齐方式align
可以使用表格的align属性来设置表格的对齐方式。
6.7.1

表格的表首标记<thead>
表首样式的开始标记是<thead>，结束标记是 </thead>。它们用于定义表格最上端表首的样式， 可以设置背景颜色、文字对齐方式、文字的垂直对 齐方式等。
6.7.2

表格的表主体标记<tbody>
与表首样式的标记功能类似，表主体样式用于统一 设计表主体部分的样式，标记为<tbody>。
6.4

表格背景
还可以为表格设置不同的背景来美化表格，包 括表格的背景颜色和背景图像的设置 。
6.4.1

表格背景颜色bgcolor
表格的背景颜色属性bgcolor是针对整个表格的， bgcolor定义的颜色可以被行、列或单元格定义的背 景颜色所覆盖。
6.4.2

表格背景图像
除了可以为表格设置背景颜色之外，还可以为表格 设置更加美观的背景图像。
•
•
• • • •
教学重点 掌握创建表格 掌握设置表格基本属性 掌握设置表格的边框 掌握设置表格背景 掌握设置表格的行属性 掌握调整单元格属性
6.1

创建表格
表格是网页排版布局不可缺少的一个工具，能 否熟练地运用表格将直接影响到网页设计的好 坏。下面就讲述表格的创建 。
6.1.1

表格的基本构成table、tr、td
6.3.3

内框宽度cellspacing
表格的内框宽度属性cellspacing用于设置表格内部每 个单元格之间的间距。
6.3.4

表格内文字与边框间距cellpadding
在默认情况下，单元格里的内容会紧贴着表格的边 框，这样看上去非常拥挤。可以使用cellpadding来 设置单元格边框与单元格里的内容之间的距离。
6.6.7

单元格的亮边框bordercolorlight
单元格的亮边框就是单元格边框向光的部分。通过 bordercolorlight可以设置单元格亮边框的颜色。
6.6.8

单元格的暗边框bordercolordark
单元格的暗边框就是单元格边框背光的部分。通过 bordercolordark可以设置单元格暗边框的颜色。
6.6.9

单元格的背景图像background
单元格也可以有背景图像，通过background可以设 置单元格的背景图像。
6.7

表格的结构
还有一些标记是用来表示表格结构的，包括表 首标记<thead>、表主体标记<tbody>以及表 尾标记<tfoot>。这些通过成对出现的标记设 置，应用到表格里用于整体规划表格的行列属 性。使用这些标记能对表格的一行或多行单元 格属性进行统一修改，从而省去了逐一修改单 元格属性的麻烦。
6.3

表格的边框
表格的边框可以很粗、也可以很细，可以使用border 属性来设置表格的边框效果，包括边框的宽度、边 框的颜色等。
6.3.1

表格边框宽度border
默认情况下如果不指定border属性，则浏览器将不显 示表格边框。
6.3.2

表格边框颜色bordercolor
默认情况下边框的颜色是灰色的，可以使用 bordercolor设置边框颜色。但是设置边框颜色的前提 是边框的宽度不能为0，否则无法显示出边框的颜色。
表格由行、列和单元格 3 部分组成，一般通过 3 个标 记来创建，分别是表格标记table、行标记tr和单元格 标 记 td 。 表 格 的 各 种 属 性 都 要 在 表 格 的 开 始 标 记 <table>和表格的结束标记</table>之间才有效。
6.1.2

设置表格的标题caption
可以使用<caption>来设置标题单元格，表格的标 题一般位于整个表格的第1行。一个<table>表格 只能含有一个表格标题。
6.6.1

单元格大小width、height
默认情况下，单元格的宽度和高度会根据内容自动 调整，也可以通过width、height设置单元格的宽度和 高度。
6.6.2 水平跨度colspan

在设计表格时，有时需要将两个或更多的相邻单元 格组合成一个单元格。
6.6.3 垂直跨度rowspan
6.1.3

表头th
表格的表头<th>是<td>单元格的一种变体，实质上 仍是一种单元格。它一般位于第一行和第一列，用 来表明这一行或列的内容类别。在一般情况下，浏 览器会以粗体和居中的样式显示<th>元素中的内容。
6.2

表格基本属性
为了使所创建的表格更加美观、醒目，需 要对表格的属性进行设置，主要包括表格 的宽度、高度和对齐方式等。

2. 上机操作题

制作一个如图6.36所示的表格 。
6.7.3

表格的表尾标记<tfoot>
<tfoot>标记用于定义表尾样式。
6.8经典习题


1. 填空题
（1）表格由行、列和单元格3部分组成，一般通过3 个标记来创建，分别是表格标记__________、行标 记__________和单元格标记__________。表格的各 种属性都要在表格的开始标记<table>和表格的结束 标记</table>之间才有效。 （2）表格的边框可以很粗也可以很细，可以使用 __________属性来设置表格的边框效果，包括边框 的宽度、边框的颜色等。
6.5.3

行背景bgcolor、background
行的bgcolor或background属性仅作用于当前行。这 里设置的bgcolor颜色可以覆盖<table>的bgcolor或 background属性，不过会被单元格定义的背景颜色 所覆盖。
6.5.4

行文字的水平对齐方式align
<tr>的align属性用来控制表格当前行的水平对齐方式。 它不受表格整体对齐方式的影响，却能够被单元格 的对齐方式定义所覆盖。