任务1-4　使用TABLE实现大小可变仿Windows窗口的设计

需求：

同任务1-3，实现指定长宽尺寸（600px*400px）的圆角方框。

分析：

利用TABLE行列对齐的特点，将DIV换成TABLE中的TD，首行TD控制宽度，每行TR控件高度。

实现：

第一步，添加新项“HTML页”，从工具箱的HTML选择卡中拖入TABLE。

第二步，指定＜table＞标签的属性cellspacing="0"和cellpadding="0"，使得每一个相邻图像无缝相连。

第三步，分别设置3个tr的高度height样式属性为27px、369px和4px。

第四步，分别设置首行3个td的宽度样式属性为4px、592px和4px。

第五步，分别设置9个td的背景图像background-image样式属性。

第六步，在table标签之外添加一个DIV以控制TABLE位置。整个代码如清单1-9所示。

清单1-9　整体定位DIV层和3*3表格

说明

TABLE使用在数据传输量不大的场合，如果需要将多幅较大图片拼接在一起，则不太适宜，在显示时它要将整个图形全部下载到客户端才能显示出图像。本任务中9个图形都很小，因此可以使用此种方法。

TABLE定位规范，但又失去灵活。而DIV作为容器独立使用，定位很灵活，使用很方便，所以很多人喜欢在DIV标签中通过设置样式完成许多意想不到的功能。