Dreamweaver 8.0学习教程 - 表格的应用

第三节 表格的应用

表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面，使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。

一、插入并编辑表格
    1、插入表格
    在文档窗口中，将光标放在需要创建表格的位置，单击“常用”快捷栏中的表格按钮弹出的“表格”对话框，指定表格的属性后，在文档窗口中插入设置的表格。

“行数”文本框用来设置表格的行数。
    “列数”文本框用来设置表格的列数。
    “表格宽度”文本框用来设置表格的宽度，可以填入数值，紧随其后的下拉列表框用来设置宽度的单位，有两个选项——百分比和像素。当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。
     “单元格边距”文本框用来设置单元格的内部空白的大小。
     “单元格间距”文本框用来设置单元格与单元格之间的距离。
     “边框粗细”用来设置表格的边框的宽度。
     “页眉”定义页眉样式，可以在四种样式中选择一种。
     “标题” 定义表格的标题。
     “对其标题”定义表格标题的对齐方式。
     “摘要” 可以在这里对表格进行注释。

2、选择单元格对象
    对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。
    选择整个表格的方法是把鼠标放在表格边框的任意处，当出现这样的标志时单击即可选中整个表格，或在表格内任意处单击，然后在状态栏选中<table>标签即可；或在单元格任意处单击，点鼠标右键在弹出菜单菜单中选择“表格——选择表格”
    要选中某一单元格，按住Ctrl键，鼠标在需要选中的单元格单击即可；或者，选中状态栏中的<td>标签。
    要选中连续的单元格，按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。要选中不连续的几个单元格，可以按住Ctrl键，单击要选择的所有单元格即可。
    要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时，单击即可。
    3、设置表格属性
    选中一个表格后，可以通过属性面板更改表格属性。

“填充”文本框用来设置单元格边距，“间距”文本框用来设置单元格间距。
    “对齐”下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。
    “边框”文本框用来设置表格边框的宽度。
    “背景颜色”文本框用来设置表格的背景颜色。
    “边框颜色”用来设置表格边框的颜色。
     在“背景图像”文本框填入表格背景图像的路径，可以给表格添加背景图像。也可以如下图所示给文本框加上链接路径。还可以单击文本框后的“浏览”按钮，查找图像文件。在“选择图像源”对话框中定位并选择要设置为背景的图片，单击“确认”按钮即可。

4、单元格属性
    把光标移动到某个单元格内，可以利用单元格属性面板对这个单元格的属性进行设置。

“水平”文本框用来设置单元格内元素的水平排版方式，是居左、居右或是居中。
    “垂直”文本框用来设置单元格内的垂直排版方式，是顶端对齐、底端对齐或是居中对齐。
    “高”、“宽”文本框用来设置单元格的宽度和高度。
    “不换行”复选框可以防止单元格中较长的文本自动换行。
    “标题”复选框使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。
    “背景”文本框用来设置表格的背景图像。
    “背景颜色”文本框用来设置表格的背景颜色。
    “边框”文本框用来色设置表格边框的颜色。
    5、表格的行和列
    选中要插入行或列的单元格，单击鼠标右键，在弹出菜单中选择“插入行”或“插入列”或“插入行或列”命令。

如果选择了“插入行”命令，在选择行的上方就插入了一个空白行，如果选择了“插入列”命令，就在选择列的左侧插入了一列空白列。
    如果选择了“插入行或列”命令，会弹出“插入行或列”对话框，可以设置插入行还是列、插入的数量，以及使在当前选择的单元格的上方或下方、左侧或是右侧插入行或列。

要删除行或列，选择要删除的行或列，单击鼠标右键，在弹出菜单中选择“删除行”或“删除列”命令即可。
    6、拆分与合并单元格
    拆分单元格时，将光标放在待拆分的单元格内，单击属性面板上的“拆分”按钮，在弹出对话框中，按需要设置即可。

合并单元格时，选中要合并的单元格，单击属性面板中的“合并”按钮即可。

二、嵌套表格
    表格之中还有表格即嵌套表格。
    网页的排版有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。
    引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。
    另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。
    创建嵌套表格的操作方法，先插入总表格，然后将光标置于要插入嵌套表格的地方，继续插入表格即可。
    1、将光标放置在文档窗口要插入表格的位置，单击常用插入栏“表格”按钮，插入一个1行1列的表格一，宽度500像素，高度100％，边框为0，单元格间距为0，单元格边距为12像素。背景图像选择beij/003.gif。
    2、将光标放置在表格一内，插入表格二，1行1列，宽度100％，高度100％，边框为0，单元格间距为0，单元格边距为12像素。背景图像选择beij/002.gif。
    3、将光标放置在表格二内，插入表格二，1行1列，宽度100％，高度100％，单元格间距和单元格边距都为8像素，边框为10，边框颜色为#FEE4ED。背景图像选择beij/005.gif。
    4、将光标放置在表格三内，选择单元格的背景图像为beij/006.gif。添加文字“恭贺新禧”，字号68px，字体为隶书，颜色为#A51008。

三、表格的格式化
    做好的表格可以使用DW提供的预设外观，可以提高制作效率，保持表格外观的同一性，同时样式提供的色彩搭配也比较美观。
    插入一个5行6列的表格，表格的宽为500像素，高为300像素，边框、单元格间距和边距全为0 。
    选择表格，居中对齐表格后，执行命令/格式化表格，弹出“格式化表格”对话框，我们选择AltRows red格式，单击“确定”表格的样式就设定好了。

 m

这里，还可以自己设定相应的参数值。