表格素有网页设计“灵魂”之称，当然在标准设计过程中，很多效果可以直接使用CSS快速实现，但即便如此，其作用不可小视。下面结合实例介绍如何巧妙运用表格、单元格属性在网页设计中富有创意的网页布局效果。

制作圆角表格

圆角表格在网页布局中使用频率最高。由于表格没有提供直接设置圆角的属性，制作圆角表格需要间接方法来完成，实现圆角表格的方法有很多种，如图像法、像素法、编程法，其中图像法使用范围最广。用图像制作圆角表格的步骤如下。

【操作步骤】

第1步，使用Photoshop设计左右对称的圆角图标，设计宽度为8像素，高度为60像素，使用红色（#DA2129）进行填充，如图6.27所示。

第2步，启动Dreamweaver，新建文档，保存为index.html。在页面中插入一个表格，主要设置：1行3列，大小为800×60像素，居中显示。

提示：使用表格进行网页布局时，一般要设置【表格】对话框中的【边框粗细】文本框、【单元格边距】文本框和【单元格间距】文本框都为0。也可以在插入表格之后，在【属性】面板中设置【填充】、【间距】和【边框】文本框为0。

第3步，在表格两端的单元格中分别插入圆角图标，并设置单元格宽度和图标宽度相同。在制作圆角图标时应先设置好图像大小和表格尺寸的配套。

第4步，设置中间单元格的背景颜色为深红色，使其与和圆角图标颜色保持一致。

第5步，在中间单元格内插入一个3行3列的表格。用该表格来布局标题栏，第1列用来控制标题与左侧距离，中间列用来绘制白色竖线，第3列分别用来输入标题和导航栏目。

第6步，以同样的方式在下面再插入一个表格，背景颜色设置为浅灰色，然后输入深灰色的导航文本。

巧做表格细线制作网页线条方法多样，简单总结如下。   

•使用图像法：用Photoshop制作直线，然后插入网页。   

•在Dreamweaver中选择【插入】|【水平线】命令插入，即使用<hr>标签绘制水平直线。   

•用CSS定义元素边框来制作直线，例如，div{border:solid 1px #FF0000;}代码可以绘制红色1像素宽的实线。   

•通过设置表格边框。上述方法各有利弊，可根据个人需要进行选择。在CSS之前，用表格制作细线比较常用。下面介绍一种独特方法，通过设置单元格背景色来显示直线，这种方法方便简单，又具有非常大的灵活性和实用性。

【操作步骤】

第1步，打开6.4.1节操作网页文档in-dex.html。在标题栏下面插入一个1行3列的表格，宽800像素，居中显示，实现网页主体的布局，即一栏三列的设计格局。

第2步，设置第1个单元格宽度为180像素，在该单元格中插入一个14行1列的表格，宽度为94%，居中显示。

1. 制作竖线

第1步，在第一个单元格中插入一个1行3列的表格，宽为100%，高为20像素。设置插入表格的第1个单元格宽为5像素。

第2步，由于Dreamweaver在网站建设插入表格时自动在每个单元格中嵌入一个空格符号&nbsp;，用来撑大单元格，当插入元素时，空格消失。所以在没有输入任何元素时，单元格最小宽度为10像素，最小高度为13像素。

第3步，当要设置单元格高或宽为最小值时，就应该把这些空格符号&nbsp;清除掉，方法是把光标置于该单元格内或选中该单元格，再切换到【代码】视图，把<td width="5">&nbsp;</td>代码中的&nbsp;删除即可。

第4步，删除空格符号&nbsp;之后，设置的小单元格效果就可以立即显示出来。然后设置第2个单元格宽度为1像素，背景颜色为浅灰色#DDDDDD，同样也需要把代码中的空格符号&nbsp;删除。这样就可以制作一个短竖线效果。

第5步，通过设置第1个单元格的宽度来调整竖线的横向位置；通过设置表格的高度来调整竖线的长短；通过设置该单元格的宽度来调整竖线的宽度；通过设置该单元格的背景颜色来设置竖线的颜色。

2. 制作横线

第1步，横线的制作方法要简单点。选中第2行的单元格。然后在【属性】面板中设置单元格高度为2像素，背景颜色为浅灰色#CCCCCC。

第2步，切换到【代码】视图，删除单元格中的空格符号&nbsp;。

第3步，以同样的方式制作竖线和横线，注意灰度和宽度的变化。

第4步，在这些直线单元格中输入导航文本和图像。