【网页设计】网页表格-大学课件-

YANGTZE

NORMAL

UNIVERSITY5

网页表格YANGTZE

NORMAL

UNIVERSITY第5章表格的应用5.1表格的创建5.2表格的格式化5.3导入和导出表格式数据5.4对表格进行排序5.5实例制作YANGTZE

NORMAL

UNIVERSITY5.1表格的创建5.1.1插入表格YANGTZE

NORMAL

UNIVERSITY设置表格属性(1).表格ID(2).行列：(3).宽高(4).填充(5).间距(6).对齐(7).边框(8).背景颜色(9).背景图象(10).边框颜色YANGTZE

NORMAL

UNIVERSITY5.1.1插入表格在文档窗口中，将光标放在需要创建表格的位置，在“插入”栏的“ 常用”类别中，单击“表格”按钮，或选择“插入”菜单下的“表格 ”选项，弹出“表格”对话框。对“表格”对话框中的各个参数进行设置行数：确定表格具有的行的数目。列数：确定表格具有的列的数目。

表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。边框粗细：指定表格边框的宽度。如果您没有明确指定边框粗细的值，则大多数浏览器按边框粗细设置为1显示表格。若要确保浏览器显示的表格没有无边框，请将边框粗细设置为0。单元格边距：确定单元格边框和单元格内容之间的像素数。单元格间距：确定相邻的表格单元格之间的像素数。YANGTZE

NORMAL

UNIVERSITY5.1.2.创建嵌套表格表格之中还有表格就叫做嵌套表格。引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的网页。制作嵌套表格的步骤如下：单击一个表格中的单元格，定位插入的光标。选择“插入”菜单中的“表格”选项，打开“表格”对话框。在“表格”对话中，为嵌套表格指定所需要的属性，然后单击“确定”按钮，完成操作。在表格中可以直接输入文字或插入图像，也可以进行文字粘贴。YANGTZE

NORMAL

UNIVERSITY5.2表格的格式化5.2.1选择单元格对象5.2.2表格的HTML代码5.2.3设置表格属性5.2.4设置单元格、行和列属性5.2.5套用“表格模板”5.2.6去除表格辅助线YANGTZE

NORMAL

UNIVERSITY5.2.1选择单元格对象1.选中整个表格要选中整个表格，有如下几种方法：选择整个表格的方法是把鼠标放在表格边框的任意处，当鼠标指针右下角出现标志时，单击鼠标左键即可选中整个表格。在表格内任意处单击，然后在状态栏的标签选择器中单击<table>标记，即可选中整个表格。在单元格任意处单击鼠标右键，在弹出的快捷菜单中选择“表格”选项中的“选择表格”命令或者按Ctrl+A组合键，即可选中整个表格。YANGTZE

NORMAL

UNIVERSITY2.选中表格行要选中表格行，有如下三种方法：将鼠标指针移动到表格行左方表格之外的位置，当鼠标指针变为一个指向右方的黑色箭头形状时，单击鼠标左键即可选中相应的表格行。在此基础上，按住鼠标左键，上下拖动鼠标，即可选中多行。先单击要选中表格行的第一个单元格，然后按住鼠标左键拖动鼠标，直到表格行的最后一个单元格中，再释放鼠标，即可选中表格行，如图5-5所示。在此基础上，若继续按住鼠标左键上下拖动鼠标，即可选中多个表格行。先单击要选中表格行的任意一个单元格，然后在状态栏的标记选择器中单击<tr>标记，即可选中该表格行。YANGTZE

NORMAL

UNIVERSITY3.选中表格列选中表格列的方法与选中表格行的方法类似，这里不再赘述。5.选中单元格在要选择的单元格中按下鼠标左键，并拖拽鼠标到相邻单元格中，当单元格四周带有黑色粗框时释放鼠标，即可选中该单元格。要选中某一单元格，按住Ctrl键，用鼠标在需要选中的单元格单击即可。在要选中的单元格单击鼠标左键，然后在状态栏的标记选择器中单击<td>标记，即可选中该单元格。YANGTZE

NORMAL

UNIVERSITY5.2.2表格的HTML代码插入表格后，切换到代码模式或拆分模式，都可以看到一个表格的代码表示。任何表格都有三个基本要素：表行、表头和表项，每个要素都有自己的标签。其基本定义格式如下：<table>…</table>

定义表格；<tr>…</tr><th>…</th><td>…</td>定义表行定义表头定义表项（单元格）YANGTZE

NORMAL

UNIVERSITY1.表格尺寸设置一个表由<table>开始，</table>结束，表格的标题和内容全都包含在这两个标记之间。表格的整体外观由<table>标记的属性决定。主要有以下几项表格属性：表的大小用width=“数值”和height=“数值”属性说明。前者为表宽，后者为表高，数值是为像素数或占窗口的百分比。定义表格的粗细由border=“n”说明，n取整数，单位是像素（如果省略，则不带边框）。将border设成不同的值，可产生不同的效果。表格间距用cellspacing="数值"表示，"数值"的单位是像素。YANGTZE

NORMAL

UNIVERSITY2.表格内文字的布局与对齐表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列以align属性来设置，而上下排列则由valign属性来设置。其中左右排列的位置可以分为三种：居左（left）、居中（center）和居右（right）。上下排列常用的有四种：上对齐（top）、居中（middle）、下对齐（bottom）和基线（baseline）。YANGTZE

NORMAL

UNIVERSITY3.表格的颜色在表格中，既可以对整个表格设置底色，也可以对任何一行、一个单元格使用背景色。主要有以下三种：表格的背景颜色：<table

