基于表格布局网页设计与制作实训项目方案.pdfVIP

项目四：表格制作与应用

-使用表格布局网页

【任务描述】

在网页设计与制作过程中，为了能够直观的反映数据间的关系，可以在网页中表

格式的数据；另一方面，表格可以方便地设置宽度、高度以及单元格的大小间的关系，从而

可以利用表格来将各种元素进行定位，实现表格式布局。

本任务的目的就是利用表格进行网页布局，将各种元素到相应的位置。

【知识准备】

一、表格的作用

1、显示表格式数据；

2、利用表格进行各种元素的定位，即利用表格进行网页布局。

二、表格的构成

1、横向为行，纵向为列，行与列的交叉为单元格；

2、单元格内容与边框间的距离称为边距，两个单元格间的距离称为间距，整个表格的

边缘称为边框。

三、选择表格

1、选择整个表格：光标定位于表格中的任一单元格，单击窗口底部的table，即

可选择整个表格；

2、选择一行、一列、一个单元格：根据需要将光标定位于行、列、单元格中，分别通

过单击trtd来实现。

四、表格编辑

1、表格行高、列宽的调整：可通过属性面板输入相应的数值，也可通过直接使用鼠标

进行拖动；

2、表格处理：添加、删除行与列；单元格的拆分与单元格的合并等操作，类似于word2003

表格操作。

【任务目标】

对网页进行分析，根据网页设计的需要，通过表格进行布局网页版面，并将相应的内

容添加到网页中。网页效果见下图所示。

Project4:Formproductionand

application

-Usetabtolayoutweb

pages

[Taskdescription]

Intheprocessofwebpagedesignandproduction,inordertointuitivelyreflecttherelationshipweendata,

dataintableformatcanbeinsertedintothewebpage;ontheotherhand,tabcaneasilysettherelationship

weenwidth,height,andcellsize,sothattabcanbeusedtopositionvariouselementsandimplementtabular

layout.

Thepurposeofthistaskistousetabtolayoutwebpagesandinsertvariouselementsintothe

correspondingpositions.

【Knowledge

preparation】

1.Thefunctionofthe

form

1.Disydataintabular

format;

2.Usetabtopositionvariouselements,thatis,usetabtolayoutwebpages.

2.Structureofthe

form

1.Thehorizontaldirectionisrows,theverticaldirectioni