2.3 在网页中应用表格

表格在网页设计中有着广泛的应用。表格由不同行和列的单元格组成，可以用于组织和显示信息，也可以用于安排页面布局。

2.3.1 创建基本表格

一个表格由标题、行和单元格组成，单元格的内容可以是文本、图像等，甚至还可以是表格。既可以通过编写HTML代码定义表格，也可以使用【表格】对话框快速创建表格。

1.用HTML标记创建表格

在HTML语言中，表格通过<table>标记定义；每一行用<tr>标记表示；每个单元格用<td>或<th>标记来定义，<td>用于定义普通数据单元格，<th>标记用于定义标题单元格，其中的文字用粗体显示且水平居中；表格标题用<caption>标记定义。

定义表格的基本语法如下：

        <table>
          <caption>表格标题</caption>
          <tr>
            <td>数据项</td>
            <td>数据项</td>
            ……
            <td>数据项</td>
          </tr>
          ……
        </table>

2.使用【表格】对话框设置表格

在Dreamweaver CS3中，可以通过【表格】对话框在网页中插入一个表格并对其基本属性进行设置，操作方法如下。

图2-39 【表格】对话框

1 在页面上，把插入点放在要插入表格的位置。

选择【插入】→【表格】命令，或者在插入栏的【常用】类别中单击【表格】按钮 ，此时将弹出【表格】对话框，如图2-39所示。

3 在【行数】和【列数】框中，指定表格的行数

4 在【表格宽度】框中输入一个数字，并在右边的列表框中选择【像素】或【百分比】，以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度（width属性）。

5 在【边框粗细】框中，以像素为单位指定表格边框的宽度（border属性）。

6 在【单元格边距】框中，指定单元格边框与其内容间的像素数（cellpadding属性）。

7 在【单元格间距】框中，指定相邻的表格单元格之间的像素数（cellspacing属性）。

8 在【页眉】部分选择一个标题选项。

● 若选择【无】，则对表格不启用列或行标题。

● 若选择【左侧】，则以表格的第一列作为标题列，将用<th>标记定义此列。

● 若选择【顶部】，则以表格的第一行作为标题行，将用<th>标记定义此行。

● 若选择【两者】，则分别使用<th>标记定义表格的第一行和第一列。

9 在【标题】框中，提供了一个显示在表格外的表格标题（<caption>标记）。

10 在【对齐标题】列表框中，选择表格标题相对于表格的显示位置（align属性），可供选择的项有【默认】、【顶部】、【底部】、【左】和【右】。

11 完成设置后，单击【确定】按钮。

此时，一个空白表格插入文档中。根据需要，可以向该表格的单元格中输入任何类型的数据，例如文本和图像等，甚至可以在单元格中插入另一个表格，由此形成嵌套表格。

向单元格中输入文本的操作方法如下。

1 在文档窗口中，单击要插入文本的单元格。

2 直接在单元格中输入文本，或者从剪贴板粘贴文本。

3 按Tab键，把插入点移到下一个单元格并继续输入。

4 若在最后一个单元格中按Tab键，则会添加一个新行。

例2-12创建表格并填写文字，网页效果如图2-40所示。

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-12，把网页标题设置为“创建基本表格示例”。

2 在页面上插入一个4行3列的表格，把第一行设置为标题。

3 在表格的各个单元格中，分别输入文字信息。

图2-40 创建基本表格

4 在代码视图下，可以看到在文档正文部分生成了以下HTML代码：

        <table width="398" border="1">
          <caption>图书信息</caption>
          <tr>
            <th width="164" scope="col">书名</th>
            <th width="147" scope="col">书号</th>
            <th width="28" scope="col">定价</th>
          </tr>
          <tr> <td>SQL Server 2000 案例教程</td>
            <td>7-121-00802-5</td>
            <td>27.8</td>
          </tr>
          <tr>
            <td>ASP.NET 2.0案例教程</td>
            <td>978-7-121-04053-5</td>
            <td>29</td>
          </tr>
          <tr>
            <td>ASP动态网页设计</td>
            <td>7-5053-8744-8/TP.5076</td>
            <td>27</td>
          </tr>
        </table>

【代码说明】

在上述代码中，对<table>标记的两个属性进行了设置，其中width属性指定表格的宽度，border属性指定表格边框的粗细。此外，还在<th>标记中对scope属性进行了设置，该属性值为“col”，用于定义列标题，表示此单元格是下面数据单元格的标题；若将scope属性设置为“row”，则可定义行标题，表明此单元格是右边数据单元格的标题。

5 在浏览器中查看网页效果。

2.3.2 设置表格的属性