bgcolor="值">行的背景颜色：<tr

bgcolor="值">单元格的背景颜色：<th

bgcolor="值">或<td

bgcolor="值">注："值"为颜色的名称。YANGTZE

NORMAL

UNIVERSITY5.2.3设置表格属性在编辑窗口中，单击表格的左上角或在边框线上的任意位置双击，即可选中表格，在属性面板中可进一步设置表格YANGTZE

NORMAL

UNIVERSITY5.2.4设置单元格、行和列属性表格由很多单元格组成，每个单元格可以设置不同的属性。也可以同时选中多个单元格，设置其共同的属性。YANGTZE

NORMAL

UNIVERSITY添加和删除行或列(1).在表格添加一行光标放在单元格内修改---表格---插入行(2).在表格中添加一列同上

提示：按下<Ctrl+M>组合键能添加一行，按下<Ctrl+Shift+A>能添加一列。

(3).在表格添加多行或多列光标放在单元格内表格---插入行列(4)单元格的复制，粘贴，移动YANGTZE

NORMAL

UNIVERSITY单元格的合并及拆分

在制作网页的过程中，有时需要合并或拆分单元格。(1).单元格的合并表格---合并单元格(2).单元格的拆分表格---拆分单元格YANGTZE

NORMAL

UNIVERSITY5.2.5套用“表格模板”

在要格式化的表格中单击，再使用“命令

”菜单中的“格式化表格”命令，打开“格式化表格”对话框，在该对话框中选择一种样式，最后按“确定”按钮YANGTZE

NORMAL

UNIVERSITY5.2.6去除表格辅助线方法一：选中表格，单击宽度辅助线上的数字和小三角形，从下拉菜单中选择“隐藏表格宽度”，这样，表格的宽度辅助线就被去掉了。

方法三：选择“查看”菜单中的“可视化助理”选项，在打开的级联菜单中单击“表格宽度”选项同。这样也可以删除表格的宽度辅助线。

方法二：选择工具栏上的“视图选项”图标，从下拉菜单中选择“表格宽度”，这样表格宽度的辅助线没有了。YANGTZE

NORMAL

UNIVERSITY5.3导入和导出表格式数据1.导入表格数据(1)选择“文件”菜单下的“导入”选项，在其子菜单中单击“表格式数据”命令，或选择“插入”菜单下的“表格对象”选项，在其子菜单中单击“导入表格式数据”。打开“导入表格式数据”对话框(2）在该对话框中，此对话框允许您指定有关表格式数据文件的信息，并指定要使用这些数据创建的表格的属性。若要完成“导入表格式数据”对话框，请执行以下操作：数据文件：是要导入的文件的名称。单击“浏览”按钮选择一个文件，数据文件可以是纯文本格式，也可以是Excel等软件创建的文件，定界符：是正在导入的文件中所使用的分隔符，其中有逗号，分号，Tab，引号，其它等几个选项。设置完毕后，单击“确定”按钮，系统完成导入表格数据操作。YANGTZE

NORMAL

UNIVERSITY2.导出表格请将插入点放置在表格中的任意单元格中，选择“文件”菜单中“导出”选项，在子菜单中单击“表格”命令。即会出现“导出表格”对话框。在“导出表格”对话框中，指定导出表格的选项。此对话框允许您设置分隔符和换行符样式以通过从表格中导出数据来创建文本文件。定界符：指定应该使用哪个分隔符字符在导出的文件中隔开各项。换行符：指定您将在哪个操作系统中打开导出的文件：Windows、Macintosh还是UNIX。（不同的操作系统具有不同的指示文本行结尾的方式。）设置后单击“导出”按钮，即会出现“表格导出为”对话框，在该对话框中输入文件名称，单击“保存”，完成导出表格的操作。YANGTZE

NORMAL

UNIVERSITY5.5对表格进行排序选择该表格或单击任意单元格。选择“命令”菜单中的“排序表格” 命令。即会出现“排序表格”对话框该对话框允许您指定表格的排序方式，若要完成“排序表格”对话框，请执行以下操作：排序按：可以确定哪个列的值将用于对表格的行进行排序。顺序：确定是按字母还是按数字顺序以及是以升序（A到Z，小数字到大数字）还是降序对列进行排序。再按/顺序：确定在不同列上第二种排序方法的排序顺序。在“再按”弹出式菜单中指定应用第二种排序方法的列，并在“顺序”弹出式菜单中指定第二种排序方法的排序顺序。排序包含第一行：指定表格的第一行应该包括在排序中。如果第一行是不应移动的标题，则不选择此选项。对标题行：进行排序指定使用与body行相同的条件对表格thead部分（如果存在）中的所有行进行排序。对脚注行进行：排序指定使用与body行相同的条件对表格tfoot部分（如果存在）中的所有行进行排序。设置完成后，单击“应用”或“确定”按钮，完成操作。YANGTZE

NORMAL

UNIVERSITY实例1创建网站相册创建相册相册修改及美化YANGTZE

NORMAL

UNIVERSITY网页布局国字型工商银行

大型网站所喜欢的类型，最上面是网站的标题和广告，下面是内容，左右分为两小条内容，中间是主要部分，底下是版权声明等。YANGTZE

NORMAL

UNIVERSITY拐角型标题正文型左右框架型上下框架型综合框架型封面型Flash型YANGTZE

NORMAL

UNIVERSITY页面构成页面尺寸800*600页面显示尺寸为780*4281024*768页面显示尺寸为1007*600

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002以内，如

果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。页面长度原则上不超过3屏，宽度不超过1屏YANGTZE

NORMAL

UNIVERSITY页眉，页脚

全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31