表格作为网页中一个重要的构成要素,主要应用于网页的布局设计中。通过应用表格,可以对文本和图像进行精确的定位,条理清晰地安排各种网页元素,使得整个页面一目了然、风格统一。
表格由行、列和单元格3部分组成。使用表格可以排列网页中的文本、图像等各种网页元素,可以在表格中自由地进行移动、复制和粘贴等操作,还可以在表格中嵌套表格,使页面设计更灵活、方便。
1.插入表格
在网页中确定插入点的位置,单击“插入”→“Table”菜单命令,或者单击“插入”面板中的“Table”按钮,可以打开如图5.44所示的“Table”对话框,进行相关的设置后,即可创建相应的表格。
图5.44 “Table”对话框
如果在“Table”对话框中没有指定边框粗细的值,大多数浏览器会按边框粗细为1像素来显示表格。如果不希望在浏览器中显示表格边框,应将其值设置为0。
2.添加表格数据
在制作网页时,可以使用表格来布局页面,在表格中可以输入文本,也可以插入图像,还可以插入其他的网页元素。在表格的单元格中也可以再嵌套一个表格,这样就可以使用多个表格来布局页面。
1)在单元格中输入文本
在需要输入文本的单元格中单击,然后输入文本即可。单元格在输入文本时可以自动扩展。
2)在单元格中插入图像
将光标放置于需要插入图像的单元格中,进行以下操作之一,都可以实现在单元格中插入图像:
(1)单击“插入”面板上的“Image”按钮。
(2)单击“插入”→“Image”菜单命令。
3)在单元格中嵌套表格
嵌套表格就是向单元格中插入表格。将光标放置于需要插入嵌套表格的单元格中,进行以下操作之一即可在单元格中嵌套表格:
(1)单击“插入”面板中的“Table”按钮。
(2)单击“插入”→“Table”菜单命令。
3.编辑表格
插入表格后,由于表格是有固定行和列的,因此有时候可能会发生数据与表格不匹配的现象,如行、列数不够用或者多余,或者需要使用一些单元格不规则的表格等,这时就需要对插入的表格进行编辑,如添加或删除行或列、合并或者拆分单元格。
1)选定表格
可以选定整个表格、整行或整列,也可以选择一个或多个单元格。(1)选定整个表格
可以进行下列操作之一:
①将鼠标指针移动到表格上面,当鼠标指针呈网格状时单击。
②单击表格四周的任意一条边框线。
③将光标置于任意一个单元格中,单击右键鼠标,在弹出的快捷菜单中选择“表格”→“选择表格”命令。
(2)选择表格的行或列。可以进行下列操作之一。
①将鼠标光标定位于行首或列首,当鼠标指针变成箭头形状时单击,即可选定表格的行或列。
②按住鼠标左键不放从左至右或从上至下拖动,即可选择表格的行或列。
(3)选定单个单元格
可以进行下列操作之一:
①按住Ctrl键不放并单击单元格,可以选定单个单元格。
②按住鼠标左键不放并拖动,可以选定单个单元格。
(4)选定多个单元格、行或列
①选择相邻的单元格、行或列:先选择一个单元格、行或列,按住Shift键的同时单击另一个单元格、行或列,则矩形区域内的所有单元格、行或列均被选中。
②选择不相邻的单元格、行或列:按住Ctrl键的同时单击需要选择的单元格、行或列即可。
2)添加与删除行或列
(1)插入行
要在当前表格中插入行,可以进行以下操作之一:
①将光标移动到插入行,单击鼠标右键,在弹出的快捷菜单中选择“表格”→“插入行”命令即可插入行。
②将光标移动到插入行,按Ctrl+M组合键即可插入行。(www.xing528.com)
(2)插入列
要在当前表格中插入列,可以进行以下操作之一:
①将光标移动到插入列,单击鼠标右键,在弹出的快捷菜单中选择“表格”→“插入列”命令即可插入列。
②将光标移动到插入列,按Ctrl+Shift+A组合键即可插入列。
(3)删除行或列
要删除当前表格中的行或列,可以进行以下操作之一:
①选定要删除的行或列,按Delete键即可删除。
②将光标放置于要删除的行或列中,单击鼠标右键,在弹出的快捷菜单中选择“表格”→“删除行”或“删除列”命令即可。
3)合并与拆分单元格
合并和拆分单元格可以自定义表格以符合页面布局需要。通过合并单元格,可以将任意数目的相邻单元格合并为一个跨多个列或行的单元格;通过拆分单元格,则可以将一个单元格拆分成任意数目的行或列。
(1)合并单元格
选中要合并的单元格,单击鼠标右键,在弹出的快捷菜单中选择“表格”→“合并单元格”命令即可。
(2)拆分单元格
将光标放置于要拆分的单元格中或选择一个单元格,单击鼠标右键,在弹出的快捷菜单中选择“表格”→“拆分单元格”命令即可。
4)调整表格大小
调整表格大小是指更改表格的整体高度和宽度,调整表格中元素的大小则是指更改行高、列宽以及单元格大小。
(1)调整表格的整体大小
选定表格后,执行以下操作之一,即可调整表格的整体大小。
①只改变表格的宽度:拖动表格右边的选择控制点。
②只改变表格的高度:拖动表格底边的选择控制点。
③同时改变表格的宽度和高度:拖动表格右下角的选择控制点。
④指定明确的表格宽度:在“属性”面板上的“宽”文本框中输入值,可以在后面的下拉列表中选择以像素或基于页面的百分比为宽度单位。
(2)更改行高
除了可以在“属性”面板上设定行高外,还可以用以下简便的方法更改行高:将鼠标指针移至要改变行高的行边框上,当鼠标指针变为行边框选择器时,按下鼠标左键向上或向下拖动。
(3)更改列宽
和更改行高一样,除了可以在“属性”面板上设定列宽外,还可以用以下简便的方法更改列宽:将鼠标指针移至要改变列宽的列边框上,当指针变为列边框选择器时,按下鼠标左键向左或向右拖动。
若要更改某个列的宽度并保持其他列的大小不变,可按住Shift键,然后拖动列的边框。此操作不但改变当前列的列宽,也改变表格的总宽度以容纳正在调整的列。
4.表格的高级处理
针对表格数据的处理需要,在Dreamweaver CC中还提供了对表格数据进行排序、导入和导出等高级操作技巧。通过运用这些技巧,可以更加方便、快捷地对表格数据进行处理。
1)导入表格式数据
Dreamweaver CC可以将在另一个应用程序(如Microsoft Excel)中创建并以分割文本的格式(其中的项以制表符、逗号、冒号、分号或其他分隔符隔开)保存的表格式数据导入到Dreamweaver CC中并设置为表格的格式。
如果要导入表格式数据,可以执行“文件”→“导入”→“表格式数据”菜单命令,在弹出的“导入表格式数据”对话框中进行相关设置,如图5.45所示,单击“确定”按钮,即可将所选择的文本文件中的数据导入到页面中,如图5.46所示。
图5.45 设置“导入表格式数据”对话框
图5.46 导入表格式数据后的页面效果
2)导出表格数据
如果要导出表格数据,需要把光标放置在表格中的任意单元格中,执行“文件”→“导出”→“表格”菜单命令,弹出“导出表格”对话框(图5.47)。在“导出表格”对话框中,“定界符”选项用来设置应该使用哪个分隔符在导出的文件中隔开各项,有“Tab”、“空白键”、“逗点”、“分号”和“引号”5个选项。“换行符”选项用来设置将表格数据导出到哪种操作系统,有3个选项,分别是“Windows”、“Mac”和“UNIX”,不同的操作系统具有不同的指示文件结尾的方式。
图5.47 “导出表格”对话框
免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。