![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
10.4 表格的其他功能
为了更加快速而有效地处理网页中的表格和内容,Dreamweaver CC提供了多种自动处理功能,包括导入表格数据和排序表格等。本节将介绍表格自动化处理技巧,以提升网页表格的设计技能。
10.4.1 导入表格式数据
Dreamweaver中导入表格式数据功能能够根据素材来源的结构,为网页自动建立相应的表格,并自动生成表格数据,因此,当遇到大篇幅的表格内容编排,而手头又拥有相关表格式素材时,便可使网页编排工作轻松得多。
下面通过实例讲述如何导入表格式数据,效果如图10-29所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0392_0001.jpg?sign=1739312561-IkRu8lJZx7zq8p8hvwsKStojc0srJNtw-0-cbb63e6390d38dac6f58b3f5bc3b85de)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00479.jpg?sign=1739312561-ijxECEmW4lozXqcN4KCmeZrTrMQySLql-0-bfbc611c19a5e8dad11dc487879bfb65)
图10-29 导入表格式数据效果
01 打开网页文档,将光标置于要导入表格式数据的位置,如图10-30所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00480.jpg?sign=1739312561-Kp8OM0MCjhHxutZo1mlnQ4WKnIOt95d4-0-b346a5d0f6b6b70b3887cd101836aeea)
图10-30 打开网页文档
02 执行“文件”|“导入”|“导入表格式数据”命令,弹出“导入表格式数据”对话框,在对话框中单击“数据文件”文本框右边的“浏览”按钮,如图10-31所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00481.jpg?sign=1739312561-kvc6ijsPqbN4gheeTms3xK9nN81MZ3wO-0-c4fdf9b108e60f00fcbecddce7e9c184)
图10-31 “导入表格式数据”对话框
★提示★
在“导入表格式数据”对话框中可以进行如下设置:
●数据文件:输入要导入的数据文件的保存路径和文件名。或单击右边的“浏览”按钮进行选择。
●定界符:选择定界符,使之与导入的数据文件格式匹配。有“Tab”、“逗点”、“分号”、“引号”和“其他”5个选项。
●表格宽度:设置导入表格的宽度。
➢ 匹配内容:选中此单选按钮,创建一个根据最长文件进行调整的表格。
➢ 设置为:选中此单选按钮,在后面的文本框中输入表格的宽度,并设置其单位。
●单元格边距:设置单元格内容和单元格边界之间的像素数。
●单元格间距:设置相邻的表格单元格间的像素数。
●格式化首行:设置首行标题的格式。
●边框:以像素为单位设置表格边框的宽度。
03 弹出“打开”对话框,在对话框中选择数据文件,如图10-32所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00482.jpg?sign=1739312561-beTa0XXoIFJd5aqxunnKvuasVfyDGzl6-0-0d1b025e98672d812e2fdd4f811a4870)
图10-32 “打开”对话框
04 单击“打开”按钮,将文件名和路径添加到文本框中,在“导入表格式数据”对话框中的“定界符”下拉表中选择“逗点”选项,在“表格宽度”选项组中选中“匹配内容”单选按钮,如图10-33所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00483.jpg?sign=1739312561-uowU4dJmKGahC7knAMpA2eIQ7UDegwM3-0-3baf92663e79157b72ad7d9ec9bf950b)
图10-33 “导入表格式数据”对话框
05 单击“确定”按钮,导入表格式数据,如图10-34所示。
★提示★
在导入数据表格时注意定界符必须是逗号,否则可能会造成表格格式的混乱。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00484.jpg?sign=1739312561-ZyQQss4oVH2NE35BSpI1qPE34okk8Zk2-0-92549c48b3aec843505cb06a70bc5f11)
图10-34 导入表格式数据
06 保存文档,按F12键在浏览器中预览,效果参见图10-29所示。
10.4.2 排序表格
排序表格的主要功能针对具有格式数据的表格而言,是根据表格列表中的数据来排序的。下面通过实例讲述排序表格的操作,效果如图10-35所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0397_0001.jpg?sign=1739312561-hRopUzYnUSyHEic6Y7XhEpPV9TsUjIc9-0-ad57d2271ce931d2666962f71a8ed79d)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00485.jpg?sign=1739312561-MJ0DDRpDko6BUgPTZPypQjWEZ1Zx1w17-0-e4e8d40f4497844fc1c504b69ab0b4b8)
图10-35 排序表格效果
01 打开网页文档,如图10-36所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00486.jpg?sign=1739312561-ut9aAMWjuQVCUspdmo8ShCe1QWaRavpN-0-fd82e50d915dbf6714f60c32176c9d0f)
图10-36 打开网页文档
02 执行“命令”|“排序表格”命令,弹出“排序表格”对话框,在对话框中将“排序按”设置为“列4”,“顺序”设置为“按数字顺序”,在右边的下拉列表中选择“降序”选项,如图10-37所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00487.jpg?sign=1739312561-9VSnlKpShdIGZZveCVS8X22ZwXIXN38u-0-c6603b20b83a93ebf809e0ec8178b483)
图10-37 “排序表格”对话框
★提示★
在“排序表格”对话框中可以设置如下选项:
●排序按:确定哪一列的值将用于表格排序。
●顺序:确定是按字母还是按数字顺序,以及是升序还是降序对表格排序。
●再按:确定在不同列上第二种排列方法的排列顺序。在其后面的下拉列表中指定应用第二种排列方法的列,在后面的下拉列表中指定第二种排序方法的排序顺序。
●排序包含第一行:指定表格的第一行应该包括在排序中。
●排序标题行:指定使用与body行相同的条件对表格thead部分中的所有行排序。
●排序脚注行:指定使用与body行相同的条件对表格tfoot部分中的所有行排序。
●完成排序后所有行颜色保持不变:指定排序之后表格行属性应该与同一内容保持关联。
03 单击“确定”按钮,对表格进行排序,参见图10-38所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00488.jpg?sign=1739312561-W2MKcQFt5Syz7LCfKEthBIzAMJMiTYIl-0-cc3f50020ecc7e7fd659b47c6d6841d3)
图10-38 对表格进行排序
04 保存文档,按F12键在浏览器中预览,效果参见图10-35所示。