使用HTML语言编写网页时，可以通过<table>标记的属性对表格的格式进行设置。若使用Dreamweaver CS3创建网页，则可以利用属性检查器或标签检查器设置表格的属性。

1.<table>标记的常用属性

<table>标记的常用属性如下。

● align属性：指定表格的对齐方式。有以下取值：“left”表示左对齐（默认值）、“center”表示居中对齐，“right”表示右对齐。

● background属性：指定用做表格背景图片的URL地址。

● bgcolor属性：指定表格的背景颜色。

● border属性：指定表格边框的宽度，以像素为单位。默认值为0，不显示表格边框。

● bordercolor属性：指定表格边框颜色，应与border属性一起使用。

● bordercolordark属性：指定3D边框的阴影颜色，应与border属性一起使用。

● bordercolorlight属性：指定3D边框的高亮显示颜色，应与border属性一起使用。

● cellpadding属性：指定单元格内容与单元格边框之间的间距，以像素为单位。

● cellspacing属性：指定单元格之间的间距，以像素为单位。

● frame属性：指定表格外框线的显示方式。该属性有以下取值。“above”表示只显示上边框；“below”表示只显示下边框；“border”和“box”都表示显示所有4个边框（默认值）；“hsides”表示只显示上边框和下边框；“lhs”表示只显示左边框；“rhs”表示只显示右边框；“void”表示不显示所有边框；“vsides”表示只显示左边框和右边框。

● height属性：指定表格的高度，以像素或相对于浏览器窗口高度的百分比为单位。

● rules属性：指定表格内部分隔线的显示方式。该属性有以下取值。“all”表示同时显示水平方向和垂直方向的分隔线（默认值）；“cols”表示只显示列与列之间的垂直分隔线；“groups”表示显示组与组之间的分隔线；“rows”表示只显示行与行之间的水平分隔线；“none”表示不显示所有分隔线。

● width属性：指定表格的宽度，以像素或相对于浏览器窗口宽度的百分比为单位。

2.利用属性检查器设置表格的属性

在Dreamweaver CS3中，可以利用属性检查器对表格的一些常用属性进行设置，操作方法如下。

1 把插入点放在表格的任意单元格中，然后在文档窗口左下角的标签选择器中单击<table>标记，以选择整个表格。

在属性检查器中单击右下角的展开箭头 ，以查看和设置表格的更多属性，如图2-41所示。

图2-41 利用属性检查器设置表格的属性

3 在【表格Id】框中，指定表格的标识符。在JavaScript脚本程序中可以通过此标识符来引用表格。

4 在【行】和【列】框中，指定表格中行和列的数目，借此可增加或减少表格的行数或列数。

5 在【宽】框中，指定以像素为单位或按占浏览器窗口宽度的百分比计算的表格宽度（width属性）。

6 在【填充】框中，指定单元格内容与其边框之间的像素数（cellpadding属性）。

7 在【间距】框中，指定相邻的表格单元格之间的像素数（cellspacing属性）。

8 从【对齐】列表框中选择表格相对于同一段落中其他元素（如文本或图像）的对齐方式（align属性）。

● 若选择【左对齐】（“left”），则沿其他元素的左侧对齐表格，因此同一段落中的文本在表格的右侧换行。

● 若选择【居中对齐】（“center”），则将表格居中，文本显示在表格的上方或下方。

● 若选择【右对齐】（“rigth”），则沿其他元素的右侧对齐表格，也就是文本在表格的左侧换行。

● 若选择【默认】，则指示浏览器应该使用其默认对齐方式。

9 在【边框】框中，指定表格边框的宽度（border属性），以像素为单位。

若要从表格中删除所有明确指定的行高或列宽，可单击【清除列宽】按钮 或【清除行高】按钮 。

若要根据当前窗口的大小和百分比宽度将表格宽度转换为像素值，可单击【将表格宽度转换成像素】按钮 。

12 若要根据当前窗口的大小和宽度像素值将表格宽度转换为百分比宽度，可单击【将表格宽度转换成百分比】按钮 。

13 在【背景颜色】框中指定表格的背景颜色（bgcolor属性），可以直接输入一个颜色值，也可以从颜色选择器中选择所需要的颜色。

14 在【边框颜色】框中指定表格边框的颜色（bordercolor属性），可以直接输入一个颜色值，也可以从颜色选择器中选择所需要的颜色。

在【背景图像】框中指定表格的背景图像（background属性），可以单击文件夹图标 找到图像文件，或者使用【指向文件】图标 来选择图像文件。

16 若要把CSS类样式应用于表格，可从【类】列表中进行选择所需要的类样式。

