表格是整个网页设计的精华

《表格是整个网页设计的精华》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第7章表格表格是整个网页设计的精华，它不但具有输入数据和进行分类列表的功能，而且还有更重要的作用——页面布局。许多大型网站都是利用表格来划分页面进行布局设计的。表格既可以用于页面设计和排版，也用于控制文本和图像在页面上的位置。&知识点●表格插入和属性设置●表格编辑管理●使用表格模板●表格应用U难点●表格的属性设置●嵌套表格使用●表格的应用@要求掌握：●表格插入和属性设置●使用表格模板美化表格●利用表格进行网页布局了解：●表格的代码●DreamweaverMX中的表格特点7.1表格的插入与设置表格是处理数据时最常用的一种形式，因其形式简单、直观而受

2、到人们青睐。它不仅能对数据进行分类列表处理，而且可用来对页面进行排版布局。使用表格的第一步就是创建表格，然后对表格进行属性设置。7.1.1案例插入表格并设置其属性插入表格的网页如图7.1所示。第7章巧用表格·109·图7.1表格效果7.1.2制作要求在页面中插入一个3行3列的表格，对表格属性进行设置，第一行设置为标题，表格有1像素宽的边框，表格背景颜色为淡蓝色，表格中的数据居中对齐。7.1.3制作步骤1．表格插入表格插入可以使用菜单或面板，具体操作如下：（1）将鼠标放到网页中要插入表格的位置，在Insert面板的Common选项卡中单击按钮，或者

3、选择Insert/Table命令。（2）在弹出的对话框中输入相应的值，如图7.2所示。图7.2插入表格对话框图7.2中各个值的含义如下：●Rows：指定表格的行数。●Columns：指定表格的列数。●CellPadding：指定表格单元格中的内容与单元格边框之间的空间大小。●CellSpacing：指定单元格之间的空间大小。●Width：指定表格宽度。●Border：指定表格边框的宽度。（3）单击OK按钮，完成表格的创建。2．选定表格要对表格进行处理，首先要选定表格或单元格，可以一次选定全部表格或者是一行、·110·网页设计与制作一列或几个单元格

4、。选定后，才可以进行移动、复制及删除等操作。（1）选定整个表格。选定整个表格有几种方法：●单击表格左上角或右边框或底边框。●单击表格，然后选择Modify/Table/SelectTable命令。●将光标放到任一单元格，然后单击文档窗口状态栏上的

5、.4所示。图7.3已被选中的表格图7.4已被选中的一行（3）选定不连续的几个单元格。按住Ctrl键，单击要选定的单元格即可。3．在表格中添加内容在表格的单元格中可以插入文本、图片等页面元素。插入方式同本书第5章的在网页中插入文本、图片一样，首先把光标定位在单元格内，然后输入内容。我们在单元格中输入如图7.1所示的内容。4．设置表格及单元格属性通过设置表格或单元格的属性，可以改变表格的外观。（1）设置表格属性。选中表格，在属性面板中输入相应属性的值，如图7.5所示。第7章巧用表格·111·图7.5表格属性面板图7.6中各属性的含义如下：●Table

6、Id：在其下方文本框中设置表格名字。●Rows：设置表格行数。●Cols：设置表格列数。●W：设置表格宽度。●H：设置表格高度，但一般不指定。●Align：设置表格对齐方式，有多种选择可选，如左对齐、右对齐等。●CellPad：指定表格单元格中的内容与单元格边框之间的空间大小。●CellSpace：指定单元格之间的空间大小。●Border：指定表格边框的宽度。●BrdrColor：指定表格边框的颜色。●BgColor和BgImage：用来设置表格的背景颜色和背景图像。（2）设置单元格属性。设置单元格属性的操作如下：选定第一行单元格，在属性面板中输

7、入相应属性的值，如图7.6所示。图7.6单元格属性面板图7.7中各属性的具体含义如下：●Horz：设置单元格内容水平对齐方式，如左对齐、右对齐等。●Vert：设置单元格内容的垂直对齐方式，如Top（上端对齐）、Middle（中间对齐）、Bottom（底端对齐）等。●W：设置单元格宽度。●H：设置单元格高度。●Bg：指定单元格的背景颜色●Brdr：指定单元格边框的颜色。●NoWrap：禁止文字换行。●分别为左对齐、居中对齐和右对齐。●Header：设置单元格为表格标题。●同样，选中第二、第三行单元格，分别设置各自属性。7.2表格的管理·112·网页

8、设计与制作插入一个表格后，有时经常要在表格中插入一行或一列，或者删除行和列，还有合并单元格等，这就涉及到表格的编辑管理。7.2.1案例使