2、利用“cellspacing”属性制作细线表格
有时候我们需要用表格边框来区分各部分内容,若将表格边框宽度设置为“1”,又显得过于突出,影响整个页面的美观,怎么办呢?我们来看看下面两个表格以及它们的代码(注意红色部分代码):
表格A代码: <table width="160" border="1" cellspacing="0" height="40"> <tr> <td> <div align="center">表格A</div> </td> </tr> </table>
表格B代码: <table width="160" cellspacing="1" border="0" bgcolor="#000000" height="40"> <tr> <td bgcolor="#FFFFFF"> <div align="center">表格B</div> </td> </tr> </table>
表格A直接设置边框宽度为1,显示的结果并不令人满意,表格B则利用了“cellspacing”属性,边框明显细多了,显的更加精致。
在DreamWeaver中的快速通道
在Dreamweaver中插入一个一行一列的表格,表格的属性面板设置如下:
选择单元格,把单元格的背景色设置为白色就ok了!
说明:前面已经知道,cellspacing属性用来指定表格各单元格之间的空隙。我们设置整个表格的背景色时也包含了这个空隙,而设置单元格的背景色时却不包含这个空隙,所以,浏览器中显示的表格“边框线”并不是真正意义上的表格边框,而是单元格与单元格的空隙(此处的空隙我们设置的是“1pix”)。
练习:试制作出如下的效果(提示:原理同上,不同的是需要将每个单元格的背景都设置为白色。)
3、利用“cellpadding”属性制作等间距细线表格
|