3.利用标签检查器设置表格的属性

利用标签检查器可以对表格的更多属性进行设置，操作方法如下：

1 把插入点放在表格的任意单元格中，然后在文档窗口左下角的标签选择器中单击<table>标记，以选择整个表格。

2 按F9键，以打开标签检查器，如图2-42所示。

3 在标签检查器中，对表格的属性进行设置。

例2-13 设置表格的外框和内部分隔线，网页效果如图2-43所示。

图2-42 利用标签检查器设置表格的属性

图2-43 设置表格的外框和内部分隔线

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-13.html，把网页标题设置为“设置表格属性示例”。

2 在页面上插入一个2行2列的表格，然后利用属性检查器设置该表格的属性，如图2-44所示；利用标签检查器把该表格的rules属性设置为none。

图2-44 利用属性检查器设置表格的属性

3 在上述表格的4个单元格中分别插入一个3行2列的表格，并把这些内嵌表格命名为tb2～tb5，然后分别输入数字1～6。

4 对于内嵌表格tb5，保留所有默认属性；对其他三个表格，利用标签检查器对其属性进行设置。

● 内嵌表格tb2：将其rules属性设置为rows。

● 内嵌表格tb3：将其frame属性设置为hsides，rules属性设置为rows。

● 内嵌表格tb4，将其frame属性设置为hsides。

5 在浏览器中查看网页效果。

2.3.3 设置表格元素的属性

除了从整体上对表格的属性进行设置之外，也可以根据需要对表格中的某些行、列或单元格的属性进行设置。下面首先对<tr>、<td>、<th>标记的常用属性做简要说明，然后介绍如何利用属性检查器或标签检查器对表格元素的属性进行设置。

1.<tr>标记的常用属性

表格中的行是通过<tr>标记定义的。通过设置<tr>标记的属性值可以对行内包含的所有单元格的格式进行设置。<tr>标记的常用属性如下。

● align属性：指定一个行中所有单元格的水平对齐方式。有以下取值为：“left”表示左对齐（默认值），“center”表示居中对齐，“right”表示右对齐。

● background属性：指定图像文件的路径，该图像用做指定行的背景。

● bgcolor属性：指定行的背景颜色。

● bordercolor属性：指定行的边框颜色，该属性仅当<table>标记的border属性取非零值时才起作用。

● bordercolordark属性：指定行的3D边框的阴影颜色，该属性仅当<table>标记的border属性取非零值时才起作用。

● bordercolorlight属性：指定行的3D边框的高亮颜色，该属性仅当<table>标记的border属性取非零值时才起作用

● valign属性：指定行中所有单元格内容的垂直对齐方式。有以下取值：“top”表示顶端对齐，“middle”表示居中对齐，“bottom”表示底端对齐，“baseline”表示基线对齐。

2.<td>、<th>标记的常用属性

表格中的各个单元格是通过<td>或<th>标记定义的。通过设置这些标记的属性值可以对选定单元格的格式进行设置。<td>和<th>标记的常用属性如下。

● align属性：指定单元格内文本的水平对齐方式。有以下取值：“left”表示左对齐（默认值），“center”表示居中对齐，“right”表示右对齐。

● background属性：指定图像文件的路径，该图像用做单元格的背景。

● bgcolor属性：指定单元格的背景颜色。

● bordercolor属性：指定单元格的边框颜色，该属性仅当<table>标记的border属性取非零值时才起作用。

● bordercolordark属性：指定单元格的3D边框的阴影颜色，该属性仅当<table>标记的border属性取非零值时才起作用。

● bordercolorlight属性：指定单元格的3D边框的高亮颜色，该属性仅当<table>标记的border属性取非零值时才起作用。

● colspan属性：指定合并单元格时一个单元格跨越的表格列数。

● nowrap属性：若指定该属性，则避免Web浏览器将单元格里的文本换行。

● rowspan属性：指定合并单元格时一个单元格跨越的表格行数。

● valign属性：指定单元格中文本的垂直对齐方式。有以下取值。“top”表示顶端对齐，“middle”表示居中对齐，“bottom”表示底端对齐，“baseline”表示基线对齐。

3.利用属性检查器设置表格元素的属性

在Dreamweaver中，可以从表格中选择部分单元格、行或列，然后使用属性检查器来查看和更改它的属性。当设置列的某些属性时，Dreamweaver更改对应于该列中每个单元格的<td>标记的属性；当设置行的某些属性时，Dreamweaver将更改<tr>标记的属性而不是行中每个<td>标记的属性。

在Dreamweaver中，可以使用属性检查器对单元格、行或列的常用属性进行设置，具体操作方法如下：

1 从表格中选择一些单元格、行或列。

● 若要选择单个单元格，按住Ctrl键单击该单元格。

● 若要选择一行或一个矩形的单元格块，可从一个单元格拖到另一个单元格。

● 若要选择一组不相邻的单元格，可按住Ctrl键同时单击要选择的单元格、行或列。

● 若要选择单个或多个行或列，可将鼠标指针指向行的左边缘或列的上边缘，当鼠标指针变为选择箭头时，通过单击选择单个行或列或进行拖动以选择多个行或列。

在属性检查器中单击展开箭头 ，以显示表格元素的更多属性，如图2-45所示。

3 从【水平】列表中选择单元格、行或列内容的水平对齐方式（align属性），可以将内容对齐到单元格的左侧、右侧或使之居中对齐，也可以指示浏览器使用其默认的对齐方式。

4 从【垂直】列表中选择单元格、行或列内容的垂直对齐方式（valign），可以将内容对齐到单元格的顶端、中间、底部或基线，也可以指示浏览器使用其默认的对齐方式。

图2-45 设置表格元素的属性

5 在【宽】框中，指定以像素为单位或按占整个表格宽度百分比计算的所选单元格的宽度（width属性）。若要指定百分比，可在值后面使用百分号（%）。若要让浏览器根据单元格的内容以及其他列和行的宽度和高度确定适当的宽度或高度，可将此文本框留空。

在【背景】框中指定单元格、列或行的背景图像的文件名（background），可以单击文件夹图标找到到某个图像，或拖动【指向文件】图标 来选择某个图像文件。

7 在【背景颜色】框中，指定单元格、列或行的背景颜色（bgcolor），可以直接输入颜色值，或者使用颜色选择器选择所需的颜色。

8 在【边框】框中指定单元格的边框颜色（bordercolor），可以直接输入颜色值，或者使用颜色选择器选择所需的颜色。

若要将所选的单元格、行或列合并为一个单元格，可单击【合并单元格】按钮 ，这将对结果单元格的colspan或rowspan属性进行设置。只有当单元格形成矩形或直线的块时才可以合并这些单元格。

若要将一个单元格分成两个或更多单元格，可单击【拆分单元格为行或列】按钮 。一次只能拆分一个单元格，若选择的单元格多于一个，则此按钮将被禁用。

11 若要使给定单元格中的所有文本都在一行上，可选取【不换行】复选框，以防止文本换行。这将对<td>或<th>标记的nowrap属性进行设置。

12 若要将所选的单元格格式设置为表格标题单元格，可选择【标题】复选框，这会把<td>标记转换为<th>标记。

13 若要对选定的单元格应用CSS类样式，可在【类】列表中选择所需要的类样式。

4.利用标签检查器设置表格元素的属性

属性检查器仅列出了表格元素的部分常用属性。若要设置在属性检查器中未显示的属性，如bordercolordark和bordercolorlight等，则可以利用标签检查器来设置。

利用标签检查器设置表格元素属性的操作方法如下。

1 按F9键以打开标签检查器。

2 从表格中选择单个单元格或单个行，此时标签检查器列出该单元格或行的属性设置，如图2-47和图2-47所示。

图2-46 用标签检查器设置单元格属性

图2-47 用标签检查器设置行属性

3 在标签属性器中设置单元格或行的属性。

5.表格属性设置的优先顺序

当对表格进行格式设置时，表格格式设置的优先顺序为：单元格属性设置优先级别最高，行属性设置次之，表格属性设置最低。换言之，如果把表格或某行的一个属性（如背景颜色）设置为一个值，又将表格或该行中某个单元格的同一属性设置为另一个值，则单元格格式设置优先于行格式设置，而行格式设置又优先于表格格式设置。

例2-14 通过设置表格属性制作细线表格，网页效果如图2-48所示。

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-14.html，把网页标题设置为“制作细线表格效果”。

2 在页面上插入一个5行3列的表格，在【表格】对话框中对以下选项进行设置，如图2-49所示。

● 表格宽度：300像素。

● 边框粗细：0像素。

● 单元格边距：0。

● 单元格间距：1。

● 表格标题：“制作细线表格效果”。

图2-48 制作细线表格效果

图2-49 设置表格选项

3 利用属性检查器把表格的背景颜色设置为#0066CC，如图2-50所示。

图2-50 利用属性检查器设置表格的属性

4 选取表格中的所有单元格，利用属性检查器将其背景颜色设置为白色（#FFFFFF），如图2-51所示。

图2-51 利用属性检查器设置所有单元格的属性

5 在浏览器中查看网页效果。